Notice how the initial color value set to the <LI> tag is olive, but this is overruled by the following statement, which says that any <LI> tag associated with an ordered list (<OL>) should be displayed in navy. This very specific CSS statement overrules the previous one. In turn, the next statement associates the color yellow whenever an <LI> tag is contained within an unorderedlisting (<UL>).

But okay, let’s make this demo work in IE. Changes to the code have been boldfaced in the following example. All we are doing is inserting one image for IE (a JPG), and then replacing that image for Firefox, Opera, and Safari. As always, we’re using the child-combinator selector to do this.

You can go to another level of specificity when you reference a CSS statement using either a CLASS or ID statement in the code; in each of the two cases presented in this Web page, these values carry more weight than the default value specified. The two .ORDER CSS statements are a case where there are two identical CSS statements with the same weight. In thiscase, the latter of the two (“COLOR: BLACK;”) is what should be applied by the browser.The final example is somewhat tricky, and its background needs to be explained.

IE gets rather short shrift here. Not only does it not interpret :hover on divs, but it also doesn’t handle semi-transparent PNGs. As a consequence, we’ve blocked it from implementing any of these changes by using the child selector, as described earlier here.

It should be noted that this is the only place where Internet Explorer 5.0 has problems, and it is easy enough to remedy as long as you can keep track of any CSS code being applied through external style sheets. Netscape 4.6handles this code very poorly. When you are planning on writing CSS codethat relies upon a number of cascading elements, your best bet at this point is
to try to ensure that you have as few CSS conflicts as possible. Otherwise, if you run into troubles, it may be difficult to predict exactly which CSS elements will be overridden.

There are certainly instances where you could use an IE-friendly version of this technique. You could use a regular JPG, instead of a PNG. (You wouldn’t get the drop shadow, but that’s not always a bad thing.) As long as your original image sat inside a link then the rollover would work as well (in a limited way).

You may be thinking, “Stop showing me demos that don’t work in IE!” However, what you should be taking away from this is an idea of what’s possible with today’s best browsers. Once you realize what’s possible, you can start to adjust these demos until you reach a happy balance — a balance between CSS and cross-browser functionality; between lean, mean XHTML, and making the site work on your client’s machine.