Setting <div> height in IE problems?
November 11th, 2008 by Andrew MaleIt’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:
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;}
Simple but effective!!
