[Top]
More advice for the full screen mode.
   
I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]
Table of topic groupsFront page of CSS-guideExtra pages > 0 What CSS-implementation errors are in MS IE browsers

0 What CSS-implementation errors are in MS IE browsers

Topics

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.

Bradsoft: TopStyle.

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.

[Top]

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[S]).
  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. */
[Top]

MS IE 5.5 for Windows

Bugs and missing features

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

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[S]).

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:

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:

W3C: CSS1 Test Suite.

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[S][Pw].
  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[S].

CSS2-implementation has at least missing of following features:

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[S]. Below is a link to comments in some web pages.

Webreference, Webstandars.
[Top]

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[S]. 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[S] 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:

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[S], 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[S].

W3C: CSS1 Test Suite.
Microsoft: CSS Enhancements in Internet Explorer 6 Public Preview.
[Top]

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[S] 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:

[Top]

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[S]). 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]-->
Msdn: About Conditional Comments.

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[S]. It is also reasonable to take account advice, which I give when I handle dynamic menus[S].

[Top]
   
Copyright Tapio Markula 1999-2003, Salo, Finland
(table of topic groups, E-mail - add Tapio.Markula)
( tapio.markula@nic.fi)
Not into the public use without my permission. If you want to use my pages at some way read the copyrights.
Get Expression!

An editor for creating standard-compliant HTML and XML documents. Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!
Information about browsers, which render or print this site best.
[Get Opera!] [Get Mozilla!]
CSS-guide has been last edited 07.08.2004