Errors in Style Sheet Implementations

This page (last updated on August 11, 1997) documents some errors in the major browsers in interpreting the specification of Cascading Style Sheets.

(If you are unfamiliar with style sheets, you might want to learn about them from the Web Design Group's Guide to Cascading Style Sheets, or you can buy the book I'm co-writing when it appears on bookshelves in mid-October.)

So far, there are two tests here:

1. Inheritance
2. Horizontal Rules and Backgrounds

You can also read about these tests.

Test 1: Inheritence of a BODY font style

A sample document was created with various headings, emphasis, strong emphasis, italics, bold, horizontal rules, a list, a table, a form section, an image, several font elements and superscripted text.

This document contains a simple style sheet, with three rules grouped to apply to the BODY of a document. The style sheet is shown here:

BODY { font: normal normal normal 12pt/13pt sans-serif; background: black; color: white; }

The three rules say:

1. Apply a 12 point sans serif font, with 13 points of line height, that's normal in three ways: normal (not bold) font-weight, normal (not italic) font-style, and normal (not small caps) font-variant.
2. Apply a black background.
3. Apply a white text color.

These three rules should inherit their way down from the BODY element to all of the HTML elements contained in the body. The question is whether or not the default values of those HTML elements (for example, the larger font size of a level-one heading) should outweigh the inherited rule.

Although open to interpretation, the CSS1 specification seems to say that the default values of an HTML element (such as the bolding found in a <B> tag) are declarations that should outweigh the inherited declaration.

To test how the browsers have decided to resolve this issue, here are the results of the test document being rendered on various browsers on the Windows 95 platform.

• Netscape Navigator 3.02 Gold
  [screen shot, 26k]

  Navigator 3.02 does not have style sheet capabilities, so this screen shot is very straightforward, showing default or baseline results for the document. No inheritence, no problems -- but also no style sheet rules.

• Internet Explorer 3.02
  [screen shot, 13k]

  IE 3.02 has preliminary and incomplete support of style sheets. Here, the font size has inherited throughout the document (even affecting the headings) but the specification for normal font-weight and normal font-size has not affected the bolding and italics. IE 3.02 is said to ignore the "normal" value. Note that the font color has affected the anchor colors. Also, the font chosen is not sans-serif, but the style sheet's font has affected the <FONT> face elements, removing the Courier and Arial.

• Netscape Navigator 4.01
  [screen shot 1, 14k]

  Navigator 4.01 makes font size inherit all the way down, affecting headings and superscript elements. (The trademark "^TM" text is larger than it would normally be.) Bold/strong elements are no longer bold, but strangely enough italic/emphasis elements are still in italics. The anchor colors override the font color inheritence. All of this is probably erroneous behavior, especially the bolding going away and the italics staying. But it gets worse.

  [screen shot 2, 11k]

  Navigator does not inherit properties into tables. (This fact is listed in Netscape's Style Sheets Known Issues document.) In this screen shot, the table is completely missing because the text within it has a font color that's still black. Black on black is not easy to read. (Moral: Always repeat your BODY declarations for the table cell, until Navigator 4.01 isn't in common use anymore -- perhaps sometime in 1999.) And it gets worse.

  [screen shot 3, 14k]

  A train wreck in the form element: A drop-down menu collides with the submit button over the text area (which is strangely too large), killing the page. None of the other browsers have exhibited this disastrous behavior.

• Internet Explorer 4.0 platform preview 2
  [screen shot, 15k]

  IE has taken a reasonable approach to the entire document. Since IE 4.0 pp2 now has a default style sheet, HTML elements have default declarations, which outweigh the inheritence from the BODY style. Thus, headlines are at the customary sizes (and bold by default), and the document's bolding and italicizing remains. The BODY declaration has clearly afected the document, since the default font face has changed throughout.

  Note, however, that the sans serif font is at the wrong size for the two entities (é and ë) shown here in the "Many" paragraph. (I've now been informed that this problem has been fixed in the latest build to IE; thanks to Anita Rowland for the information. The general public will see this fix whenever Platform Preview 3 is released.)

The lesson here is that IE 3.02 and Navigator 4.01 treat inheritance much differently than IE 4.0 platform preview 2.

This can cause quite a few problems for style sheet authors. As David Perrell wrote recently on the W3C's www-style mailing list:

In any case it looks like prudent authors will have to declare style for all elements they use.

(You can read the archive of this mailing list for a discussion of whether or not inherited properties should outweigh the brower's initial values. You can also participate in a new project to write a style sheet that accurately describes the browsers' default behaviors.)

Alternately, you may have to create different style sheets for different browsers, and use scripting to select the appropriate style sheet for each style sheet-enabled browser. Todd Fahrner describes one such approach while demonstrating some (different) problems with CSS implementations.

Test 2: Styled Horizontal Rules and Backgrounds

This test uses a sample document made up of various styles for horizontal rules, as well as background styles.

The test document is available so you can see how your browser renders styled horizontal rules and backgrounds. (Please "view source" to see how the example was constructed.)

Here is how four popular browsers render this example document on my system.

• Netscape Navigator 3.02 Gold
  [screen shot, 28k]

  For baseline comparison, since Navigator 3.x doesn't use style sheets.

• Netscape Navigator 4.01
  [screen shot, 15k]

  Navigator 4.01 has a problematic display in several respects. First, since Navigator ignores the "height" property, none of the styled rules (3, 4, 5 and 6) or text (7 and 8) have the correct height. Secondly, none of rules 3 through 6 have the correct color or background. There is an erroneous margin error next to the third piece of text and the "Clouds"-class paragraph. Finally, the width of the backgrounds for 7 and 8 should be the full-width, since paragraph is a block-level element.

• Internet Explorer 3.02
  [screen shot, 28k]

  IE 3.02 has numerous display issues, but I won't take the time to describe them here since IE 3.02 was released before style sheets became finalized, and has only a partial implementation of style sheets. Some interesting effects and errors nonetheless; see if you can spot them all.

• Internet Explorer 4.0 platform preview 2
  [screen shot, 20k]

  IE 4.0 pp2 is close, but the fourth rule fails horribly, and there is no background for rules 5 and 6. Also, the text in 7 and 8 doesn't have the correct height.

Other Tests

Other tests might well appear here when I have time. Unfortunately, I've already uncovered quite a few other problematic examples.

About These Tests

These screen shots were created on two different Windows 95 systems, at 640x480x256, with default fonts and settings, (except for switching off the toolbars to show more of the test documents on-screen).

I would like to add more screen shots from different platforms, if there is a difference in how your browser renders any of the above tests. I don't currently have access to a Mac, so I'm very interested in seeing how the Macintosh versions compare.

Please send me your comments and screen shots (any format, I can convert). Let me know if something isn't working right for you, or if you have suggestions for how I can improve these tests, or for adding more tests.

There is a comprehensive body of tests available from some W3C's CSS test pages, maintained by one of the principal CSS1 authors, Håkon Wium Lie.

HTML 4.0: No experience required test site