hasLayout.net

Share |

Empty Element Height Bug

Affected Versions

This bug affects: IE7, IE6

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 - <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; IE6 and 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

This is a "fight fire with fire" kind of bug. We'll be fixing it by explicitly reminding IE that there should be no height on the element along with an extra kick for IE6. Let's see:

Fixed demo is available on a separate page

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. Since IE6 is a sufferer of "Expanding Height Bug", we are also adding overflow property set to value hidden to fix the aforementioned bug in IE6.

Comments

Create new comment

  • Zoffix Znet

    Mon Nov 8 20:12:55 2010

    Could you remove the ``height'' when content is added?

  • whiterabbit

    Mon Nov 8 20:02:44 2010

    It doesn't fix it. The point of having an empty element is adding to it some content on demand. After the content is added, the height stays 0 and the content is not visible.

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

Alternatively, purchase my book:

Support Wikipedia