Dusty Reagan

Workaround to IE’s Overflow Auto and Position Relative Bug

July 28, 2006
Categories: Web & Software Development
Tags: CSS, HTML

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):

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):

Let me hear from you if this helped you out.