Applying CSS from Screen to Print to Handheld – Part 5: Cross-Browser Compatibility

Understanding Internet Explorer Conditional Comments

Conditional comments (CCs) are really just another hack. They are not a part of the CSS standards. As with all CSS, however, it seems that you need to hack something to achieve cross-browser compatibility—frustrating.

There are several ways to go about implementing CCs to feed specific rules to specific versions of Internet Explorer. You can provide a specific style sheet for each version by using a CC for each version to which you want to pass specific values. I won't go down that road unless it becomes absolutely necessary. At the moment I favor the technique of testing for IE6 and older versions of Internet Explorer in one single CC and then filtering the values I provide to each version from within the one style sheet. Other people will no doubt disagree and prefer instead to provide a separate style sheet for each version that needs it. The choice is yours.

The conditional comment that tests for versions of IE 6 or older appears below:

<!--[if lte IE 6]>
<link href="CssFiles/IE.css" rel="stylesheet" type="text/css" media="screen" />  
<![endif]-->

(I covered conditional comments in greater depth in the section "Change and Flux" in Part 1.)

By testing for these versions of Internet Explorer and using the appropriate conditional comment, you can push an IE-only style sheet to Internet Explorer. It is here that you will apply your fixes for the float drop and navigation buttons.

The placement of the IE-only CSS file is important; you should place it below the link to the main style sheet. To add this code into your health.html file, complete the following steps:

1. Copy the code from the preceding listing.
2. Open your health.html file in Code view.
3. Paste the code you copied immediately below the link to your health.css file.
4. Save your work.

Your code should look like the following:

<link href="CSSFiles/health.css" rel="stylesheet" type="text/css" media="screen" />  
<!--[if lte IE 6]>
<link href="CssFiles/IE.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Now that you have linked to your IE.css file, you might as well actually create it! To create the new CSS file, complete the following steps:

1. Choose File > New from the main menu.
2. Select the General tab.
3. Select the Basic Page option from the Category column.
4. Select CSS from the Basic Page column.
5. Click Create to load your empty CSS file into Dreamweaver.
6. Save the document.
7. Navigate to your CSSFiles folder.
8. Save the document as IE.css.

You should now be looking at your blank, but saved, IE.css file.

Correcting the Alignment Issue

Your first task is to correct the alignment issues in Internet Explorer 5.x. You will then make the navigation buttons clickable across their whole width.

• View the movie: Fixing Internet Explorer 5.x

Complete the following steps:

1. Type body { and press Enter.
2. Type text-align: center; and press Enter.
3. Type } and press Enter twice.
4. Type #wrapper { and press Enter.
5. Type text-align: left; and press Enter.
6. Type } and press Enter twice.
7. Type #leftcol li a { and press Enter.
8. Type height: 1%; and press Enter.
9. Type } and press Enter twice.
10. Type #content { and press Enter.
11. Type width: 475px; and press Enter.
12. Type w\idth: 480px; and press Enter. (IE 5.x ignores the property width with the escape character "\".)
13. Type } and press Enter twice.
14. Type #rightcol { and press Enter.
15. Type width: 137px; and press Enter.
16. Type w\idth: 139px; and press Enter.
17. Type }
18. Save your work.

That completes the work in the IE.css file.

The height of 1% on the a element is known as the "Holly hack." It was first used by Holly Bergevin who is a partner at CommunityMX.

Check the design again in Internet Explorer to see how you stand (see Figure 4). I have highlighted a section in red where the header image doesn't quite fill the div. If you look carefully you will see a gap between the bottom of the image and the start of the border. This is a strange anomaly of Internet Explorer; it likes to have a font size defined for a div even if it contains no real text. Obviously there is no need for this workaround if you do have text in your header.

Figure 4. Slight problem with the header image

Let's fix this now. Open IE.css in Dreamweaver and complete the following steps:

1. Type #header { and press Enter.
2. Type and press Enter.
3. Type }
4. Save your work.

Previewing the page in Internet Explorer shows that this has fixed the problem (see Figure 5).

Figure 5. The great disappearing gap

Previewing the page in all versions of Internet Explorer now reveals that this design is good to go. There is one slight oddity in IE 5.01 where the link height doesn't quite fill the li element but it is clickable along its width and height.

By the way, I get a clean bill of health in all Mac OS browsers (see Figure 6). This tells you that your design is really ready for prime time!

Figure 6. Same design shown in a variety of Mac OS browsers

The next two remaining elements to add to the design don't affect the site's structure. First you add a floated image to the top section of the main content area, and then you add a skip-navigation link for accessibility reasons.

Page 3 of 5

Previous Page

Next Page