IE6 - text is hidden with no reason?

Question

For a veeery long time I've had this problem but always I managed to avoid it somehow (by removing elements or changing order) and now here it is again and I have no idea how to get rid of it. First, it appeared in my admin panel, but only few users acces that so it's not big problem (nobody uses IE6), but now this problem is appearing on my index page of portal and I must get rid of it because 15% of portal visitors are IE6 visitors. Here's LINK to test version of portal: If you open this page in IE6 you can see that second news (titled: Test one) doesn't have any text, only image. Well, if you make mouseover on that image you will see that there is some text. This problem occurs only when I enter paragraf whose height isn't bigger that image's height. If I enter same image but with some more text this show/hide problem disappears. I hope someone knows why is this happening because this problem has been torturing me for few years but I never figured out what is the main cause of this problem and how to avoid it.

Any help is welcome! Ile

EDIT:

Here is solution for this problem: http://www.positioniseverything.net/explorer/peekaboo.html

Answer 1

Can you please post (the bare minimum example) the code here, so that we can reference it long after your server's copy goes away (... just like now)? Otherwise, this question will serve no one as a reference or learning tool.

Answer 2

Well, It's easiest to make copy paste from page where it's detailed explained:

HTML code:

<!--********** Start of demo ***********-->

<div id="floatholder">

<div id="float">
<br />
<span>&nbsp;Float&nbsp;
<br /><br />
<a href="#">&nbsp;test link&nbsp;</a>
</span>
</div>

This is bare text. <a href="#">Test link</a>

<div style="border: 3px solid #f00; background: #dde;">This is text inside a div.
<a href="#">Test link</a></div>
This is bare text. <a href="#">Test link</a>
<div style="border: 3px solid #0c0; background: #dde;">This is text inside a div.
<a href="#">Test link</a></div>
This is bare text. <a href="#">Test link</a>
<div style="border: 3px solid #00f; background: #dde;">This is text inside a div.
<a href="#">Test link</a></div>
This is bare text. <a href="#">Test link</a>

<div id="clear">Clearing div</div>  <!--******* Note: a cleared <br> will not prevent bug *******-->

<div style="border: 3px solid #00f; background: #dde;">This div is after the cleared div. (purple box) If cleared div
does not touch float, bug is not triggered. <a href="#">Test link</a></div>
</div>

<!--********** End of demo ***********-->

And here is screenshoot from IE6

Fixes:

The fixes:

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!

There are three ways we know to prevent this bug.

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)

We suggest using a conditional comment to feed a hasLayout fix to IE6 and below only. Further details helpful to this method may be found in the Zoom Fix page.

Thanks to Simon Willison for the timely screenshot.

This bug is called Peekaboo, and here is detail explanation of everything: http://www.positioniseverything.net/explorer/peekaboo.html

Although, I have to admit that for me it worked when I set all these 3 steps. After first two it didn't work, but after I added display: inline to floating div it worked.