It is common among CSS beginners to use what is known as a clearer element to contain floats in an element. IE is different in that respect. In IE, to be able to contain floats an element must have "layout". Unless that is true you will either get a Disappearing Content Bug (aka Peek-a-boo bug) or Leaking Background Bug. Which one you will get depends on whether or not your clearer elements are touching a floated element when the page is rendered and whether or not you have some content inside container after or inside the clearer element. Alternatively, you may have set height: 0; on the clearer element which will give it "layout" causing Disappearing Content Bug to reveal itself. In either case, if container doesn't have "layout" you will get a bug.
Due to the nature of the bug, the demos are displayed on a separate page. Typical code to produce the bug is demonstrated below.
<div id="container">
<p id="bugger">
Enough text to make this
element longer than the
height of the #container
</p>
<p id="disappearing">This text will be disappearing</p>
<div class="clearer"></div>
<p id="helper">I am more important than the text!</p>
</div>#container { background: #abc; }
#bugger
{
float: left;
width: 40%;
}
.clearer { clear: both; }The above code has all the ingrediets to trigger the bug. When the code is rendered in IE6, text inside #disappearing will be disappearing and reappearing on window sroll or other window transformations that would cause a repaint event.
Disappearing Content Bug would not be triggered if #container would not have any background set. The element #helper is an extra spice. It doesn't matter what it is, it can as well be just plain text, it can be and it can be inside of the clearer element. Without it the background on #container would leak out, with it #disappearing would be flickering.
All of the affected.
The problem is steaming from the fact that you are not containing floats in IE with proper methods. Clearer elements are not needed in 99.9% of the cases, do not use them. Instead, use other methods, all IE needs is "layout" on the element that contains floats.
Even if you do use clearer elements to contain floats, IE will still need "layout" on the container. Here is our original demo with the fix applied to it:
Due to the nature of the bug, the fixed demos are displayed on a separate page. Typical fixed code for the bug is demonstrated below.
<div id="container">
<p id="bugger">
Enough text to make this
element longer than the
height of the #container
</p>
<p id="disappearing">This text will be disappearing</p>
<div class="clearer"></div>
<p id="helper">I am more important than the text!</p>
</div>#container { background: #abc; }
#bugger
{
float: left;
width: 40%;
}
.clearer { clear: both; }<!--[if IE]>
<style type="text/css">
#container { zoom: 1; }
</style>
<![endif]-->The HTML and CSS code are the same as in the original demo even though you know already that you should not use clearer elements. We are giving layout to #content using conditional comments which is the right method to contain floats in IE and which is exactly what is needed to prevent Disappearing Content Bug. Read hasLayout tutorial to find the method that would work best for you.
Use what is right for you: "Browse Happy - Online. Worry Free. Switch today!"
Don't use it unless you understand it. Please take some time to read these articles: