Chrome Inspector: View styles and box diaram side by side - google-chrome

Earlier I was getting both styles and the box diagram in chrome inspector side by side as shown in below image.
And now after the latest update, I can see only 1 thing at a time, as shown in below image
Does someone know how to bring back the old layout?

Related

How can I use Chrome Dev Tools to locate what is causing the blue bar at the bottom of the attached screenshot

This is a Polymer 2 application using the <app-header-layout>. The blue band at the very bottom of the screenshot exactly corresponds to the area scrolled onto screen by scrolling the content below the header bar up.
I want to use Chrome Dev Tools to find out what is causing this particular color at this particular place, as it does not seem to correspond to an element; only to the scrolled in content.
Unfortunately, the color that it is, is one of my standard colors and is defined at the top of my application (that is using the "app shell" concept there is a single element that is the entire application and that defines a css3 variable --app-primary-color that is this color) so its difficult to spot.
In chrome dev tools I have tried both "inspecting" the element at that point on the screen, and selecting what should be the element containing the foreground content at that point in the screen, but there is no clue there about this color.
So how can I use chrome dev tools to give me some clue as to where this color comes from
EDIT: I found the cause of the color band, namely that it was the specified background colour on the html element. Why it caused the particular band on overflow content I still have no idea, nor have I discovered how to use Chrome dev tools to diagnose that

Layout problems in IE

Currently having a big problem with the layout of a site. It works fine in every other browser but for some reason, in IE, the menu's aren't expanding when they are clicked on. The screenshot below is how the list should look when a button is clicked on, this has also pushed down the elements of the bottom of the website such as the footer and images. The website address is www.citybathcoll.ac.uk if you want to see it first hand. From what I can see, it might be an unclosed tag but I can't see anything that stands out. Any help would be appreciated, Thanks.
Screenshot: http://imgur.com/ML3BYRk

Google Chrome Left / Right navigational arrows - always showing

When using Google Chrome on OSX, swiping left or right you'll see a circle with an arrow in either corner, indicating going back and forward in your history, see here:
http://cld.jxpr.se/image/1Z3D1R3K141B
On a site I am developing, I have these arrows always present, multiply stacked on top of each other, see here:
http://cld.jxpr.se/image/2o0N2O1d2e0t
That is in the middle of the page, at full screen. These arrow only show when the browser window is expanded beyond the max site width.
Any ideas what's going on here?
Thanks
Dave
I get the same problem. I'm working on a 27" imac so it might affect me more than most people. i normally just create a new tab and copy paste my url into it. i then close the old tab. not a long term fix though :(

how do i place DIVS side by side on Dreamweaver design view

i have a rather annoying DIV problem, im working on dreamweaver CS5, and i have 2 DIVS inside of another container DIV. But they cant seem to stay next to each other on the design view of Dreamweaver, but when i preview them in a browser they are okay, they are only distorted in the design view, its kind of annoying working with them on top of each other.I have tried decreasing the size of the divs, but they just cant seem to stay side by side.! how do i solve this?
There is no substitute for a browser, or browsers as you need to test your site in all the latest browsers. I would switch off design view and have a browser open on the side or on your second monitor if you have one. You can setup scripts / browser add-ons that continuously refresh your browser so you can see your changes reflected.
Having said that, In Dreamweaver I suggest using live view instead of design view.
See that and other useful tips here: http://www.hongkiat.com/blog/10-useful-dreamweaver-tips-for-beginners/

Link selection on Opera Mini 4.2 acting strangely

I'm developing a mobile site in HTML for use on 2 Blackberry models, one quite old (8700v) and one newer (8520) as specified by the client.
The native browser on the 8520 is rendering my HTML/CSS pages perfectly. The native browser on the old 8700 is far from perfect however as the CSS support is minimal.
As a solution I decided to try installing Opera Mini 4.2 on the 8700. The rendering is great, speed is even improved but there's some rather strange behaviour happening with the hyperlinks on the page.
When I scroll down through my pages links are automatically highlighted and made ready for selection. This is fine until I have a number of links close together, for example in my nav menu. The nav menu is a set of links arranged within a . When I scroll to the menu all the links within the menu highlight at once. Even within the body if 2 links are on 2 separate lines (one stacked on top of another) the same issue appears.
I'm trawling Opera documentation but haven't found anything useful yet. Anyone got any ideas on why this happens and if it can be resolved?
Without seeing the actual HTML/CSS code, it's hard to pinpoint the exact cause of this, but it's most likely one of the following:
The links in question point to the same URL. The browser will highlight them as a group to visualize this.
Some script is adding a click event listener or similar to the group of links.
An <a>-tag has been left open.