The setup:

A liquid box has a float inside, and content that appears along side that float. All is well, until it's viewed in IE6. "Wah? Where's my content?!" You reload the page, and nothing. When you scroll down, or perhaps switch to another window, upon returning to the 'scene of the crime' there it all is, fat 'n sassy!

Note: This long standing bug has been suppressed in IE7 (released in late 2006), so the Peekaboo Bug is finally on the way out. IE6 will still exist however, and as long as it does we'll need to fix it.

The demo:

div#floatholder (dotted border) is dimensioned horizontally by margins, and vertically by content. div#float (thick brown border) is floated left, and contains a test link. Following that are several lines of bare text, alternating with divs containing more text, plus test links. Next is a cleared div (purple border), then another div for good measure.

To reset bug, reload page. Screenshot

The bugs:

This effect may turn up in a number of different contexts. We would try to list them here, but the page would become very long, and make our heads hurt.

Fun with links:

Try clicking the links. This will reveal the missing content, same as scrolling. If the float is a linked image, same deal. But only links within div#floatholder, and before the clearing div will expose the missing content.
But check out the last link in the content area. Weird!

Special notes:

Multiple repetitions of the content div containing the triggers can behave very strangely. As argued on css-d, it appears to be triggered by the clearing div. When it is forced to clear a float, the previous content after the float gets covered somehow, perhaps by the background on div#floatholder. (dotted border)

The fixes:

Finally, this bug will be triggered even if div#float preceeds div#floatholder, provided that this external float actually touches the clearing div within div#floatholder!

There are three ways we know to prevent this bug.

1. Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal.
2. Give both div#floatholder and div#float 'position: relative'. Be sure to fully test this method.
3. Give div#floatholder hasLayout (now the preferred method)

We suggest using a conditional comment to feed a hasLayout fix to IE6 and below only. Further details helpful to this method may be found in the Zoom Fix page.

Thanks to Simon Willison for the timely screenshot.

Big John Design   Contact Us ©positioniseverything.net
Last updated: September 9th, 2008
Created July 7, 2002