hasLayout.net

Affected Versions

This bug affects: IE7

Symptoms

Empty elements that have "layout" obtain height

Date of the Tutorial

Tue Aug 18 10:34:57 2009

Description

Another bug I found on Gérard Talbot's IE7 Bug Collection Page. This bug probably would bite persons who use "clearer elements" to clear floats. Let's take a look at the demo:

Demo

The demo is available on a separate page

HTML Code:

<div></div>

CSS Code:

div {
    background: blue;
    width: 100%; /* to give "layout"  */
}

We have an empty block-level element - ' element"><div>. In CSS we are giving it "layout" with width property and setting background to blue. Since the element is empty, sane browsers will render it with zero height; IE7 apparently think that there is a magic-space there and render a strip of blue color with approximate height of the computed font-size.

Solutions

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

Solution (Clean Solution)

Date of the Solution

Tue Aug 18 10:37:35 2009

Fixed Versions

All of the affected

Description

HTML Code:

<div></div>

CSS Code:

div {
    height: 0;
    overflow: hidden;
    background: blue;
    width: 100%; /* this is just what we originaly had as "layout" giver */
}

Our markup stayed the same; in CSS we have added height property set to value 0 - this fixes the bug in IE7.