HTML Tip:
New CSS Rules for IE 6

by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.

	January 2002 Vol. 5, No. 1  • Promotion Tip  • HTML Tip  • Accessibility Tip

A few issues ago, we showed that an innocent change to your DOCTYPE tag could dramatically change how Internet Explorer Version 6 renders your Cascading Style Sheets. Now let's learn how to write style sheets that work under IE 6.

As we explained in our previous story, Microsoft has made a serious effort to make the new version of Internet Explorer conform to the official HTML standards. With that in mind Microsoft created IE 6 with two different rendering engines: a "classic" engine that renders your page the way previous versions of IE did, and a new standards-complaint engine.

This new standards-complaint engine applies stricter rules to your styles sheets. Many minor errors that older versions of Internet Explorer forgave are now strictly forbidden.

For example, take a look at two pages on our test Web site. We've used Browser Photo to create a screen shot of each page as viewed with IE 6.

These pages are identical, except for one line of HTML code that tells IE 6 whether it should use the classic or the new rendering engine. Page 1 uses the classic rendering engine and displays the way we intended. Page 2 uses the standards-compliant engine, and doesn't render the page anything like we'd intended.

So just what rules did we violate on this Web page? We've made three mistakes that are expressly forbidden by the new rendering engine.

Hexadecimal Color Codes

First, if you use a hexadecimal RGB color code to assign colors to different parts of your page, you must now place a "#" character at the start of the code.

In our example page, we defined a background color for the whole page using this style rule:

BODY { background-color : FFCC66 }

This is no longer legal, and must now be written as follows:

BODY { background-color : #FFCC66 }

This one minor difference causes the new engine to throw out our BODY style and render the page with a white background.

Font-size Definition

Second, Internet Explorer no longer allows white space in font-size definitions. In our example page, we used this style rule to set all paragraph text to a 12 pixel font size:

P { font-size : 12 px}

Notice the white space between the number "12" and the "px" unit. This rule must now be written like this:

P { font-size : 12px}

This error causes the new rendering engine to ignore most of the font definitions on our example page.

Case-sensitive CLASS and ID

Finally, perhaps the most important change in the new rendering engine is that CLASS and ID names are now case-sensitive.

On our example page, we've defined a class for our navigation bar as follows:

.nav { font-family : Arial; font-size : 12px }

Later, we assign this class to the navigation area by wrapping a DIV tag around our navigation links, like this:

<DIV CLASS="Nav">
   ... navigation links ...
</DIV>

Since class names are now case-sensitive, the new rendering engine no longer associates the ".nav" class with the reference in our DIV tag. This causes us to lose all style definition for the navigation area.

These changes aren't the only differences, but they may be the ones you'll most likely encounter. To see a full list of differences, see the reference on Microsoft's Web site.

If the new rendering engine seems like a hassle, then you may want to set your DOCTYPE tag so that Internet Explorer uses the classic rendering engine. Keep in mind, though, that your page will still display incorrectly under other standards-compliant browsers, such as Netscape Navigator Version 6 and Opera.

Also remember that many HTML editors automatically insert a DOCTYPE tag into your Web page, and don't give you the option to configure the DOCTYPE the way you want. That's another reason why there's no substitute for checking your page under all major browsers.