| Even with the introduction of Microsoft Internet Explorer 7 in 2006, the most popular Web browser brand has a lot of shortcomings when it comes to Cascading Style Sheets. Most of these will become obvious as you look at the compatibility charts in Chapters 2 through 10, but generally will not detract from your designs. However, some of the problems, such as the box-model issue discussed in Chapter 6, are far more pervasive and harder to ignore. Sometimes called the IE factor, these limitations are the bane of Web designers who not only want to stay standards-compliant but also refuse to ignore a large portion of the Web public who use Mozilla Firefox, Apple Safari, Opera, and other browsers. For years Web designers struggled with these issues, developing a number of hacks to address them. However, there was always a simple solution, and it has been built into Internet Explorer since version 5.0: conditional comments. Internet Explorer (and only Internet Explorer) has the ability to interpret conditional statements that are ignored by other browsers but allow you to insert links to style sheets that can tailor your CSS for that browser, even down to individual versions. In this example (Figures 2.57 and 2.58), a default style sheet is loaded and used by all browsers (even Internet Explorer), which will hide the layer called IEMessage. However, Internet Explorer will also use a style sheet that will display the ID layer IEMessage, which displays a message inviting Microsoft Internet Explorer users to download the most recent version of their browser. Figure 2.57. In Firefox, no message is displayed. 
Figure 2.58. In Internet Explorer (any version), the message is displayed. 
To set up styles using conditional comments: 1. | Set up separate external style sheets for your default styles and save as default.css (Code 2.33). For your styles used only in Internet Explorer, save as ie.css (Code 2.34), as explained earlier in this chapter in "Adding CSS to a Web Site."
Code 2.33. default.css: This style sheet will be used in all browsers. /* Default CSS used in all browsers */ body { font-size: 1em; font-family: Georgia, 'Times New Roman', times, serif; color: #000000; margin: 8px; background: white url(alice23.gif) no-repeat; } h1 { font:small-caps bold italic 2.5em Georgia, 'Times New Roman', times, serif; } h2 { color:#999; } #content { position: relative; top: 190px; left: 165px; width: 480px; } #content #copy { line-height: 1.5; } #IEMessage { display: none; } p.authorName { margin: 8px 0px; font: bold 1em Arial, Helvetica, sans-serif; } h2 .chapterName { display: block; margin-bottom: 8px; font-size: smaller; color:black; } p.dropCap:first-letter { font: 300%/100% serif; color: #999999; }
|
Code 2.34. ie.css: These styles are used only if the visitor is using Internet Explorer. /* Styles used for Internet Explorer */ #IEMessage { display: block; margin: 8px; border: 2px dotted red; padding: 4px; width: 480px; } #IEMessage h2 { color:#f00; }
|
| | | 2. | <link rel="style sheet" href="default.css" type="text/css" media="all" />
Begin by linking to or importing your default style sheet for this page, and any other style sheets used to create this page index.html (Code 2.35). To ensure the cascade order works for this trick, all other CSS must come first.
Code 2.35. index.html: The page links to default.css (Code 2.33) and then will link to ie.css (Code 2.34) only if the browser in which it is displayed is some version of Internet Explorer. | 3. | <!--[if IE]>
Within an HTML comment, use an if statement within square brackets and specify which version of Internet Explorer the linked CSS file should be used with. Using just IE will cause the CSS to be used in any version of Internet Explorer. Adding a space and then a number after that will specify the version number. For example, IE 6 allows CSS to be used only in Internet Explorer version 6. Use a closing chevron (>) at the end of the line.
| | | 4. | <link rel="style sheet" href="ie.css" type="text/css" media="all" />
Add the link to your external style sheet that has been specifically set up for the version(s) of Internet Explorer you specified in Step 2. In addition to linking, you can also embed CSS directly into this area, as discussed earlier in this chapter in "Adding Styles to a Web Page."
| 5. | <![endif]-->
Close your conditional comment with an endif in square brackets, and then close the HTML comment.
|
 Tip
In this example, I used the conditional styles to turn a layer on and off, depending on whether the browser is Internet Explorer. You could also tailor messages for different versions by adding the version number: <!--[if IE 7]>...<![endif]--> <!--[if IE 6]>...<![endif]--> <!--[if IE 5.5]>...<![endif]--> <!--[if IE 5.0]>...<![endif]--> <!--[if IE 4.0]>...<![endif]-->
For more details on conditional statements in Internet Explorer, check out msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp |
xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Using Conditional Styles to Fix CSS In Internet Explorer</ 