» 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

15 Responses

You can follow the comments for this article with the RSS 2.0 feed.

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.

1 Andrew April 08, 2007 11:50 am

Great fix, thanks.

2 Mick Byrne April 25, 2007 6:11 pm

Thanks - made my day.

3 JÃ¶rg Butzer May 10, 2007 9:28 am

This fixed my problem. Thanks for the input!

4 Jared November 21, 2007 3:11 pm

You’re a genius! Thank you for documenting this.

5 Vicky February 22, 2008 5:27 am

Thanks for the helpful tip!

6 PatrickB February 26, 2008 6:51 pm

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…

7 Erick S. March 20, 2008 12:49 pm

Thanks for this! This fix also works with a rare double margin bug in IE7 and also in IE6!

8 Juani March 25, 2008 11:31 am

[...] Specify the <div> as “display: inline-block” (credit) [...]

9 IE7 CSS Bug: Adding ‘padding-top’ Value Twice at chriskarcher.net April 02, 2008 7:09 am

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.

10 Pushtoon April 22, 2008 7:36 am

Thanks, worked for me. I can’t believe we now have to support two incredibly buggy browsers, and soon to be three!

11 Ian May 19, 2008 3:56 pm

You are a star, thanks so much for this!!

12 Julia May 30, 2008 1:55 am

Thanks, for that one. Bizarre though. Inernet Explorer really is a mystery…

13 barry May 31, 2008 4:17 pm

Bravo…thanks for the (nonsensical but functional) fix, which I will be using. Maybe IE8 will see this repaired (fingers crossed).

14 hotshot309 June 07, 2008 12:52 am

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.

15 iHATEsushi June 10, 2008 6:26 am

cafefrenzy.com

CSS Double padding IE7 Fix

15 Responses

Leave a Reply

Most Recent Post

Recent Posts

Archives

Categories