IE7 CSS Scrolling Div Bug

html css internet-explorer-7
frank hadder picture frank hadder · Sep 16, 2008 · Viewed 37.8k times · Source

I recently came across an IE7 only bug that I thought I'd share so when I come to this site 6 months from now to figure out the same thing, I'll have it on hand.

I believe the easiest way to recreate this bug would be the following html in a page with a declared doctype (it works correctly in "quirks mode" / no-doctype):

<div style="overflow: auto; height: 150px;">
    <div style="position: relative;">[...]</div>
</div>

In IE7, the outer div is a fixed size and the inner div is relatively positioned and contains more content (assuming the inner div causes an overflow). In all other browsers, this seems to work as expected.

Screenshot: bug screenshot

Answer

frank hadder picture frank hadder · Sep 16, 2008

The easiest fix would be to add position: relative; to the outer div. This will make IE7 work as intended.

(See: http://rowanw.com/bugs/overflow_relative.htm).

EDIT: Cache version of the broken link on waybackmachine.org

Related questions

:after and :before css pseudo elements hack for IE 7

I am using :after and :before css pseudo elements and it is working fine in IE8, and all modern browsers but it is not working fine in IE7. Are there known hacks to work around this in IE7?

Read More
Image and text inside of <a> tag

This is the html asp.net generated (with some client-identifying details removed) In Windows XP / IE 7 clicking on the image does nothing. Click on the text executes the hyperlink. Right-clicking anywhere and then selecting open in new window or open …

Read More
Hide scrollbar in IE

In our application for UI we are using JSF or Prime faces for that. We would like to hide the scrollbar for our application, but we are struggling to achieve this in Internet Explorer (We are using IE7). Is there …

Read More