Space between DIV elements in IE6 and IE7
by MK on August 9, 2008
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;
}
Tagged as:
blank space between div's,
div CSS space,
space between div's
Article by
M K
M has written 115 awesome articles for this blog.
If you like This post, you can follow CoolWebDeveloper on Twitter.
Subscribe to CoolWebDeveloper feed via RSS or EMAIL to receive instant updates.
Thesis is the search engine optimized WordPress theme of choice for serious online publishers. Thesis will give you a ton of functionality without having to alter any code. For the advanced users, Thesis has incredible customization possibilities via Thesis hooks.
With so many design options, you can use the template over and over and never have it look like the same site. The theme is robust and very flexible, the Thesis Theme helps CoolWebDeveloper.com to run far more efficiently than ever before.
{ 10 comments… read them below or add one }
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.
That’s a bizarre fix?? It worked though! You’re a life saver! Thanks!
Thanks! My layout was all screwed up in IE7 and this worked perfectly! Saved me hours of trying to wrestle with the POS that is IE7.