This is the first of a series of WSP standards-compliance reviews. The WSP will as a matter of policy provide thorough coverage of and feedback on interim releases of major browsers, starting November 1st, 1998.
Microsoft led the way in implementing Cascading Style Sheets, first in Internet Explorer 3.0, then improving that support significantly in Internet Explorer 4.0. While Microsoft's implementation of CSS1 has thus far always been the best available, it has also failed in completeness and quality to offer a viable alternative to HTML-based layout and formatting techniques. In fact, several of the most critical features of CSS1 remain either incorrectly implemented, implemented for only an undocumented selection of eligible HTML elements, or entirely neglected in Internet Explorer. This document presents the most glaring of these problems.
The uneven deployment of CSS1 in major Web browsers over the last two years has caused Web authors great frustration and expense, and won CSS an undeservedly obscure and difficult reputation. As unfortunate as this failure has been for HTML in the recent past, the implications for XML in the near future are even more disturbing: lacking adequately mature CSS implementations, XML will generally be converted first to nonreusable HTML for display. This will retard the deployment of distributed XML applications, as the richest data will tend to remain on servers or decay quickly on clients.
Now that Netscape and Opera promise to release competitive CSS1 implementations in the near future, the WaSP calls upon Microsoft to finish the work it began, letting Web designers, authors, application developers, and users build upon a single, robust foundation for Web presentation: CSS1.
Of all the problems CSS authors face, most vexing by far is the incomplete
implementation of the box model. The box model governs the margin, padding,
and border properties of elements, and is essential for achieving alignments,
hierarchies, rhythms, and other important visual relationships. Equally important is support for the allied
height properties for all elements with
block display. It will
require complete and quirk-free support for the box model on all elements
in order to retire tedious workarounds like tables for layout, or the
pernicious replacement of structurally appropriate elements with the generic
DIV merely to avoid box-model implementation snares.
This document, for instance, contains a
is "body". It is entirely redundant with the
yet made expedient because the box model is not supported on the
element in IE. Such quirks encourage spurious, browser-specific markup
and stylesheet tricks, and are an impediment
to the widespread adoption of CSS1.
Though technically part of the box model described above, incorrect support for
clear properties is important
enough to merit a separate point. Most pages on the Web rely on tables
for their visual structure, confusing their logical structure beyond repair.
clear are the CSS alternatives to HTML tables for placing elements side-by-side. By retiring the need for presentational tables in HTML, correct support for
clear can make richly-formatted Web documents dramatically faster, simpler, more reusable, and more accessible.
clearto display sidebars.
clearproperties to achieve a layout similar to that of the W3C's current home page. If
clearwere properly supported, the differences would be minor or nonexistent. (Reference Image)
The error-handling in IE's CSS parser is often in error. The CSS1 specification explains very clearly how things should be handled (i.e., what to ignore), but IE does not follow this part of the standard. This causes documents designed for levels of the CSS specification not yet supported by the browser to render incorrectly.
Another bug engineered into IE is that style inheritance (whereby container objects pass their style on to their children) breaks down upon entering a table element.
For example, if a rule applied to the
BODY element declares
small font size, then all text within tables will look
oddly large. Redundant selectors and spurious markup are required to repair
the failure of inheritance. Unable to use CSS1's layout facilities, authors
turn to HTML tables instead, where the rest of CSS1 breaks down into still
more redundant hackery, no more elegant than the old single-pixel-GIFs
The reason given for this behavior is to maintain "bugwards compatibility" with a similar quirk introduced by Netscape Navigator, in its initial implementation of HTML tables. This perpetuates the legacy of broken document parsing and obligates authors to compensate in their work. We believe authors would much rather see this historical curiosity dropped, in favor of a more consistent CSS system.
A better way to fix this would be to provide it as an option such as "Enable Legacy Table Parsing," rather than compel it as a default.
IE's support for
is incomplete. Explorer repeats tiled background images down and
to the right, no matter where the initial image is positioned. If an author
positions an image in the center of an element and then sets it to repeat,
it will fill only the lower right corner of the element. The specification,
however, requires that the image be tiled in all four directions: up,
down, right, and left. A similar problem occurs with
repeat-y, which should repeat in both directions either
horizontally or vertically.
When this was first written, IE did not support the
property, apart from the
We are happy to note that Microsoft appears to have addressed this in a 5.0b release,
list-item is still missing, however.
This document, for instance,
has manually numbered
H3 elements. If the list-item display type were supported for
the UA might generate the numbering as with any other list, resetting the counter at each occurrence of
CSS2 introduces a number of new values for the display property; and as nice as it would be to see those implemented, we believe designers would rather see them postponed in favor of complete support for the CSS1 values.
first-line pseudo-elements are still
This is a shame, since they are nice effects, and
commonly used in the print world.
CSS1 provides for authors to associate multiple stylesheets with a document, allowing users to choose the most appropriate or pleasing.
For example, a designer could create a default "public" stylesheet for a body of documents, a second sheet suitable for intra-organizational or -departmental access to the same documents, and a third suitable for users who are visually impaired (using high-contrast colors, for instance). The mechanism is extensible to include transparent application of media-specific stylesheets: one for print, one for WebTV, another for hand-held device browsers - all without content redundancy. This document, for instance, written in HTML 4.0 Strict, is associated with three distinct stylesheets. Unfortunately, due to lack of support for this CSS1 feature, you are unlikely to have any choice but the default.
Among the primary design goals of CSS is to restore balance among the responsibilities the author, the user, and the user agent (UA; i.e., the browser) must share when negotiating the presentation of Web content under varying conditions. These goals require the exposure of alternate author style sheets, the ability to turn off author stylesheets conveniently per document, the ability to apply user stylesheets, and the exposure of a UA default stylesheet for each media type. Internet Explorer supports one of these requirements - user stylesheets - but it is hidden in a dialog available from a dialog, not terribly usable on a per-document basis.
By not implementing a more extensive user interface for alternate and user CSS, Microsoft turns CSS from a language designed to balance user and author needs into a fundamentally user-hostile instrument. With users unable to interact with author CSS easily, authors are entertained not only with the promise of reckless authority in all matters of style, but with the temptation to create documents that are meaningless with any stylesheets other than their own.
Note. It is possible to simulate support for alternate stylesheets in the Windows version of IE4, using a 'plugin' developed by Microsoft engineer
This plugin is available from
A plugin doesn't
fix the problem, however; it only provides a workaround. This functionality
should be available out-of-the-box, so all users can benefit from this
feature, and authors may begin to expect support for the same.
Support for CSS1's
nowrap property would permit retirement of the nonstandard
NOBR extension and the deprecated
NOWRAP markup attribute, as required by HTML 4.0.
Control over whitespace preservation with the
pre value would help further abstract presentational considerations from markup.
Vertical alignment of elements is an essential layout facility provided for in CSS1. In fact, the lack of support for this feature in CSS implementations is a major reason authors continue to rely on tables to style their pages. Explorer supports the superscript and subscript values of this property (albeit quirkily: the font-size should not change when this value is applied). This leaves six unsupported values.
Beta release 2 of Internet Explorer 5.0 fixes a few bugs in the tests given above, but it also adds a few new bugs.
IE 5.0 beta 2 adds a new twist to the box model
vertical formatting test. Due to the presence
of the CSS
height property, IE adds 22 pixels or so at the
top margin. It also interprets the value of the height, but it takes
that value to define the area that includes the border and padding (but
not margin), rather than the content area alone.
The box model horizontal formatting test shows the same extra top margin as does the vertical formatting test, between the top ruler and the paragraph.
There are also a few display problems in these two tests at the pixel level. The borders are 1 pixel too short on the top (horizontal test) or left (vertical) side, and there is 1 pixel missing in the vertical test where at the top right corner of the bottom border (it is white instead of gray).
IE 5.0 beta 2 interprets correctly the
media tty section of the demonstration of error handling
problems which appear now. That is, the text is black. IE still
indents everything, however.