Cut Off Scrolling Bug IEsix

From CSS Discuss

Jump to: navigation, search


Cut Off / Scrolling Bug in Internet Explorer 6


This Browser Bug was first identified in April 2001 IE6 scrolling bug following Jeffrey Zeldman's CSS redesign of A List Apart as described in issue 99 A Web Designer's Journey and Notes on ALA Issue 100.


Here's a demo As Jeffrey describes the problem: MsIEsix has trouble calculating the heights of block level elements. If the content area on page A was 200px high, and the same area on page B was 400px high, IE6 might display only the first 200px when it loaded page B. The initial value got stuck in the browser's cache. This is the reason that manually reloading (for instance, by hitting F11) "fixed" the bug on a page by page basis.

Javascript Fix

In September 2002 Jeffrey discussed a javascript fix he had used to fix the bug CSS Layout, Revisited

if (document.all && window.attachEvent)
window.attachEvent("onload", fixWinIE);
function fixWinIE() 
	if (document.body.scrollHeight <
document.all.content.offsetHeight) { = "block";


However, he also mentioned a CSS fix worked out by Michael who posted a re-design of ALA on his own site Michael's ALA revision The revised CSS has changes marked by the comment line /* --- begin layout changes...

Michael says:

What I did was based on setting widths for both the floated content and the regular content. The only major changes if you compare the actual ALA CSS and my revised version, are the margin in the #wrapper DIV, and the addition of a width to the #menu DIV. This also meant adding a CSS2 child selector since the browsers all reacted to the width differently. The width of 100% is aimed at IE5.5 and under and width:auto w/margin is given to browsers which handle auto better. I cannot say with complete confidence that the changes fixed the IE6 bug. While I could reproduce it on the ALA site, I couldn't reproduce it on my own server (even with ALA's actual documents), and thus have never been sure that these changes to the CSS had any effect on IE6. It may work, it may not.

In November 2002 John Potter copied Michael's changes to fix the bug on his site, which used the basic ALA layout. They worked fine with an incomplete doctype = quirks mode.

However, when the doctype was changed to put IE6 into standards mode , the #menu {width: 100%} caused all sorts of problems. Fortunately Michael made some other suggestions:

A couple of other 'fixes' for the problem are as follows: Add
'height:100%' to the content.

Or add

<div style="clear:both;">

to the end of your document, after your content, and before the closing </body> tag.

The #content {height:100%} didn't work on, but adding the the clearing div at the end did. (I hope!)

The following is needed for Netscape6:

body > #menu	{
	width: auto;
	margin-left: 69%;

Hopefully there are enough clues here for others affected by this bug to find a solution.

Please see my (other ;)) request in Wiki Suggestions regarding bug pages. -- Jeremy Dunck
Personal tools