IE's Top 10 CSS Problems

1. The box model

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 width and 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 DIV whose ID is "body". It is entirely redundant with the BODY element, yet made expedient because the box model is not supported on the BODY element in IE. Such quirks encourage spurious, browser-specific markup and stylesheet tricks, and are an impediment to the widespread adoption of CSS1.

1. Box model horizontal formatting
2. Box model vertical formatting
3. Using background properties on inline elements
4. Padding, border and margin on inline elements

2. float and clear

Though technically part of the box model described above, incorrect support for the float and 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. float and 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 float and clear can make richly-formatted Web documents dramatically faster, simpler, more reusable, and more accessible.

1. Supposedly simple use of float and clear to display sidebars.
2. An HTML 4.0 strict version of the W3C home page. This page attempts to use both the float and clear properties to achieve a layout similar to that of the W3C's current home page. If float and clear were properly supported, the differences would be minor or nonexistent. (Reference Image)
3. Floated elements violate and disrupt the borders and padding of the box that contains them. (Reference Image)
4. Floated elements interfere with the background of their containing box. (Reference Image)
5. A composite box-model/float/clear layout test. Caution: this test has been known to crash Netscape Navigator 4.x. See the reference rendering to see how this test page should look in a CSS1 browser.

3. Error handling

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.

1. Demonstration of Problems with Error Handling which appear now.
2. Demonstration of Problems with Error Handling which will appear in the future.

4. Inheritance within tables

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 a 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 and overstuffed FONT tags.

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.

1. Inheritance breakdown within tables.

5. Tiled backgrounds

IE's support for background-repeat and background-position, 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-x and repeat-y, which should repeat in both directions either horizontally or vertically.

1. Tiled Backgrounds Demo.

1. Display properties

When this was first written, IE did not support the display property, apart from the none value. We are happy to note that Microsoft appears to have addressed this in a 5.0b release, supporting both block and inline. Support for list-item is still missing, however.

This document, for instance, has manually numbered H3 elements. If the list-item display type were supported for H3, the UA might generate the numbering as with any other list, resetting the counter at each occurrence of H2.

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.

1. Display Property Demos.

2. Pseudo-elements

The first-letter and first-line pseudo-elements are still MIA. This is a shame, since they are nice effects, and commonly used in the print world.

1. Demos for first-letter and first-line.

3. Alternate stylesheet UI

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 Chris Wilson. This plugin is available from http://www.geocities.com/Area51/4708/ssselect.zip. 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.

1. Simulation of Alternate Stylesheets.

4. white-space

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.

1. Demonstration of white-space.

5. vertical-align

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.

1. Aligning images of varying heights with text

Box Model Tests

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).

Error Handling Test

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.

Display Property Demos

IE 5.0 beta 2 shows example 1 in the display properties demonstrations correctly.