Browsers don't always behave the way you, or the rules of CSS, expect. Browsers like Safari, Firefox, and Internet Explorer 8 handle CSS quite well and display CSS-based web pages consistently and predictably. Getting your designs to work in Internet Explorer 6 and 7 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 Internet Explorer bugs—and their solutions. There's the double-margin bug (Anatomy of a Style) and IE 5's box model problem (Controlling the Tap with the Overflow Property). Techniques for managing these problems include the * html hack (Wrap Content with Floating Elements). 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.
Because Internet Explorer 6 and 7 are still very common, many web designers use one of those browsers 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 and 7 don't always get CSS right, the "solutions" designers use for that browser cause more modern, CSS-savvy browsers like IE 8, Firefox, and Safari to display pages incorrectly.
The backward-looking approach of designing for Internet Explorer 6 or 7 would be fine if everyone visits your site on Windows with Internet Explorer 6 or 7 for the rest of eternity. But as more people upgrade to Internet Explorer 8 or switch to state-of-the-art browsers like Firefox or Safari, your fine-tuned IE 6 pages will begin to break. A better approach is to design with Internet Explorer 8, Firefox, Safari, or Chrome in mind. Make sure your CSS works in those browsers, and you can be reasonably confident that you're using CSS correctly. Then, after your site looks great in those browsers, it's time to fix the problems that crop up in Internet Explorer 7 and 6.
Tackling all those problems may sound like an overwhelming task, but take heart. You'll repeatedly encounter the same set of bugs, which in turn require the same set of fixes. So once you become an old hand at identifying and fixing the peek-a-boo bug or the double-margin bug, it won't be hard for you to add the necessary hacks to fix your pages for older versions of Internet Explorer.
Note
For more terrifying information on how Internet Explorer can mangle your carefully designed web pages visit www.positioniseverything.net/explorer.html and www.positioniseverything.net/ie-primer.html.
The * html hack in Chapter 7 (Wrap Content with Floating Elements) is one way to send the "this'll fix your stupid bug" styles to just Internet Explorer 6 and earlier without adversely affecting other browsers. But as your style sheets get larger, all those little fixes start to create clutter. Even if you isolate those changes into one part of your style sheet, you may still end up inserting some invalid CSS code (like zoom: 1) that prevents your main CSS file from validating.
Another way to collect IE-only styles in a single place is to use Internet Explorer's conditional comments feature (Figure 15-8). This Microsoft invention provides a way of inserting HTML that only Internet Explorer understands. Other browsers simply see the code as an HTML comment and ignore it.
Conditional comments can even target different versions of IE. You can put all of your IE 6–only styles in a single external style sheet (like IE6_styles.css) and use a conditional comment to link it to IE 6 browsers only. This approach also makes it a snap to eliminate those styles when IE 6 finally goes the way of the dinosaurs. Just remove the external style sheet. Your non-IE visitors will benefit too. When you use conditional comments, other browsers don't download those external style sheets at all. As a result, your site opens and runs faster for these lucky folks.
Figure 15-8. With Internet Explorer's conditional comments feature, you can apply IE-specific style sheets full of your IE hacks. Conditional comments let you have some HTML appear only in a particular version of Internet Explorer (left). Other browsers simply ignore the HTML inside the comment (right).
Here's the basic structure of a conditional comment:
<!--[if IE]> Some HTML code that only applies to IE goes here. <![endif]-->
The <!--[if IE]> is the condition itself. It translates to: "If this browser is Internet Explorer, then process the following HTML." So any Internet Explorer browser acts on the HTML that comes after this line of code and stops when it gets to the <![endif]--> statement. In this way, you can add any HTML—text, images, styles, and even links to external style sheets—to Internet Explorer only.
Internet Explorer 8 understands CSS much better than earlier versions, so you may have to hide some IE hacks from that browser as well. Fortunately, conditional comments also let you specify which version of Internet Explorer the style sheet applies to. Say you want to have a particular style sheet load only for Internet Explorer 6 or earlier. Add the following conditional comment to your web page's head:
<!--[if lte IE 6]> <link href="IE_styles.css" rel="stylesheet" type="text/css" /> <![endif]-->
Or, using the @import method:
<!--[if lte IE 6]> <style type="text/css"> @import url(IE_styles.css) </style> <![endif]-->
The lte stands for "less than or equal to," so if lte IE 6 means "if this browser is version 6 or earlier of Internet Explorer."
Use whatever method you prefer for linking an external style sheet (Linking a Style Sheet Using HTML), but add any conditional comments after any other linked style sheets. Most IE hacks tend to redefine styles already present in the style sheet—styles that work for other browsers. And, due to the nature of the cascade, rules defined later in a page can override earlier defined styles. To make sure your redefined IE-only styles successfully take hold in Internet Explorer, they should appear after any other style sheets attached to the page.
Here's the code you might use to link: a) a style sheet for all browsers, b) a style sheet just for IE 7, and c) a style sheet for version 6 or earlier of IE:
<link href="global_styles.css" rel="stylesheet" type="text/css" /> <!--[if IE 7]> <link href="IE7_styles.css" rel="stylesheet" type="text/css" /> <![endif]--> <!--[if lte IE 6]> <link href="IE6_styles.css" rel="stylesheet" type="text/css" /> <![endif]-->
Note
For more information on Internet Explorer's conditional comments, visit the source: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx.