IE css empty div extra padding bug
Most webdevelopers will have been in the situation that you want to use a background-image in an empty div and there is this whitespace padding at the bottom of the image.
Your stylesheet may look like
#mtdiv {
position:relative;
height:8px;
width:12px;
background-image: url(/images/bg_small.png);
background-repeat: no-repeat;
/* dit i tell you i hate IE? */
border:1px solid;
}
and you html like:
<div id="mtdiv"></div>
And when measuring your screenshot in photoshop you have a 4px gap underneath the background image. The height is not 8px as you dictated, but 12px!
Gdamn, ok.
The answer lies in inheritance:
When e.g. the body tag has a font-size formatting rule, the #mtdiv will inherit the font size. IE is the only browser that treats an empty div as if there was a whitespace between the tags. Well, rarities in IE are nothing new, but come on!. Fortunately the fix to this problem is very simple:
#mtdiv {
position:relative;
height:8px;
width:12px;
background-image: url(/images/bg_small.png);
background-repeat: no-repeat;
font-size:0px; <-- add this to get rid of font-size inheritance.
}
This really had me gooing for a while. But yeey, in the end, this fixxed a lot of “why is there this x pixel difference in IE compared to all the other browsers!”.
