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

Striving for Cross-Browser Compatibility

What is cross-browser compatibility? Making a design cross-browser compatible means checking it in many browsers on a variety of systems to make sure that it looks the way you want in each and every case. Of course, some browsers are just not capable of rendering a CSS-based layout correctly. With that in mind, your target browsers for compatibility will be "version 5" browsers and later.

To govern where your design sits at the moment in the cross-browser compatibility stakes, you will need to preview it in your target browsers. I have several browsers installed on my system for just this purpose. This is what I have installed on my Windows XP machine:

• Firefox 1.0.7
• Internet Explorer 6
• Internet Explorer 5.5
• Internet Explorer 5.01
• Opera 8.01
• Netscape 8.01
• Netscape 7.2

I check each of my designs in all of these browsers. I also have my completed designs checked on the Mac OS platform and the various browsers that are available there. It is a good idea to "buddy up" with a fellow developer who uses an operating system that you don't have. The feedback you can get and provide to and from your buddy can be priceless.

Figure 1 shows a screen capture of each browser on my system. Each shows the "state of the play" with the design in that particular browser. There are a couple of problems with the usual suspects—Internet Explorer 5.5 and 5.01. The design seems to be good-to-go on the other browsers.

Figure 1. Same design shown in a variety of Windows browsers

If you look carefully at the designs in Internet Explorer 5.5 and 5.01, you will see that there are a couple of problems with the page's appearance. Internet Explorer 5.01 has a further problem that isn't apparent in Figure 1, so I have highlighted this problem in Figure 2: While both IE 5.01 and 5.5 display the drop (extra white space) in the header, only IE 5.01 displays a navigation problem. Notice the extra spacing in the third link. Additionally, both of these browsers show the design left-aligned, while you want the design centered.

Figure 2. Navigation link problem (extra space in the third link) in Internet Explorer 5.01

Another problem that exists in all versions of Internet Explorer is that the navigation buttons are not clickable when your mouse strays away from the link text. This is something I will show you how to fix in a short while.

Begin with correcting the navigation in Internet Explorer 5.01. This is a common problem that you might run up against. This odd appearance is caused by spaces in your list elements:

<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>

You see the spaces in the listing, right? It's OK if you don't; they aren't obvious. The spaces that are causing Internet Explorer 5.01 so much grief appear between the opening and closing li tags. It's not really anything that you'd notice in Code view.

Not to worry. There are two easy fixes:

• Put all your li elements on the same line and ensure that the opening li tags abut the preceding closing li tag
• Make your li elements "ugly" by moving the closing tag's end bracket to the next line and ensuring that the next opening li tag is right next to it

I prefer the second option. The first option makes the code harder to work with because I have to scroll horizontally in Code view to access the latter elements in the navigation system. By using the second option, I can keep my li elements vertical and thereby keep them all accessible without scrolling should I need to make any changes:

<ul><li><a href="#">Link One</a></li
><li><a href="#">Link Two</a></li
><li><a href="#">Link Three</a></li
><li><a href="#">Link Four</a></li
></ul>

If you look carefully at Figure 3 you will notice that the heading "Welcome to Health & Spa" aligns immediately to the bottom of the floated leftcol div. This section is indicated by the end of your navigation list. This isn't a coincidence. If you add a fifth link to the navigation, you will find that the start of the content area drops below that link and continues to move down the page every time you add a new link to the navigation.

Figure 3. Problem fixed by the "ugly" method

This problem is known as a "float drop"; both Internet Explorer 5.5 and 5.01 believe that there isn't enough room for the content div to sit correctly so it is dropped down below the floated content to allow it to appear properly. To correct this problem, you need to give IE 5.x a different width value for the content div. The trick is to do this without affecting the browsers that already display the page correctly. In the past, this is something that I would have done from within a single style sheet. That could be problematic with the forthcoming release of Internet Explorer 7, however, so a different technique is required. Enter conditional comments.

Page 2 of 5

Previous Page

Next Page