CSS Double padding IE7 Fix « cafefrenzy.com

cafefrenzy 2:52 pm on November 13, 2006 Reply

CSS Double padding IE7 Fix

Nothing is more annoying than finishing a web design, having it dispay just the way you like it in your standards compliant browser (*cough* get Firefox) only to remember to check it in IE and find it a garbled mess. Today I came across a rather annoying CSS bug in IE7. IE7 doubles the top padding on my link bar.

CSS Code
#quicklinks {
clear: left;
color: #fff;
font-size: 0.8em;
padding: 16px 0 0 30px;
}

Here’s what it looks like:
IE7 Double padding bug

And the fix…

Just add display: inline-block in your div. That’s it… I know, it’s ridiculous.

*UPDATE* If you want a more detailed explanation of the issue, go to: Position is Everything

Andrew 11:50 am on April 8, 2007 Permalink

Thanks for this – had been puzzling (& annoying) me too. I set the footer div (beneath content & sidebar divs) to inline-block, which was fine in IE and Fx, but Opera then shrunk the footer width to fit and Safari ignored my clear: both. Neither of which was good. So sticking this in a conditional comment may be safer.
Mick Byrne 6:11 pm on April 25, 2007 Permalink

Great fix, thanks.
JÃ¶rg Butzer 9:28 am on May 10, 2007 Permalink

Thanks – made my day.
Jared 3:11 pm on November 21, 2007 Permalink

This fixed my problem. Thanks for the input!
Vicky 5:27 am on February 22, 2008 Permalink

You’re a genius! Thank you for documenting this.
PatrickB 6:51 pm on February 26, 2008 Permalink

Thanks for the helpful tip!
Erick S. 12:49 pm on March 20, 2008 Permalink

Doesn’t seem to work…In IE6 and IE7 it doesn’t look the way I want to. So in the stylesheet I used the underscore hack, like follows:

padding-top:122px;
_padding-top:128px;

Now it looks oke in IE6 and Firefox, IE7 shows ‘less’ padding.

So hopefully I added the:

display: inline-block

like mentioned here…But nothing seems to change?!

Also when I remove the underscore hack…
Juani 11:31 am on March 25, 2008 Permalink

Thanks for this! This fix also works with a rare double margin bug in IE7 and also in IE6!
IE7 CSS Bug: Adding ‘padding-top’ Value Twice at chriskarcher.net 7:09 am on April 2, 2008 Permalink

[...] Specify the <div> as “display: inline-block” (credit) [...]
Pushtoon 7:36 am on April 22, 2008 Permalink

this fix is not working for me

I tried to add it in the css file and the html as well in the div tag, but no go.

Does it work for layers which are nested within another layer which is centralised on the page.
Ian 3:56 pm on May 19, 2008 Permalink

Thanks, worked for me. I can’t believe we now have to support two incredibly buggy browsers, and soon to be three!
Julia 1:55 am on May 30, 2008 Permalink

You are a star, thanks so much for this!!
barry 4:17 pm on May 31, 2008 Permalink

Thanks, for that one. Bizarre though. Inernet Explorer really is a mystery…
hotshot309 12:52 am on June 7, 2008 Permalink

Bravo…thanks for the (nonsensical but functional) fix, which I will be using. Maybe IE8 will see this repaired (fingers crossed).
iHATEsushi 6:26 am on June 10, 2008 Permalink

I’ve got a double padding issue.

I am building a CSS template with classes outside of tables.

It displays fine in Firefox, but breaks in Explorer 7.

I am using a spacer to separate the three banners because when I used padding the changes were so drastic in Explorer.

So now using the spacers, it displays fine in Firefox, however even with the padding removed, it is bumping the 2nd banner below 20px instead of 10px.

Any suggestions.
cappelmans 5:30 am on September 27, 2008 Permalink

Problem solved! Thanks alot!
Mykal 10:55 pm on October 30, 2008 Permalink

This doesn’t work for me for some reason.
Lee 2:56 pm on January 21, 2009 Permalink

Thanks for posting!
denise 3:39 pm on February 3, 2009 Permalink

Thanks for this tip. Worked a treat!
Dmitry Pljonkin 3:42 pm on March 31, 2009 Permalink

Thanks fot tip, it was really helpful!

BTW. Dudes! Don’t forget about conditional comments :)

Sometimes applying this fix directly could mess your layout in modern browsers (for example when your “clearer” is not floated).
some guy 3:19 pm on August 3, 2009 Permalink

+1 from me. It really helped, thank you.
WEBRTV 8:34 am on September 11, 2009 Permalink

Thanks its work
Jonathan Mooney 3:29 pm on September 22, 2009 Permalink

Dude u are a complete star!!!
Optimizacion Web 8:58 pm on October 31, 2009 Permalink

okss, i’m searching it! thank you very much!
Farzan 12:45 am on November 21, 2009 Permalink

Thanks!

I had the problem with a padded which used to overlap with its preceding text.
Ypus 1:54 pm on December 1, 2009 Permalink

Thanks man, needed this very much!
Nacho Pascual 6:27 am on December 9, 2009 Permalink

Have you tried:
height:1%;

in your double padded element?
;D
Nacho Pascual 6:32 am on December 9, 2009 Permalink

gl http://www.webtoolkit.info/css-clearfix.html