Google chrome reports two different heights for same element

HTML & CSS
1

I’m trying to debug why a layout looks different in Opera than it does in Google Chrome and other browsers, and in doing so I noticed that Chrome was reporting two different heights for the same div.

In the Metrics section of Chrome Developer Tools it states the height is 96px with 10px padding top and bottom, so 116px total height. But in the yellow tool-tip below the div on screen, it states the height as 132px.

Anyone have an idea what’s going on there?

Dave

2

Thanks, here a link to a test page: Testing

Opera displays the div with a total height of 116px. Because of the horizontal scrollbar being added this clips the content slightly at the bottom and so it adds a vertical scrollbar as well. All other browsers (Chrome, FF, IE) display the div with a total height greater than 116px.

In Chrome I checked the offsetHeight of the div, and it is 132px. So it seems metrics in Chrome developer tools isn’t very good for debugging layout issues.

As you say, only thing I can think of regarding the layout difference between Opera and the other browsers is that most browsers might automatically add the scrollbar height to the div while Opera doesn’t.

3

I tend to prefer overflow: auto anyhow, so you could try this:

.ebay-carousel .ebay-items-scroller-outer { 
  width:600px;
  [COLOR="Red"]overflow:auto;[/COLOR]
  padding:10px 0; 
  [COLOR="Red"]height: 110px;[/COLOR]
}

This works for me. I added a height to help, though.

4

Thanks, that works nicely, though I had to change the height to 113px to avoid vertical scrollbars in IE and Chrome.

Cheers

Dave

5

Looks like the scroll bar is adding to the height. It would be easier with a live link, though. Is there a live page we could check? What’s the difference in other browsers?