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 |

Expanding Height Bug

Affected Versions

This bug affects: IE6

Symptoms

Element is longer than the specified height (mostly applies to small heights).

Date of the Tutorial

Fri Jul 17 09:58:19 2009

Description

Even though this bug appears on pages that are not very semantic, the most skillful of developers may run into it some day as well. It steams from IE's broken box model interpretation and is visible on elements with a very small height.

The cause of the bug becomes clear if you put a word of text in such element. An example of this bug is presented in the following demo.

Demo

Lorem
HTML Code:
<div></div>
<div id="text">Lorem</div>
CSS Code:
div {
    height: 3px;
    background: #dd0;
}

#text { margin: 10px 0; } /* irrelevant to the bug */

First of all, I would like to note that background and margin properties are irrelevant to the bug and are shown in the code only to make it easier for you to associate the code presented with the actual demo elements.

The demo shows two 3 pixel high lines, which are divs. One of them has word "Lorem" in it. The word overflows the second div in any sane browser and in IE7 thus the height of the div stays at 3 pixels.

When the demo above is viewed in IE version below 7 something terrrible is happening, both of our divs are a bit higher than 3px. What is going on? Take a look at the div with word "Lorem" in it. Notice how the div expands to accommodate the word, also notice how the div without any text in it expands to the same height as the div with a word in it.

The bug makes more sense now, even in empty elements IE has at least a space. That "space", due to the broken box model makes our div expand instead of the "space" overflowing out of the div. Let's assume that "space" is a subject to font properties. Now the smartest of you are already trying something after hearing words overflow and font.

Solutions

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

Solution (Clean Solution) - with Side Effects

Date of the Solution

Fri Jul 17 10:05:25 2009

Fixed Versions

all of the affected

Description

The fix is very simple and clean and will use the overflow property to fix IE's overflow problem. Here is our original demo with the fix applied to it:

Lorem
HTML Code:
<div></div>
<div id="text">Lorem</div>
CSS Code:
div {
    height: 3px;
    background: #dd0;
    overflow: hidden;
}
#text { margin: 10px 0; } /* irrelevant to the bug */

We have added overflow: hidden to the divs with the problem and that fixed Expanding Height Bug. In particular, with overflow in place, that "space" that was overflowing in sane browsers is now hidden.

Solution (CS) Side Effects

The side effect of this solution is that anything that is overflowing would be hidden, which may not be what you want in some cases.

Solution (Clean Solution) - with Side Effects

Date of the Solution

Fri Jul 17 10:11:15 2009

Fixed Versions

all of the affected

Description

In this solution we will use font-size property with the value set to 0 (zero). Personally I suggest you use the other "Solution CS", since the user may have disabled font sizes (see Tools->Internet Options->General->Accessibility->Ignore font sizes specified on Web pages). Here is our original demo with the fix applied to it:

Lorem
HTML Code:
<div></div>
<div id="text">Lorem</div>
CSS Code:
div {
    height: 3px;
    background: #dd0;
    font-size: 0;
}
#text { margin: 10px 0; } /* irrelevant to the bug */

Not much to say. If you read about what causes the bug to appear everything should be clear. By setting font-size: 0; we are making the "space" and the text so small that they don't cause any overflow.

Once again, I recommend you use the other "Solution CS" that uses overflow: hidden since font sizes can be disabled by the user successfully destroying our fix.

Solution (CS) Side Effects

The side effect of this solution is that anything that is overflowing would be hidden, which may not be what you want in some cases.

Comments

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

Alternatively, purchase my books: