3 replies [Last post]
AdamSee
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2006-01-09
Posts: 14
Points: 0

Never encountered this bug before; the divs within an overflow element are acting like they aren't inside, instead as if they were apart of the page flow.

Here's the site, which works how it should in many browsers, but check it out in IE6/7 and a long scrollbar appears on the right, much longer than it should be.
http://codepress.co.uk/bugs/ie/overflow/

It's the .hentry divs which are causing the problem. Here's a screenshot from the IE developer toolbar outlining the divs:

#content #news-events {float:left;overflow:auto; height:21.2em; width:355px; padding:5px 6px 0 0; zoom:1}/*zoom 1 there for testing purposes only*/
			#news-events h2 {float:left; padding:0 0 0px;}
			#news-events a#document {text-align:right; display:block}
			#news-events .line {width:338px; margin:5px 0}

			#news-events .hentry {width:338px;}
			#news-events p a {color:#c90019}
			p span.author {color:#c90019}/*gb*/

I feel I'm missing something really obvious, but not sure what.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not sure I get this you say

Not sure I get this you say "and a scroll bar appears" but it does in FF as well and what would you expect with a fixed height? do you not want a scrolled area?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

AdamSee
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2006-01-09
Posts: 14
Points: 0

It was a bit unclear. In

It was a bit unclear.

In Firefox there's a scrollbar equal to the height of the page, around 980px. In IE6/7, the page is around 1500px heigh due to the contents of #news-events (overflow:auto;) extending the page, when it shouldn't affect the layout.

AdamSee
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2006-01-09
Posts: 14
Points: 0

Missed the position:relative

Missed the position:relative trick, that's usually the first one to try.

content #news-events{position:relative;} 
/*IE6/7*/
body div[id="news-events"] * {position:relative;} /*Filter: For Opera to get rid of the same overflow bug*/