Double-Margin Bug[z]

Internet Explorer 6 and earlier sometimes doubles the size of a margin you've applied to a floated element. The problem occurs only when the margin's in the same direction as the floata left margin on a left-floated element or a right margin on a right-floated element. In Figure 11-15, there's a left-floated sidebar holding the site's navigation. To add a bit of space between it and the left edge of the browser window, the sidebar has a left margin of 10 pixels.

 

Figure 11-15. A 10-pixel left margin applied to a left-floated element should, in theory anyway, indent the float 10 pixels from the left edge of the page. Firefox (above) gets it right. But IE 6 (bottom) incorrectly doubles that margin. By adding 20 pixels to the left edge of the sidebar, IE 6 significantly changes the page's appearance.

 

Most browsers, including Internet Explorer 7, Safari, and Firefox (Figure 11-15, top) add the requested 10 pixels of space. However, Internet Explorer 6 (bottom) doubles that margin to 20 pixels. Even with relatively small margins like 10 pixels, the visual difference is significant. Furthermore, if the layout's very tight, with precisely measured floated elements sitting side by side, then the doubled margin can easily trigger a float drop (Section 11.1.1).

---

Note: This margin doubling happens only when the element's margin touches the edge of its containing block, so when an element is floated left against another left-floated element, its left margin won't double.

---

The solution's simple: Add display:inline; to the CSS style for the floated element:

	#sidebar {
	    float: left;
	    margin-left: 10px;
	    width: 160px;
	    display: inline;
	}

In this case, the display property doesn't do anything except fix IE's bug. Floated elements are always block-level elements, and changing a style's display to inline won't alter that. (See Section 7.2.4 for more on the display property.) However, even though this added style declaration doesn't adversely affect any other browsers, you may want to put it in an IE-only style using the * html hack:

	#sidebar {
	     
float: left;
	    margin-left: 10px;
	    width: 160px;
	}
	* html #sidebar {
	    display: inline;
	}