hasLayout.net

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

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:

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:

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

Create new comment

• Name:
• E-mail:
• Comment:
• Leave this field without any text:

• yarli

  Fri Nov 4 12:58:25 2011

  This bug also affects IE7.
  Had a [ul] list with a [li] containing an [a] followed by an empty [li] followed by another [li] containing an [a]
  
  [li][a][/li]
  [li class=split][/li]
  [li][a][/li]
  
  the 2nd li should have been 1px tall with a background color. instead it was 2px tall with some kind of 10px bottom margin out of nowhere.
  
  With all the tricks on this page I got it down to 1px tall with a mysterious 1px bottom margin.

• James

  Wed Jan 20 10:37:50 2010

  I have had trouble with this, and hadn't been able to fix it.
  
  I could fix it when not using sprites, but when using sprites, I couldn't.
  
  The trouble I was having was that when you slice a box with an outer glow, I just slice the top, middle and bottom. The top and bottom would repeat and that doesn't work with sprites - it looks really bad.
  
  My fix for this when not using sprites, was the top, set the background position to bottom and the bottom, set the background position to top.
  
  Anyways, I'm tired, I need to go to bed, but I need to get this coding done. You have just saved me about 2 hours of trying to fix the bug.
  
  Cheers,
  James

Donate / Buy My Books

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

Alternatively, purchase my books:

• Print eBook
• Print eBook
• Print eBook