IE 6 pseudo elements bug

First reported by Herman Peet in Bradsoft's TopStyle newsgroups. Nick Bradbury posted about it in his blog.

Updates

3.6.2004

Created sample documents with varying DOCTYPEs and tested in multiple browsers.
Discovered that in an HTML document with no DOCTYPE declaration, the pseudo element declarations work correctly.
Discovered that the pseudo elements appear to be intepreted correctly by IE 5.5

Problem

When the space is removed between the pseudo element and the first curly brace, the selector will not be applied. For example:

select:pseudo-element{ declaration }
                     ^ space removed

To prevent the problem, ensure a space is added:

select:pseudo-element { declaration }
                     ^ space preserved

Download example style sheet and example html file

Testing

I've tested this with the following browsers and so far, IE 6 is the only browser to exhibit the failure. Even IE 5.5 gets it right.

IE5.5 and 6
Firebird 0.61, 0.7
Firefox 0.8
Mozilla 1.3.1, 1.4.1, 1.5, 1.6
Opera 5.12, 6.06, 7.23
Safari 1.2 (via Dan Vine's iCapture. Saved screen shots are here.)

Changing DOCTYPEs seem to have no impact on the behavior.

There is one notable exception. A bare-bones HTML document without a DOCTYPE renders the pseudo elements correctly. (However other elements such as the width on the body fail. Quirks mode, I guess.)

No DOCTYPE

Examples

View examples with various DOCTYPEs

Example 1 - :first-letter pseudo element

Broken Example

p.broken:first-letter{font-size: x-large; font-weight: bold;}

Working Example

p.working:first-letter {font-size: x-large; font-weight: bold;}

Example 2 - :first-line pseudo element

Broken Example

p.broken:first-line{font-size: x-large; font-weight: bold;}

Working Example

p.working:first-line {font-size: x-large; font-weight: bold;}

Comments

Send comments, questions, critiques, links, etc. to jack at mvps dot org and I'll post them here.

Valid XHTML 1.1