CODEWITHSUNDEEP
cssinternet-explorer-6
Sam
Sam

Reputation: 6337

IE6 invisible text in 7 lines HTML, is there a fix?

It took me forever to reduce the problem to this. I cannot express the amount of frustration I'm experiencing, and if I did, it would not be suitable for any website. Ever. Here is the HTML code that is causing me epic pain:

<div style="padding: 5px; background: #EEE">
    This text is invisible. Remove either padding or background to see this.  
    <div>
        <div style="float: left;">left</div>
        <div style="clear: both;"></div>
    </div>
</div>

The text is invisible, unless you highlite it or drag a window over top of it, or something crazy like that.

This problem is resolved if you remove padding or remove the background.

How can I fix this?

Upvotes: 2

Views: 927

Answers (2)

Zack The Human
Zack The Human

Reputation: 8491

Looks like classic hasLayout problem. Add a width to your outer-most div or try any of the other methods described here.

Upvotes: 3

ieure
ieure

Reputation: 2421

You’ve been bitten by Peek-a-boo.

From that link, your options are:

  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)

Upvotes: 4

Related Questions