This rendering bug in Internet Explorer 6.0 causes text in a div with a background color followed by a div which floats to the left and another which is clear on the left to be invisible. This bug does not manifest in FireFox or Safari (although Safari renders the Hidden Text to the right of the float: left div). All styling on the text is also invisible (such as background colors and text colors).

The text and all styling will show up if you highlight the text but disappears again if you cause that area to be redrawn by e.g. moving a window over it or maximizing / un-maximizung the IE window. Scrolling the hidden text off the screen and back on causes most hidden text to show up. Because of this last possibility you may need to refresh the page to make the text hidden if you scroll and see any of the "Hidden Text". Also, if you refresh the page with the "Hidden Text" near the edge it will show up due to a strange scroll-on-refresh behavior of IE.

I put each example (other than the first) on its own page due to the strange scrolling problem mentioned above. Not all of my examples were working on a single page.

Using an HTML 4.01 Transitional or XHtml doc type has no effect. Using semicolons or not on the CSS has no effect. Moving the CSS to classes in a <style> section or a CSS file has no effect. To make my life easier each example has no doctype or html or body tags, but this page, which shows the bug in its simplest form, is valid XHtml 1.0 Strict.

You can contact me at Justin Patrin <papercrane@reversefold.com>

Hidden Text
Floating to the left
Clear on the left

All text, including text in divs and spans, and even other styled divs and spans before the last two divs is invisible

Click here to view

You can also add other styled divs in between the two last divs and get the same effect

Click here to view

Thanks to Nicolas BUI for a new workaround, using "display: inline-block;"

Click here to view

To make the text appear you can apply a zoom: 100% to the outer div

(Thanks to Ingo Chao on the CSS-D mailing list for pointing me in the right direction)
Click here to view

The above won't validate as zoom is a proprietary IE tag, so here's a Holly Hack version of the workaround

(Again, thanks to Ingo Chao)
Click here to view

You can also wrap the text in a table to make it appear

Click here to view

Removing any one of the three divs causes the text to appear

Remove the outer div

Click here to view

Remove the floating div.

Click here to view

Remove the clear div

Click here to view

Removing any of the three styles causes the text to appear

Remove the background color.

Click here to view

Remove the float

Click here to view

Remove the clear

Click here to view

Valid XHTML 1.0!