Table of topic groups > Front page of CSS-guide > Extra pages > N What CSS-implementation errors are in browsers

N What CSS-implementation errors are in browsers

Topics

• Common
• Microsoft
• Netscape
• Opera
• Some demonstrations or errors or missing features

Common

Browsers make errors and they have missing features. In spite of the fact that MS IE 4.x-5.5 for Windows tolerate quite much errors it is necessary that authors try to avoid errors. This is important because some CSS-supporting browsers don't tolerate errors at all or very little. It is sensible to validate CSS using the CSS validator of W3C.

Even if all new browser don't accept much errors also browsers, which should behave with certain DTD in the standard(-compliant) strict according to the existing specifications, accepts some invalid/ unknown CSS for the browsers (if they don't work in the standard(-compliant) mode they accept more illegal CSS). They have so-called "DTD-switch". I have found following errors accepting total invalid or unknow properties:

• Netscape 6.2.1 accepts #-abc {...} and #-abc {...}.
• MS IE 6.0 for Windows doesn't support position:fixed, but it identifies it and changes the value fixed into static. If the browser doesn't support some value it should handle it as if an illegal value and not to set the default value instead. MS IE 6.0 ignores however position:fixes, which shows that ignoring invalid values partially works.
• MS IE 6.0 for Windows doesn't support the value inherit, but it sets in some cases the default value instead. MS IE might change also total invalid value into the default value. In the cases below it changes the total invalid value inherits into the default value none even if it should just ignore the latter property:

  MS IE 6.0 for windows reads both
  <div style="border: 3px solid green">outer<div style="border: 3px double blue; border-bottom-style:inherits;">inner</div>outer</div>
  and
  <div style="border: 3px solid green">outer<div style="border: 3px double blue; border-bottom-style:inherit;">inner</div>outer</div>
  as if
  <div style="border: 3px solid green">outer<div style="border: 3px double blue; border-bottom-style:none;">inner</div>outer</div>

Opera 7.x browsers have much more limited DTD-switch and elder Opera browsers don't have it at all. That's why Opera browsers must make some compromises, because Web-authors have bad habit to favor invalid CSS especially in JavaScript encodings. Opera accepts at least following errors (I mention also if Opera Software could in my mind change the behavior):

• Opera 6.0 accepts #-abc {...}. Opera Software could change in this matter the behavior of the browser.
• Opera 6.0 accepts unitless values, for example position:absolute; top:10; left: 10. Opera must accept this because these are so common errors. If Opera would work at least sometimes 100% according to the CSS2 specification, it would need a DTD-switch for this matter (the another matter, where Opera would need a DTD switch is font sizes xx-small-xx-large; loot at Model8c.html).
• Opera 6.0 might also change invalid value into the default value in the cases like border:1p solid black. Opera ignores however border:some solid black, which shows that except changing invalid units with the default value of the property, discarding of invalid CSS in general works quite well. Opera Software could change in this matter the behavior of the browser change this. It might nee a DTD-switch for this matter.

Style sheets and rules should organize very systematic. I have met problems, because my pages are not originally designed to use them. The organization is only satisfactory, but not good. This situation cause following problems:

• Small writing errors are difficult to find and they might have big meaning.
• One exchange effects in many situations - I don't always understand, what effects some exchange might cause.
• The effective values are sometimes difficult to find.

A hint. Create an index.css, when you can validate all your style sheet using a single file! Look at the source code of my test css-file as a text file.

Look at also my page Illegal definitions and hints to avoid problems.

You can get more exact information about errors in browsers from the pages of Webstandards. They give top ten list of CSS-errors and I give some estimation here. You can also read from Webreview documentation about CSS1-implementations in various browsers.

Microsoft Internet Explorer

I judge the MS IE 5.x series according to the CSS2. Overall MS IE 5.x has only average level CSS-implementation and it has been a disappointment for me. Only part of the CSS1 level errors in MS IE 4.x are fixed. It does have also missing of important features in CSS2. The CSS implementation is overall only partial.

The biggest problem is that Windows-browsers have basic level CSS-implementation errors (read the page How to set CSS for backgrounds and borders).

Microsoft has however made remarkable improvements into the 6.0 series (also MS IE 5.0 for Mac is a good browser. Concerning supported features the browsers works with certain DTD quite strict following existing specifications. Detailed analyse about errors and fixes are in a separate page.

Netscape Navigator

Netscape 4.0x is terrible bad - just terrible! It is so bad, that I don't have time to describe of all errors, which it makes (read from an extra page some hints, how you can survive with Netscape 4.x). Netscape 6.x+ has quite fine CSS-implementation! It use Mozilla Gecko rendering engine. Many other browsers use the same rendering engine (for example Mozilla, Galeon and Phoenix). Mozilla Gecko browsers have almost flawless CSS1 level support and quite wide CSS2-implementation. Because Mozilla Gecko browser (like new Opera browsers) applies dynamic pseudo-classes wider than many other browsers, this matter might cause problems for web authors (read CSS notes 1).

Opera

Opera 5.02 has quite functional CSS-implementation and it support all CSS1-features (Opera 4.02 doesn't support :visited). Opera 5.x doesn't have any serious CSS-implementation errors.

Newer versions implement more features, which belong to CSS2, but the strictness to follow the specification has some minor bugs. In some respects older browsers follow specifications better than newer. Following the specification is however overall quite good.

Some demonstrations or errors or missing features

The following list is CSS 2 level pattern matching test. I have explained with text and images, what the browser should show. (I have explained patterns in the page What is the processing order of CSS). This a test for all types of selectors and it explains also at some level the cascading order. Among those browsers, which I have tested, only browsers which can survive this test without any error are Mozilla Gecko and Opera 7.x browsers (it is possible that also Safari and Konqueror browsers might survive from this test as well).

• UL LI: The list-item should be a small orange ball (pallo.gif; ).
  1. UL LI OL>LI: The list-item should be decimal and number 1; If it is not, the browser doesn't support the first-child selector .
  2. Another first-child -level list-item - this should be number 2.
     • UL LI OL UL LI:first-child: The list-item should be upper-roman and character I, because matching rule concerns only the first list-element according to the first-child pseudo-class selector. Without defining the first-child pseudo-class selector, the list-item should be lower-alpha and character a according to the more common rule UL LI OL UL LI.
     • UL LI OL UL LI: The list-item should be lower-alpha and character b.
  • UL LI OL+UL LI : The list-item should be a red small ball (pallo-punainen.gif; ); If it is not, the browser doesn't support fully the adjacent sibling selector (read a comment).
    • .mielipide UL LI UL LI LI: The list-item should be the image smile.gif (); If it is not, the browser doesn't support matching patters, which have class-attributes.
  1. [class="test"]: The list-item should be the image ok.gif (), because of an attribute selector; If it is something else, the browser doesn't support attribute What are selectors, classes and id-attributes.
  2. #test: The list-item should be the image plane.gif (), because of the id selector, which override other selectors and matching patterns.
  3. body [id="test2"] and #test2: Also in this case, the list-item should be the image plane.gif (), because id selector override also attribute selectors, which refer to the same place. According to the pattern matching this image should be the image ok.gif ().

In this paragraph is some inline areas using SPAN. Around these bold words should be 1px #660033 border. If you can't see it, the browser doesn't support properly CSS-properties to inline elements. If you try to make the border visible to IE 4.01/5.0 giving a height-value, which belongs to block-level elements, the result is incorrect. IE don't keep this bordered text at the same vertical level as the other text. It only exchange the area almost as normal behaving block-element. IE tries to keep it in the same line and if it must make a line break, it creates a block box around the text. It doesn't allow other text in the same row. The behavior is something between common inline and block elements. Sometimes it is closer to DIV and sometimes SPAN - always incorrect. According to an e-mail MS IE handles inline elements some kind of special blocks, which explains the error behavior. MS tries to fix this matter in the MS IE 6.0 series.

W3C: CSS validator.
Other sites: Webstandards; Webreview: CSS1 Master Compatibility Chart, CSS2 Selectors Support Chart; Microsoft: CSS Enhancements in Internet Explorer 6 Public Preview.