si-blog

IE6 and its Houdini-like text

Posted Feb 29, 2004 in CSS.

While I was working on a website for a school project, I came across this strange effect where large chunks of text were disappearing in Internet Explorer 6.0. Resizing the viewport, or minimizing and restoring the window, seemed to restore the text to health.

After running a few experiments, I figured out that it was related to floating content. I don't know if anyone else has encountered this problem, but I thought I'd post my fix anyway. Put the following CSS rule on the parent element of the element(s) containing disappearing text:

height: 100%;

I haven't thoroughly tested this, but it seems to work on all the browsers I use. It invariably means applying the rule to main content div elements that contain floats, as in my case. Let me know if you have encountered this problem before, and know of a better solution.

Comments

  1. Gravatar

    That's the Peekaboo bug:

    http://www.positioniseverything.net/explorer/peekaboo.html

    I don't like to set an explicit height, as, if I remember correctly, that means that the contents of the box should overflow (but leaving the borders, backgrounds, etc as they are).

    Then again, in almost all cases, standards-compliant browsers should treat 100% as auto (it should only be applied properly when a fixed height is set for a parent), so you are, in effect, using a CSS hack that only IE sees.

    For what it's worth, in an older version of a site I maintain, I used the exact same height: 100% hack to get a disappearing margin to come back. It broke Konqueror in exactly the way I describe, but I couldn't find another workaround, and sadly, Internet Explorer trumps Konqueror.

    Posted by Jim Dabell on Feb 29, 2004.

  2. Gravatar

    Ah ha! At least the bug has a cool name. In my particular case (a school project), setting a height of 100% is probably going to do no harm. As long as it looks okay in IE6/Win, Mozilla 1.x/Win, IE5/Mac, and Safari, I needn't worry.

    Hmmm. "Position is everything" is a pretty cool site. Thanks for the link!

    Posted by Simon Jessey on Mar 01, 2004.

  3. Gravatar

    I've ran across the peekaboo bug in IE6 numerous times, and it can be downright annoying. When I first experienced the problem, I discovered the Position Is Everything site too, and it has helped tremendously. Also quirks.org is another great resource.

    Posted by Matt Burris on Mar 02, 2004.