SUBSCRIBE - [ Tech News ] [ Make Money Blogging Tips ] [ Online Marketing Tips ] [ Web Dev News ]
Powered by MaxBlogPress  

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;

}

f24a45d95310b3b67f5800d62df203dfdelicious

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.

CoolWebDeveloper.com runs on the Thesis Theme for WordPress

Thesis WordPress theme

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 }

Paul April 24, 2009 at 9:49 pm

Wow, I’ve been pulling hair because of this!
Thank you for sharing.

Martha May 9, 2009 at 11:51 am

It worked! Thanks so much.

Ivan July 22, 2009 at 6:18 am

Thanks man :-) This is so helpful. But I used just font-size without family and it worked.

Tony August 27, 2009 at 12:06 am

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.

Sir Cliff January 20, 2010 at 3:01 am

Simple but effective solution!

Joe Ski20 March 30, 2010 at 9:46 am

THANKS! I”VE BEEN LOOKING AT THE SAME CODE FOR THE LAST 20 MINUTES!!!

Paul March 31, 2010 at 6:01 am

What were you using to make your curved borders in IE?

Kelly April 20, 2010 at 12:49 pm

Another thing you can do is have the height set then say overflow: hidden. Works for me without the font doing it that way.

Craig August 20, 2010 at 2:37 am

That’s a bizarre fix?? It worked though! You’re a life saver! Thanks!

Martin July 21, 2011 at 11:37 am

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.

Leave a Comment

CommentLuv badge

Previous post:

Next post:

CoolWebDeveloper on Twitter CoolWebDeveloper on Facebook CoolWebDeveloper RSS Feed