Tuesday, March 20, 2007

The IE Doubled Float-Margin Bug

The Old IE “Doubletake”

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.

”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:

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’.

Same as ‘left’, but content flows on the left side of the box, starting at the top.

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.

floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;

Thanks to http://www.positioniseverything.net/explorer/doubled-margin.html

No comments: