CSS support in MS IE 3.0

Microsoft released Internet Explorer 3.0 on August 14, 1996. It is the first commercial browser that supports CSS. This is a major step forward for style sheets on the web. This page contains pointers to sample documents and points out some remaining holes in the CSS implementation. The latter will be useful for people who want to start writing style sheets.

Sample documents

• While CSS1 can't encode the full typography of Wired (the paper version, that is), it still deserves a mock front page. Note that the SPAN elements in the WIRED banner have images as backgrounds. CSS1 has not been designed as a too for graphics artists, and the lack of per-pixel control is starting to show in this example.
• Also, advertisements are a source of information. The IBM ad reproduced here was printed in WIRED 4.05 US. Compared to the paper version, the CSS-encoded page contains more white space around the word "gazillion". This is due to MS IE not supporting negative margins in CSS. The CSS specification is still unclear on this issue (as of June 96).

The tree documents below all contain exactly the same HTML markup. The only thing that changes is the style sheet. Viewed through a CSS-aware browser, the resulting presentations are quite different.

• A simple magazine style. No frills. Similar to the style of "The Economist".
• colors, fancy fonts are introduced
• let's waste screen space!
• doublespaced lines

CSS implementation holes

While MSIE3 can claim support for CSS, there are bugs and limitations. Below you will find prioritized lists of missing functionality and bugs. Braden N. McDaniel has also published his list of holes.

Missing functionality

• em values (i.e. length units relative to a font size) are not supported. This is important in order to write style sheets that scale from one resolution to another.
• There is no documented way for users to supply their personal style sheets.
• 'margin' (the compound property) and 'margin-bottom' are not supported
• the 'padding' properties are not supported
• the 'border' properties are not supported
• pseudo-elements are not supported (but pseudo-classes are!)

Bugs

• The formatting model as implemented in beta 1 diverges from the specification. E.g., the left margins of the BODY and P elements do not add up (example).
• Margins do not collapse as described in the specification. Take a look at the Style Sheets resource page which has a style sheet attached. In order for all lists to be aligned, they are all within an explicit P element. In the case where the P element only has children elements (i.e. UL and LI), the margins belonging to the P element should be collapsed (i.e. take the maximum of) with 'margin-bottom' of the above element (H2) and 'margin-top' of the child element (UL). Since this is not the case (all margins seem to be added), the space between the H2 and the UL element becomes too large.
• 'font-family' declarations must be placed at the end of blocks; they seem to hide trailing declarations (example)
• You cannot set styles on implied tags. For example, if you don't include the BODY tag in your documents, style attached to the BODY element will not have any effect
• Line spacing (as shown in this example) is also added to the last line of a formatted element -- that's why there is so much space around the headlines. Spacing should only be added between lines.
• vertical spacing sometimes act weird after lists. Consider the space between the end of the list and the horizontal rule in this example
• inline elements do not inherit the background of their parents correctly. Consider this example where the SPAN element inside the H1 takes the background of BODY, not H1.
• lines with links in them sometimes get extra space above them