Disappearing Content Bug

Affected Versions

This bug affects: IE6

Symptoms

Some content disappears and reappears on scrolling or window transformation as well as minimizing and maximazing of the window.

Date of the Tutorial

Fri Jul 17 12:30:22 2009

Description

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.

Demo

Due to the nature of the bug, the demos are displayed on a separate page. Typical code to produce the bug is demonstrated below.

HTML Code:

<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>

CSS Code:

#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.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Layout Solution)

Date of the Solution

Fri Jul 17 12:42:14 2009

Fixed Versions

all of the affected

Description

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.

HTML Code:

<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>

CSS Code:

#container { background: #abc; }
    #bugger {
        float: left;
        width: 40%;
    }

.clearer { clear: both; }

Conditional Comments:

<!--[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.

Comments

TCHDVLP

Wed Mar 6 06:21:25 2013

Whoaa !! I spent 2 days on this bug, after adding the "zoom:1;" to my contener, it's solved my problem in one shot.

Really good tip !!
zell

Sun Mar 11 01:47:40 2012

the giving source is not work,did the float elements need to be putted after the disapear element?
tomat

Mon Nov 8 08:13:19 2010

Very useful information, but I'm not sure if the problem I've detected is just the same.
It happens with every new templates of blogger in IE6 and IE7: all the content dissapears when you change the size of the window. I can't find floats and I donÂ´t know where to apply the fix.
chris

Thu Jul 29 15:10:22 2010

Thank you so effing much. You have helped me defeat the IE monster after a day of hopelessness.
Pratap Singh

Wed Oct 7 03:23:01 2009

Thanks buddy,
Your content is helpful for me boz I am a developer and I have to fix some designing issues on my page. Thanx a lot!!!!!