Section 14.5. Managing Internet Explorer Hacks | Dreamweaver CS3: The Missing Manual

14.5. 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.

14.5.1. 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 approach of designing for Internet Explorer 6 would be fine if everyone visits your site on Windows with Internet Explorer 6 for the rest of eternity. But as more people upgrade to Internet Explorer 7 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 7, Firefox, and Safari 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 5 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 IE 5 and 6.

Tip: 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.

14.5.2. Isolate CSS for IE with Conditional Comments

The * html hack in Chapter 7 (Section 7.6) 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 (as described in step 8 in Section 8.6.3), you may still end up inserting some invalid CSS code (like zoom: 1 ) that prevents your main CSS file from validating (Section 2.4.1).

Another way to collect IE-only styles in a single place is to use Internet Explorer's conditional comments feature (Figure 14-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.

Figure 14-8. With Internet Explorer's conditional comments feature, you can apply Internet Explorer-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).

Conditional comments can even target different versions of IE. You can put all of your IE-5 only styles in a single external style sheet (like IE5_styles.css ) and use a conditional comment to link it to IE 5 browsers only. This approach also makes it a snap to eliminate those styles when IE 5 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.

Here's the basic structure of a conditional comment:

 <!--[if IE]> Some HTML code that only applies to IE goes here. <![endif]-->

The  statement. In this way, you can add any HTMLtext, images, styles and even links to external style sheetsto Internet Explorer only.

Note: Non-IE-browsers simply view conditional statements as HTML comments and ignore them.

14.5.2.1. Conditional comments and IE 7

Internet Explorer 7 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."

14.5.2.2. Conditional comments and the cascade

Use whatever method you prefer for linking an external style sheet (Section 2.4), but add any conditional comments after any other linked style sheets. Most IE hacks tend to redefine styles already present in the style sheetstyles that work for other browsers. And, due to the nature of the cascade, rules defined later in a page can override earlier defined styles. In order 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 6, and c) a style sheet for version 5 or earlier of IE:

 <link href="global_styles.css" rel="stylesheet" type="text/css" /> <!--[if IE 6]> <link href="IE6_styles.css" rel="stylesheet" type="text/css" /> <![endif]--> <!--[if lte IE 5]> <link href="IE5_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/workshop/author/dhtml/overview/ccomment_ovw.asp.