It's Movember. Movember is a yearly, world-wide fundraiser for research of men's health problems, such as prostate cancer and depression. Your donation will count, even if it's just $1. Click here to donate.
Use Bodhi Linux—It's awesome!

hasLayout.net

Share |

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 &nbsp; 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

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my books: