Return to Explorer Exposed
Next IE demo
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!
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. I would try to list them here, but the page would become very long, and make my head hurt.
The fixes: There are three ways I know to prevent this bug.
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)
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!
(oooh, I love floats)
Thanks to Simon Willison for the timely screenshot.
Big John
Contact me
©positioniseverything
Last updated: July 15, 2002
Created July 7, 2002