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;
}
Related posts brought to you by Yet Another Related Posts Plugin.
Wow, I’ve been pulling hair because of this!
Thank you for sharing.
It worked! Thanks so much.
Thanks man :-) This is so helpful. But I used just font-size without family and it worked.
Thank you, that hint was pure gold! I had only png file in the div and no text at all - I really wouldn’t have think of changing the font size! Thanks once again.
Simple but effective solution!
THANKS! I”VE BEEN LOOKING AT THE SAME CODE FOR THE LAST 20 MINUTES!!!
What were you using to make your curved borders in IE?
Another thing you can do is have the height set then say overflow: hidden. Works for me without the font doing it that way.