IE6 Height Problem

As we all know too well, IE6 has many issues, one of which is the IE6 height problem. The outdated browser reads the CSS differently to the modern browsers, and it places emphasis on things that aren't too important. Use IE6 to view the demo IE6 sees the font-size of a div as more important than the actual height of the div. This obviously causes many problems for people since we all learn that if you set the height property of an element in the CSS, it should change accordingly. If it does not, then you have obviously overlooked something. Also, just a side note, IE6 doesn't support min-height and max-height.

The HTML

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

The CSS

.box1 {
    background: blue;
    height: 3px;
    width: 150px;
}
.box2 {
    background: black;
    height: 3px;
    width: 150px;
    font-size: 0;
}
.box3 {
    background: white;
    height: 3px;
    width: 150px;
    overflow: hidden;
}

IE6 Height Solution

If you looked at the demo using IE6, you will see that the height of box1 is about 18px and the other boxes are both 3px high (Like they should be). Box 1: The classic IE6 height problem. It is meant to be 3 pixels high, but it is defaulting to the font-size assigned to the box. Box 2: Since the minimum height is the font-size, why not give the box a font-size of 0? This will force IE6 to look at the height we assign instead of the font-size as a minimum height. Box 3: We have set the height to 3px, so anything over that is an overflow. If we set the overflow to hidden, it hides the excess of the div. We have to force ie6 to behave like a modern browser. Fortunately it is generally relatively simple.