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.
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.
10 thoughts on “Workaround to IE's Overflow Auto and Position Relative Bug”
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!
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.
Lindsey,Great! Glad to hear this helped you out. Thanks for the feekback!Sandy,Glad to hear you got it working.
Thank you! This is huge, this will have a major impact on our application!
Thank you so much. you save me lots and lots of headache
Hi Dusty,Thanks for posting this tip. It really helped me out.
You saved my day – thx!
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.
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.