Jun 07
I.E. Doubled Float-Margin Bug
2004 at 04.05 am posted by Veerle
Maybe some of you are familiar with this I.E. bug, but I wasn’t until recently. While working on a project and going out of my mind wondering why my margin on the left had this huge gap, I started to search the web for some solution. Since I did all sorts of tricks with it, I was almost 100% sure that it must be another I.E. bug that I didn’t know of. I’m still learning since I started with CSS2 just in January of this year…
It seems that I got it right, you can't use both float: left; and margin-left in the same selector in I.E. This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box.
- You get a pretty good explanation to this bug on this page.
- The standard work around for the bug is to wrap an additional div around the floated div, apply the float to the wrapper and remove the float on the interior div. Click here for more explanation.
- Click here for an overview of all known I.E. bugs.
It surprises me that I bumped into this bug just right now since I'm using CSS 2 for a few months now. I thought I encountered them all... I.E. keeps on surprising ... in a bad way that is!
8served
1
MS Engineers should be hung from a flag-pole by their feet and flogged to within a pixel of their miserablle lives… and this is their legacy after wiping out Netscape? Shame Shame
2
If you want a semantic workaround (ie, not adding mark-up to your XHTML file) you can use any one of the selector methods that IE doesn’t understand.
My solution is to do the following:
1) create a CSS rule that has half the margin you want (expecting Explorer will double it).
$foo {margin: .5em;}
2) immediately after, create a child-selector rule that has the correct margin. I usually use something like:
body>$foo {
margin: 1em;
}
where $foo is the name of your rule.
This is a far better solution than nesting DIVs
3
CM Harrington, thanks for the tip!
@fred not sure if you’re a designer, but maybe today we can give MS a very tiny break… if you read my article of today :-) Although I fully understand your frustration about the whole I.E. issue, I could strangle MS too sometimes :-S
4
Not a problem! I am glad I could help. I have found that this is the easiest way to “beat” IE into submission. I’ve used it on many of my client’s sites to great success.
Cheers!
5
Thank you for the IE bugs list. I have a bug too, the IE justify bug. Let’s see if it is there, so I can solve the bugger :-).
The justify bug makes IE stretch a css box, when changed to left/right the css box in IE displays normally.
6
I ran into this problem too. But I got a good tip from one of the great sites ... dont remember if it was PIE or A List Apart (should have noted the URL in my comment; doh!).
But the double margin is fixed by CSS (not HTML divs), which is good news. The double margin fix is a byproduct of yet another bug fix (I /really/ wish I’d noted the URL now cuz I cant remember the other bug).
Long story short, just display inline and the bug disappears. No additional markup or maring of your code. I have a narrow/wide setup like your blog and this CSS code fixed it for me:
div#narrow {
/* Contains the left narrow column */
...snip…
float: left;
margin-left: 3.33%;
/* Fix IE’s doubled margin: */
display: inline;
}
That’s it. I still get the right look. I still get the float. I still like the results. Only the unruly margin is gone.
The comment to /allow/ IE to double your margins and apply good CSS to other compliant browsers is not a good solution IMO. It feels like a bigger hack than this, and it creates a dependency on the bug ... but what if IE fixes it? What if Longhorn or IE7 or whatever fixes it? Then all your pages will suddenly look amateurish at best.
This just in ... from http://positioniseverything.net/explorer/doubled-margin.html : At Last, A Fix!
This fix was found accedentally for another indent problem, but fixes double margins at the same time ... most cool.
7
@Anon: Thanks for the link, since this is from a while ago I already discovered that link also ;-)
8
The best way to avoid this bug is to set the “display” property of the respective element to “inline”. Since the element is floating you can still assign padding, width etc.