CSS: The Missing Manual

Handling Internet Explorer Bugs

The Windows version of Internet Explorer has a long history of CSS bugs, especially (and unfortunately) when it comes to float-based layouts. These bugs can affect the placement of floats and the overall width allotted to floated elements. If you're lucky, you may just get a slightly annoying difference in how your Web page looks in Internet Explorer versus other browsers. At worst, these bugs can cause significant display problems like the float drops discussed in the previous section. This section tells you the most common problems and how to get around them.

Tip

When a floated element has padding or a border, it appears thinner in IE 5 than in other browsers. There's more detail on this IE 5 bug—and its solution—in Section 7.5.3.

Double-Margin Bug

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 float—a 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 ...