CSS: The Missing Manual

Managing Internet Explorer Hacks

Browsers don't always behave the way you, or the rules of CSS, expect. Browsers like Safari, Firefox, and Internet Explorer 7 handle CSS quite well and display CSS-based Web pages consistently and predictably. Getting your designs to work in Internet Explorer 5 and 6 for Windows is much more of a challenge. Although these browsers are old by today's standards, they still make up the majority of Web browsers in use.

Throughout this book, you've seen some of the most horrific IE 5 and 6 bugs— and their solutions. There's the double-margin bug (Section 11.1) and IE 5's box model problem (Section 7.5.3). Techniques for managing these problems include the * html hack (Section 7.6). But knowing the techniques isn't enough. You've got to consider your entire Web audience and make sure your IE fixes don't get in the way and spoil the fun for other viewers.

Tip

You can find a list of pages describing various CSS bugs in many different browsers at http://css-discuss.incutio.com/?page=BrowserBugs.

Design for Contemporary Browsers First

Because Internet Explorer 6 is so common, many Web designers use it for testing their site design. When they find a problem with the way the page looks in this browser, they manipulate their CSS until the page looks fine. Unfortunately, because IE 6 doesn't always get CSS right, the "solutions" designers use for that browser cause more modern, CSS-savvy browsers like Firefox and Safari to display pages incorrectly.

The backward-looking ...