IE6 bug with overflow and position:relative

This page demonstrates a bug in Windows Internet Explorer 6 strict/transitional modes which causes relative positioned content to spill outside of an overflow constricted container. Static positioned content within that container will appear correctly (ie, not overflowing), exactly where it would have if the relative positioned content was rendered correctly. Scrollbars will appear and work for overflow:scroll and overflow:auto, even if they scroll through only empty space.

This bug does not appear in quirks mode, which is the only known workaround (to this author) at this time. Also, note that I had to make body hardcoded longer than height:auto provides, because the overflowing relative positioned content will (correctly) not cause the page to scroll further.

CSS for this example:


.scrollme{
	height:70px;
	overflow:hidden;
	background-color:#ccc;
}
.scrollme p{
	position:relative;
	background-color:#fcf;
	width:100px;
}

HTML for this example:


<div class="scrollme">
<p>blix</p>
<p>blix</p>
blarg
<p>blix</p>
<p>blix</p>
<p>blix</p>
blarg
</div>

Select overflow:
auto
scroll
hidden

blix

blarg

blix

blarg

Contact (click to email): Emmett the Sane