I have just found about this stupid problem yesterday when trying to add some nice round corners to a page. I was using 4 empty div’s, setting the positions and a background image trough css. Everything was okay in SeaMonkey and Opera, but definitely not ok on Internet Explorer.
Trying to debug the problem, I added a 1px red border to all div’s to check correct positioning. So, there was supposed to be 4 red squares, the div’s were each exactly 9 x 9 px. But instead of that, Internet Explorer would display 4 red boxes having their height waaaay larger than 9px. The div border did not appear as a square even though its css specified exactly “width: 9px; height:9px“. That was pretty nice for the browser to ignore my css code.
After some researching, found about someone who stumbled over the same problem:
http://www.zucchetti.co.uk/?p=75
It seems it’s actually a IE-only problem. When rendering an empty div, Internet Explorer will use the current font size as its height. The fix is as simple as setting the font size to 0 by using “font-size:0“, getting rid of the minimum div height being the font-size.