What Goes Wrong
A coder innocently places a left float into a container box, and uses a left margin on the float to push it away from the left side of the container. Seems pretty simple, right? Well it is until it’s viewed in Explorer for Windows. In that browser the left float margin has mysteriously been doubled in length!
The Way It Oughta Be
The graphic below shows a simple div (tan box) containing a left-floated div (green box) . The float has a left margin of “100px”, producing a 100px gap between the left edge of the container box and the left edge of the float box. So far so good.
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px <span><font color="#dd0000">100px</font></span>;
/*This last value applies the 100px left margin */
}
The Old IE “Doubletake”
That exact same code when viewed in IE/Win is displayed in a slightly different way. The graphic below shows what IE/Win does to the arrangement.
Why is this happening? Don’t ask such silly questions! This is IE, remember? Conformance with the specs is only to be hoped for, not expected. The simple fact is it does happen.
Important Points
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. Any following floats with a similar margin won’t show the doubled margin. Only the first float in any given float row will suffer from the bug. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left.
At Last, A Fix!
Up ’til now (Jan ’04) this bug was thought to be unfixable, and was generally controlled by replacing the faulty margin with a left padding on a non-visible float, along with a nested inner box to serve as the visible box within the invisible float, or by hacking a one-half margin value for IE/win only. It works, but is clunky and messes up the clean source code. Well that’s all over now.
Steve Clason has discovered a fix, outlined in his Guest Demo, that fixes both this doubled margin bug and a weird text indent bug as well. It’s a classic type of IE bug fix, using one property to cure a bug that affects an unrelated property.
So What Is It Already?
Dig this. Simply placing {display: inline;} on the float is all that is needed! Yup. Sounds too easy, don’t it? Nevertheless it’s true that a mere display declaration of “inline” is enough to do the job.
Those who are familiar with the specs on floats are aware that floats automatically become “block” elements, no matter what they were before becoming floats. As Steve points out from the W3C:
9.5.1 Positioning the float: the ‘float’ property
“This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.
right
Same as ‘left’, but content flows on the left side of the box, starting at the top.
none
The box is not floated. ”
That means that {display: inline;} on a float should be ignored, and indeed all browsers show no changes in the float when this is done, including IE. But, this does somehow trigger IE to stop doubling the float’s margin. Thus, this fix can be applied straight, without any fussy hiding methods. If a future browser decides to hiccup upon seeing this fix, just enclose the fix in an “IE only” Tan hack as detailed in the IE Three Pixel Text-Jog Demo.
Below are two live demos using the same code as previously, first displaying the IE bug as usual, and next the same demo with the “inline” fix applied to the float.
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
<span><font color="#dd0000">display: inline;</font></span>
}
Serendipity
You may notice that this bug fix idea is duplicated at the bottom of Steve’s demo page. Y’see, at the beginning of this episode Steve noticed the IE text indent bug and found the “inline” fix for it. He brought it to my (Big John’s) attention and since this was a cool bug with a fix, I then asked Steve to write it up as a “Guest Demo” for PIE. During the course of preparing the demo, Steve discovered that the fix also works to cure the Doubled Margin Bug, a much more common problem. Steve is a busy guy, and he asked me to write this “in depth” demo page to cover the fix while explaining the bug itself more completely.
I started the Guest Demo “program” primarily for encouraging others to focus their attentions on the various CSS display difficulties (and to avoid so much hard work for myself).
Well! Ah reckon it’s working accordin’ to plan. Way to go, Steve! 🙂
Holly ‘n John Contact Holly Contact John ©positioniseverything
Last updated: January 19, 2004
Created January 19, 2004