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:auto;
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>
blix
blix
blargblix
blix
blix
blarg