Cross-browser CSS Development

Warning: Since you are using a browser which does not sufficiently support CSS, these pages will probably not look correct.

1: First Attempt | 2: IE/Win-Only Position | 3: Opera relative Position | 4: Opera-Only Position | 5: Opera 5, Konqueror Position | 6: Change Colors

Using Cascading Style Sheets not only helps separate content and presentation, it holds the promise of standardizing how browsers display content. Unfortunately, they're not quite there at this time.

While this case study is not a tutorial for using CSS, it shows the steps used to create a cross-browser toolbar such as on the UW Home Page and the content pages to which it links. The end result is:

 Search | Directories | Reference Tools

For display purposes in this case study, the toolbar is narrowed down from the sides of this document; in the real pages, it is full-width. Also, images showing how the toolbar appears with different browsers are included in this case study. As a reference, an image of the final toolbar's appearance is:

This case study was developed with the following browsers in mind:

Note that Netscape 4 and earlier are not covered, since they will not properly render the borders. Other browsers not on the list may or may not render correctly, but this page will be updated when changes have been made to the CSS markup to make the menus work.

These pages were also designed with CSS-compliant browsers in mind; they don't look very good on older browsers (such as Netscape 4).

HTML and Text CSS

The first thing to note is that all of our pages will be declared as XHTML/Transitional. Some browsers have compatibility modes so they render the same as older browsers, rather than how the standards say they should. However, by declaring an XHTML document type, these browsers convert to standards mode.

The HTML for the toolbar is minimal:

<div id="toolbar">
    &nbsp;<span class="l1text"><a href="/home/search.html">Search</a> |
    <a href="/home/directories.html">Directories</a> |
    <a href="http://www.lib.washington.edu/research/reftools.html">Reference
    Tools</a></span></div>

As you can see, the whole toolbar is wrapped in a div, and the text is wrapped in a span which sets the class for the text. The &nbsp; is to ensure there's at least one character in the toolbar which is not in the span.

The l1text class is declared as:

.l1text {
    font-size: 90%;
    font-family: Arial, Helvetica, Geneva, sans-serif
}
.l1text a:link {
    text-decoration: none
}
.l1text a:visited {
    text-decoration: none
}

With that in mind, we begin with our first attempt.

Resources