IE6 Div Height Problem

We all know IE6 is the web developers nightmare and today that continued when I was unable to make a 5px high div appear that height in IE6. Wow, the amount of time I spend on IE6 when developing sites is quite astonishing and I can’t wait for the day when we see the death of IE6. Anyhow back to the problem: IE6 kept wanting to show the 5px high div as 20px! After a bit of playing and hunting around the web here’s how I overcame the problem.

For example you have:

#small-div {
width: 100px;
height: 5px
background-color: red;
}

So this will appear in most browsers as a 5px div. But in IE6 it appears higher. So to overcome that issue simply add a zero font size to the CSS e.g:

#small-div  {
width: 100px;
height: 5px
background-color: red;
font-size: 0px;
}

Now, if you have text in that div, you obviously don’t want to set the font size as zero so you can also try setting the overflow:hidden element which can also do the trick.