IE Double Padding Bug
Published Wednesday, June 13, 2007 in CSS
Couldn't find anything about this on Google but there seems there's not only a double margin bug in IE but also a double padding bug.
I haven't been able to recreate the bug (although haven't tried much) but it seems to occur when an element is used to clear other elements. Then the clearing element will get double padding-top.
I've experienced this a few times but, as i said, never found any information about it.
Perhaps someone reading this knows more about it? What exactly triggers the bug and if there's a fix (part from simply reducing padding by 50% in IE).
I'll try to recreate the bug and post a demo-page.
Update
IE8 fixes this.
From: http://msdn.microsoft.com/sv-se/library/cc304082(en-us,VS.85).aspx (emphasis mine)
Floats
Many changes have been made to float behaviors, fixing many of the most troubling float issues encountered with prior versions of Internet Explorer, including those caused by the requirement of the hasLayout property. The hasLayout functionality has been removed in Internet Explorer 8. The following are some of the issues fixed:
- Cleared elements don't clear other nested floats when they don't share a parent.
- Cleared elements after floats have doubled top padding.
Comments
9 comments so far, why don't you post one too?
Tuesday, September 04, 2007 | View all comments by Pelle
Yes, very annoying bug. Read that it can be solved by setting display: inline, but apparently it has to be floated or something then. My paragraphs isn't floated sitewide and I can't remove the clear sitewide either so perhaps I'll just have to add a IE 7 specific rule...
It's quite annoying that Microsoft when they upgrade their browser and fixes many bugs succeeds in introducing just as many. But perhaps one should expect such form a company like that? Makes me never want to buy something from them ever again...
Thursday, December 20, 2007
I too tried the display:inline tactic to no avail. I found the solution I needed here: http://www.brunildo.org/test/IEClearPadding.html
Friday, December 21, 2007 | View all comments by Andreas
Nice, I couldn't find any information about this bug at all when I wrote this. I've run into it a couple of times since tho, but just gone _pagging-top: half;
Sunday, February 10, 2008 | View all comments by Videlin
I had the same problem with floating two "dd" elements and then applying clear to last "dd". Unfortunately when I applied some of the CSS hacks "like zoom: 1; _height: 0;" or setting "display: inline-block;" the entire "definition list" is missing. So I try removing the clear and setting width to 100% and in my case works perfectly in IE. The only thing is that you have to use "Conditional Comments" or "*:first-child+html" hack the serve the code only to IE7. All IE 7 hacks are explained here http://www.webdevout.net/css-hacks.
Friday, April 04, 2008
I think i had same problem. I solved that using holy hack.
Wednesday, July 16, 2008
I had the same problem, so I simply got rid of the clear:both and replaced it with a br tag with clear="all" and it works.
Not the most elegant solution, but not too sloppy either (imo) and it worked for me.
Thursday, July 24, 2008 | View all comments by Giovanni Silva
To fix, just add display: inline-block to the element. Take care!
Thursday, December 18, 2008 | View all comments by Josh
Also, overflow: auto; seems to fix this without the hassles of display: inline;
Friday, February 27, 2009
I fixed this problem in IE6 by giving the clear'ed child element an explicit width.