IE Invisible Text/Text Dropout bug, a.k.a. "Peek-a-boo Bug"

Internet Explorer 5.5 and 6 has a problem with rendering text in DIVs with ‘float’ applied.

The text seemingly appears at random. Upon first load it may very well be visible, only to disappear the next second. A click on a link, or minimizing the window may make the text become invisible, or even visible again. There is no system in what triggers the bug.

I have investigated, and found the cause and solution…

The cause

The bug is related to IE handling of nested DIVs. Other, web-standards compliant browsers such as Mozilla Firefox or Safari, have no trouble.

Screenshots

IE With The Bug

iebefore

The text is invisible seemingly at random.

Firefox has no trouble rendering the text

firefox

Note, the rounded corners is a Firefox only feature, and has nothing to do with the bug.

IE with the bug fixed

ieafter

The text is visible at all times, as it should be. Additionally, a bottom-margin bug has been fixed.

The Solution

Seemingly, specifying a height for the DIV fixes the problem completely!

Let’s assume the problematic text resides inside the following DIV:

Problematic text and content here

Add the following code to your “post” class in your stylesheet:

.post {
	height: 1%;
}

The result is a page that renders exactly as it’s supposed to.

The fix may cause problems elsewhere on your website, so you may have to make a new unique class for the problematic content only.

There are several solutions to the problem. I have chosen to post here, the solution that works best for me. If it doesn’t fix the problem for you, explore the links at the bottom of this article.

Indepth

An indepth explanation and demonstration of the bug, complete with several solutions to the problem.

8 thoughts on “IE Invisible Text/Text Dropout bug, a.k.a. "Peek-a-boo Bug"”

  1. Daniel Pihlstr?m says:

    Suppose that would explain why my pages have never experienced that problem.. I define heights for all my divs. 🙂 Anything with variable heights = span for me.

    It really is a pain for us web developers to have to code in compliance to Internet Explorers capabilities. It’s hindering the progress of web-design as we can’t just leave IE as dead when ca 90% of all users unfortunantly use it… Including me… I use Mozilla / Firebird mostly, but you know.. IE is just so easy to get to, have a folder open you’re not using, start surfing with it.. Somehow feels alot easier than opening up Mozilla. 😛

  2. Joen says:

    I know exactly what you mean. It’s costs so much more development time, time that would have been better spent improving site core values.

    My main beef before moving over to Firebird/Firefox completely, is the same as yours… IE is right there! It starts fast, and it’s everywhere.

    I wonder if it would be possible, to have the Firefox be the default “browser engine”, kinda the same way as IE is the default “engine” in the swarm of addon browsers that exist.

  3. Do what I do (and more people should do): Screw developing for Explorer and have a pack of FireFoxes attack anyone who complains 🙂

  4. Anonymous says:

    Thank you!! I suddenly found today that lots of text on one of my sites was simply not displaying in Internet Explorer – as though its display property was set to “none”. This seemed random – although all pages are using the same templates, some of them displayed all the text correctly, some displayed none, and some only displayed text inside divs nested in the main content div. I searched for all sorts of things and your site is the only one with the answer. Grr to Internet Explorer.

  5. Anonymous says:

    Same Here. Thank you for delivering the fix for this bug… My site did not look so good when I had to remove the nested divs in order to eliminate the IE bug. Now I put your fix in and the site look sooo much better.

    Thanks Again!

  6. St. D says:

    Thank you! It seems to work…why, I don’t know, but hey…

  7. james says:

    Oh, yes, thank you. I was about to pull my hair out, which would have been a problem since I was using it as a handle to slam my head against the table.

    As for Firefox, here is a suggestion: give all your clients 10% off if they promise to switch to Firefox and dump IE.

Comments are closed.