Workaround to IE's Overflow Auto and Position Relative Bug

The other day I ran into a rather annoying CSS bug in Internet Explorer 6 when using a XHTML strict or transitional doctypes. If you place a relatively positioned element inside of a container using overflow auto, the relatively positioned element becomes fixed on the page, rather than becoming visually contained in the overflow auto element.

IE Bug Example (HTML):

<div style="height:80px;overflow:auto;background-color:gray;width:200px;">
	<p style="position:relative;background-color:lightblue;width:150px;">
		I'm a relatively positioned element!
	</p>
	I am not.
</div>

IE Bug Example (In Action):

I’m a relatively positioned element!

I am not.

As stated by the W3C, this is not correct behavior.

9.4.3 Relative positioning

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1′s offset is applied. This implies that relative positioning may cause boxes to overlap. However, if relative positioning causes an ‘overflow:auto’ box to have overflow, the UA must allow the user to access this content, which, through the creation of scrollbars, may affect layout.

I believe I have discovered a workaround for this bug. IE will behave correctly if you add ‘position:relative’ to the containing element that is using ‘overflow:auto’. I believe this is an expectable workaround because setting ‘position:relative’ without setting the ‘top’ or ‘left’ attributes will not affect the page layout.

Solution Example (HTML):

<div style="position:relative;height:80px;overflow:auto;background-color:gray;width:200px;">
	<p style="position:relative;background-color:lightblue;width:150px;">
		I'm a relatively positioned element!
	</p>
	I am not.
</div>

Solution Example (In Action):

I’m a relativly positioned element!

I am not.

Let me hear from you if this helped you out.

This entry was posted in Web & Software Development and tagged , . Bookmark the permalink.

10 Responses to Workaround to IE's Overflow Auto and Position Relative Bug

  1. Lindsey Simon says:

    Wow, Dusty, I believe this “fixes” it for me. I’ve been going to the quirksmode website every couple of months to see if anyone had found some solution to this other than putting IE into quirks mode. Much obliged!

  2. sandy-email is on webpage says:

    this doesnt seem to work for me.here is my page:http://www.sandygonzales.com/newworks/the textWrapper element is positioned relatively and contained in “text” element with is also position relatively and has overflow:hidden. it is stretched by “textWrapper” and overflowing. ;( “text” is inside a container “primaryContent” also positioned relatively. any ideas? Sorry the naming is counterintuitive. textWrapper is INSIDE text.

  3. Dusty Reagan says:

    Lindsey,Great! Glad to hear this helped you out. Thanks for the feekback!Sandy,Glad to hear you got it working.

  4. Anonymous says:

    Thank you!

  5. Anonymous says:

    Thank you! This is huge, this will have a major impact on our application!

  6. Anonymous says:

    Thank you so much. you save me lots and lots of headache

  7. Anonymous says:

    Hi Dusty,Thanks for posting this tip. It really helped me out.

  8. s1000 says:

    You saved my day – thx!

  9. thangamariappan says:

    Its helped us to fix the maliculous issue with our application. Its great work around, I felt very happy when this solution seen and applied.
    Thank you so much!
    Keep posting your great ideas to damn IE issue.

  10. BT says:

    Excellent.
    I’ve read some articles about this bug, but none of them were written that it’s needed to apply position:relative to both elements.

    Thanks! Saved a lot of time for me.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>