Setting height in IE problems?

Ian Hancock Development, Stuff

It’s always nice to find a fix for a Internet Explorer specific bug although not nice the amount of time it takes to find. This particular one relates to setting the height of a <div> containing a background-image which, not unsurprisingly works fine in FireFox.

Consider:

<div class=’divHeight’></div>.divHeight {height:13px;background-image: url(../image/background.gif;background-repeat:no-repeat;border:solid 1px red;}

Which renders thus in IE7:

Example of incorrect div height in Internet Explorer

Note the whitespace beneath the blue image despite this image being 13 pixels high.

Now the solution is as simple as adding overflow:hidden to the divHeight class!

.divHeight {overflow:hidden;height:13px;background-image: url(../image/background.gif;background-repeat:no-repeat;border:solid 1px red;}

Example of fix for div height error in Internet Explorer

Simple but effective!!