We use cookies to improve your experience of our website. Find out more.
Okay

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;
}

#offers-bt {
width: 378px;
float: left;
font-size: 0px;
}

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.