Dreamweaver CS5: The Missing Manual

Handling Internet Explorer 6 Bugs

Internet Explorer 6 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 see just 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 previously. This section tells you how to get around IE 6’s most common problems.

Note

See the box on Should I Care About IE 6? to decide how much you should worry about Internet Explorer 6.

Double-Margin Bug

Internet Explorer 6 and earlier sometimes doubles the size of a margin you apply 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 10-9, you can see a left-floated sidebar holding the site’s navigation links. 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.

All other browsers, including Internet Explorer 7 and 8 (Figure 10-9, top) add the requested 10 pixels of space. However, Internet Explorer 6 (bottom) doubles that margin to 20 pixels. Even with relatively small margins, the visual difference in IE is significant. Furthermore, if the layout’s very tight, with precisely measured floated elements ...