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

0 What CSS-implementation errors are in MS IE browsers

Topics

• Common
• MS IE 4.x for Windows
• MS IE 5.5 for Windows
  • Bugs and missing features
  • Proprietary CSS
• MS IE 6.0+ for Windows
• MS IE 5.0+ for Mac
• Skipping

Common

A very useful application in order to look at supported features of MS IE is Bradsoft's TopStyle (Lite-version is free), which lists all implemented CSS properties and values in MS IE. Indeed any of versions, which I have tested doesn't mention at-rules (for example @font-face). The application gives much tips concerning implementations.

I don't handle MS IE browsers, which are older than MS IE 4.x for Windows because I can't install very old version of it. With Windows 98 becomes a MS IE 4.x series browser (the exact version number is 4.76). There are some people, who never update their browsers under the same platform and that's why authors must at some level take account old browsers.

MS IE 4.x for Windows

MS IE 4.x renders basic CSS relative well, but I has most of the bugs of MS IE 5.5 for Windows, which I handle later. The browsers have however following special features, which are worth to mention:

1. The browsers doesn't support the @media at-rule but the media attribute is supported.
2. It has very bad implementation of clear and float:
   • The browser implements float in many cases so, that it puts floated elements into an own row even if this is not necessary. This cause additional line breaks.
   • If the same row has much floated elements after each others, it can't divide them into several rows.
   • clear cause lonely floated elements even if the browser could in principle set elements to the same row. This cause additional line breaks.
   • Floated elements might increase the height of the parent element.
3. Accepting of incorrect names of id and class selectors differs from newer versions (look at a model).
4. Missing supporting of pseudo-elements :first-letter and :first-line (concerns also MS IE 5.0 for Windows).
5. The width property with margin works much worse than in newer versions.
6. display:block is not supported other way as opposite for display:none. Natural inline level elements, which have been defined as block behave always like inline level elements.

Because MS IE 5.0 for Mac doesn't support @media at-rut but pass all CSS, which is inside media blocks, adding to a style sheet an unknow media type can create a section, which is read only by MS IE 4.x, for example (a test element):

@media MSIE401 {#testMSIE401 {color:red !important; text-decoration:none !important}}/* This unknow media type is primary for MS IE 4.x for Windows. Note, that Opera 4.x+ supports the media type projection and don't use that media type in this purpose. If the style sheet use the for example the media type screen adding a block, which has the media type tty, can bet get the same result. */

MS IE 5.5 for Windows

Bugs and missing features

I have found following following positive matters in MS IE 5.5:

• Table-layout:fixed works fine. It decrease drastic the delay time before anything is rendered on the screen.
• The browser supports :first-letter and :first-line pseudo-elements.
• Bugs which relate wit border rendering for inline level elements are almost fixed. Words "border rendering" have nice borders. Indeed the property height cause incorrect behavior like in previous versions (an example).

MS IE has serious CSS1 implementation errors. Rendering borders for BODY and HTML is incorrect. Calculation dimensions of block boxes is seriously incorrect. I handle these bugs in the page How to set CSS for backgrounds and borders).

Also float and clear properties work incorrectly (concerns also MS IE 6.0 Windows; MS IE 4.x for Windows has more and different errors). If the property clear is used, MS IE might move later in the content existing floated elements above earlier floated elements. With values left and right the property float should move the element as high as possible (however so, that the later floated elements don't go above the previous floated elements), but MS IE moves elements often a little bit downward. MS IE might copy/move a part or the whole of the content of the floated element outside the element. In spite of some bugs, the property float is however useful. Following screen captures show problems with the clear and float properties:

• Clear and Opera 5.12 (Netscape 6.2 renders at the same way).
• Clear and MS IE 6.0 (Mozilla 0.9 (Netscape 6.1 level) renders at the same way).
• An error behavior in the handling of the float property in MS IE 6.0.

CSS1 implementation was disappointment, because I expected that MS IE 5.5 could survive from the CSS1 Test Suite of W3C as well as Opera 4.x and Netscape 6.0, which render the whole suite almost flawless (at least better than MS IE 5.5). MS IE 5.5 doesn't render at least following test pages flawless:

• Accepts invalid CSS. I listed these matters in an another list (2-5) and they are related to pages sec11, sec14, sec15 and sec71.
• Some margin, padding and alignment values don't work correctly: sec412, sec43, sec44.
• Some properties to the element HTML don't work: sec45.
• The value small-caps doesn't work properly: sec524.
• Word spacing doesn't work: sec541.
• Partial implementation on display:list-item (block box is ok, but missing of a square list item marker): sec561.
• Partial implementation of white-space (white-space:pre doesn't work): sec562.

MS IE 5.5 should ignore invalid CSS, but it accepts at least following invalid CSS:

1. Accepts invalid property values:
   • For example MS IE render following box as if it has 1px as the width value (style="border: 1p solid #636"):
     a bordered inline element.
     According to CSS2 it should ignore the invalid value 1p and render borders with default value. MS IE should render it at the following way (border: medium solid #636):
     a bordered inline element.
   • It accepts invalid font size values, for example {font-size:15}; it renders unitless font-sizes as if they would have been defined with pixel values ({font-size:15px}). Katso esimerkki.
2. It accepts hexadecimal color values, which don't start with #.
3. It accepts @import at-rule even if it the rule would not be in the beginning of the style sheet.
4. Accepts invalid id and class names.
5. Forward compatible parsing doesn't work.

Note. It is really bad matter, that MS IE 5.5 accepts invalid CSS, because Netscape and Opera don't tolerate as much invalid encoding. The author might create invalid CSS, which works only in MS IE. In fact it would be very desirable, if the browser could validate used CSS and complain spelling errors. This is much better solution than tolerate invalid CSS (accepting invalid CSS has also a disadvantage, which concerns the forward compatible parsing).

Also the implementation of CSS2 in MS IE 5.5 was in some matters disappointment to me. MS IE 5.5 is not a real XML + CSS browser, because it doesn't support some important features (I handle them also in the page How to use CSS with XML documents.

CSS2-implementation has at least missing of following features:

• Many display properties (run-in | compact | marker | table | inline-table | table-row-group | table-row | table-column-group | table-column | table-cell | table-caption). All CSS1-level values are implemented at least in some level, but it is not possible to emulate the whole HTML 4.x table structure in XML documents with CSS because of missing of supporting some elementary values of the display property. This is excessively detrimental, because both Opera 4.x+ and Netscape 6.x+ give the possibility to create at least basic table presentations for XML documents only by using CSS - look at an example. Opera 5.x supports at least following values of the display property: inline | block | list-item | run-in | compact | table | inline-table | table-row | table-cell | table-caption | none.
• Some CSS2 table model properties and values which are associated to them (caption-side, empty-cell, visibility:collapse). These missing features are not very important.
• Some paged media properties and associated values (page, size, marks) and some individual values (like avoid). These missing features are not basic.
• Max-height, min-height, max-width and min-width. These properties would give the possibility to adjust flexibly the width and height values. It is really bad, if MS IE doesn't want to implement these properties, because they would give the possibility to use simple page structures. Indeed it is possible to create for MS IE browsers by using JavaScript encoding functionality, which resembles max-width (I explain this matter in another ).
• position:fixed .
• The separate borders model works just partial (for example border-collapse: separate; border-spacing: 15pt; doesn't work).
• caption-side.
• Implementation of attribute selectors is totally missing (for example a[target="_top"] {background-color:#ffc} doesn't work).
• Only CSS1 level pattern matching implementation and missing of all new CSS2 level rules (proper CSS2 level pattern matching is for example Netscape 6.x+, which read almost all the CSS, which is in my error test page; It has a special test for pattern matching).

In addition I mention that MS IE 5.5 supports overflow quite well, but overflow:auto should create scroll bar(s) only if it is absolutely necessary. MS IE might create the horizontal scroll bar even if it is not necessary. This is a quite tiny bug.

Overall MS IE 5.5 has fair, but not very good CSS-implementation.

Proprietary CSS

An inconvenience designing feature in Microsoft is that the company have been concentrated on creating proprietary solutions instead of creating a proper implementation of existing standards. I handle proprietary CSS in a separate page. Below is a link to comments in some web pages.

MS IE 6.0 for Windows

MS IE 6.0 doesn't have much new implementations. Concerning features, which belongs to CSS2 but not to CSS1 Microsoft informs that only supporting of min-height in tables has been added (the property doesn't work with generic block level elements). In general MS IE 6.0 has the same missing of important CSS2 features as MS IE 5.5. Instead Microsoft has tried to get full CSS1-implementation and make existing CSS2-implementations to conform with the CSS2 specification.

Microsoft has succeed in this matter quite well. In spite of some bugs MS has really tried to create standard-compliant browser concerning rendering of CSS2, when the standard-compliant mode have been turned on with the so-called DTD-switch. Trials to follow the CSS2 specification concerns primary situations, where the standard-compliant mode is on. In the standard-compliant mode MS IE 6.0 support future proposals but not proprietary extensions.

The DTD-switch creates also problems, because the rendering with MS IE 6.0 for Windows might be quite different than with MS IE 5.5 for Windows. Matters, which I handle in the page 8 concerning dimension problems are worth to notice. Following my advice it is possible, that MS IE 5.5 for Windows, MS IE 6.0 for Windows, MS IE 5.0 for Mac and new Opera and Netscape/ Mozilla Gecko browsers renders sites approximately at the same way with all kinds of document types.

The browser makes also in the standard-compliant modes errors, which are worth to mention. Almost all CSS1-level bugs/missing features has been fixed/added. Below is a short list matters, which I have found concerning CSS1:

• The CSS1-implementation is almost complete, because following properties/ property values, which don't work/ works buggy in MS IE 5.5, work now correct in the W3C's CSS1 Test Suite: margin, padding, font-variant:small-caps, word-spacing, display:list-item and white-space:pre.
• Properties float and clear work at the same way incorrect as in MS IE 5.5 (W3C's the test suite doesn't reveal all errors).
• The property width doesn't work always correctly. body {width:100%} cause randomly unnecessary horizontal scroll bars. The property doesn't work correctly in tables.
• If the browses works in the standard-compliant mode, it doesn't accept most of the CSS-syntax errors, which MS IE 5.5 accepts. MS IE 6.0 ignores sometimes in the standard-compliant mode incorrect declarations, for example border:1p solid black (1p is an invalid property value). But sometimes it replace unknown values with the default values of each properties. For example in the case of border:3px solid double; border-bottom-style:inherit the browser should ignore for it unknow declaration border-bottom-style:inherit and not replace inherit with the default value none. The behavior of MS IE 6.0 is this kinds of situations very inconsistent.

Note. Because MS IE 5.5 implements incorrectly height and width to ordinary inline elements (for example STRONG), MS IE 6.0 supports the into CSS3 belonging display:inline-block display type. If the browser works in the standard-compliant mode, this CSS must be defined in order to get dimensions for ordinary inline level elements. I refer to this property also in the page, which handles problems of the CSS2 specification.

MS IE 5.0 for Mac

MS IE 5.0 for Mac differs in many matters essential from MS IE 5.5 and MS IE 6.0 for Windows. MS IE 5.0 for Mac has the DTD-switch like MS IE 6.0 for Windows. MS IE 5.0 for Mac might render sites so, that the presentation is either closer MS IE 5.5 for Windows or new Opera and Netscape/ Mozilla Gecko browsers.

Overall it has better CSS2 implementation than MS IE 5.5 for Windows. It can be rather compared to MS IE 6.0 for Windows than MS IE 5.5 for Windows. MS IE 5.0 for Mac differs from MS IE 6.0 for Windows at least in following matters:

• It doesn't support @media. Media types must give with the media-attribute.
• It doesn't support paged media.
• MS IE for Mac supports position:fixed, which I handle in the page 11.
• The DTD switch affects to the property width properly also in tables.
• The DTD switch doesn't affect to font sizes xx-small-xx-large. MS IE for Mac renders them differently (look at a model page).

Skipping

There are situation, where something in the common CSS-file doesn't fit for certain version of MS IE. Different handling of @media gives the possibility to get some browser to skip certain CSS. If the same skipping has been needed both for MS IE 4.x for Windows and MS IE 5.0 for Mac browsers, the same CSS must give several times.

In order define individual properties for MS IE 4.x for Windows can use unknown media types:

/* MS IE 5.0 for Mac don't read any CSS inside media blocks, but MS IE 5.x+ for Windows ignores only unknow media types */
@media tty {
foo {} /* MS IE 4.x Windows skips this rule and reads just the next rules. */
#IE4 {...}
}

This fits also for newer versions than MS IE 5.0 for Mac because Microsoft doesn't anymore develop Mac browsers. However the most reasonable way to tailor CSS for different versions of MS IE is to create one big CSS-file, which fits at some level for all browsers (look at a model source code fragment). If necessary some versions get own CSS-files, which have browser-specific changes.

It is possible to skip certain versions of MS by using conditional comments, which other browsers than MS IE interpret as conventional comments, why they work only in MS IE browsers, for example:

<!--[if IE 5]>
...
<![endif]-->

Note. If the purpose is to give for Opera 4.x+ in the full screen mode the same CSS as for new MS IE browser, it is necessary to take account advice, which I have given for Opera. It is also reasonable to take account advice, which I give when I handle dynamic menus.