"Overflow:auto" issues (Opera 10, IE6/7)

[koroviev]

Hi!

I’ve been working with a site where I’ve embedded an update box into the page. The box contains a list of links and comes to 1088 pixels in length. This is too long for the design of the page which is a short home page for the site, so I wrapped it in a box 200 pixels high with overflow:auto. It worked perfectly and as expected in firefox and safari, but then I launched Opera (10.10).

Opera wraps the box perfectly, and the scrollbar functions perfectly. Everything looks as it should on top, but beneath the footer of the page the body continues onwards trying to accommodate the total height of the list which isn’t there.

While writing this I checked it in IE.
IE8 runs it perfectly.
IE7 does the same as opera but shows the list of links behind other elements, the scrollbar is there out does nothing.
IE6 is pretty much the same.
Strangely, IE5 has no problems with this aspect. Almost everything else is mangled there, but the scrollbox works perfectly.

I’ve tried declaring max heights for the box, and declaring heights and max-heights for its parent, but it has no effect.
I haven’t worked with IE debugging for this yet so I’m pretty sure the visibility of the contents is just an IE issue that won’t be too hard to fix (but any advice about it will be appreciated). My main question here is why Opera does this, and how to work around it.

Thanks in advance for any help.

[koroviev]

No iframes, just a container div . After your reply I tried applying display:block to the div, and its ancestors, but no changes.

Pre-posting edit:
Got it!
There are date elements which appear for each entry on the list, they were causing it.
Each date element was positioned absolutely to place it exactly where it should be within the entry.
I changed some things to make it stay where it should with floating instead of absolute positioning.
Without the absolute positioning, the problem vanishes.

It works now, but still, can anybody tell me why this happened?

[Author]

Posts