Space between DIV elements in IE6 and IE7

This particular bug has troubled me for some time today. I was putting a curved border around one of the Javascript slideshows and was using three div’s with float:left attribute.

Both IE6 and IE7 were inserting a blank space of about 5px right inside the parent DIV at the bottom and that was resulting in blank space between the borders.

After some troubleshooting I found out that IE was inserting a space for the font size regardless of the height mentioned in CSS.

So the fix is to define a font-family and font-size attribute lesser then the total height of DIV.

e.g.
#left
{
background-image:url(”imageURL”);
background-repeat:no-repeat;
width:3px;
float:left;
margin:0px;
padding:0px;
height:3px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:2px;
}