By a roundabout route I happened on a post describing an Internet Explorer 6 bug (of course) in applying the :first-letter pseudo-element in CSS.

In IE6 there must be a blank between the selector and the declaration block.

/* does not work */
p:first-letter{property: value}

/* works */
p:first-letter {property: value}

Additionally, there appears to be a problem with IE6 (and IE7?) when separating selectors with a comma—include a space before the comma:

/* does not work */
p:first-letter, .extraneous {property: value}

/* works */
p:first-letter , .extraneous {property: value}

That explains a lot as I remove a lot of whitespace in my CSS files (and so may any compression tools) and unwittingly invoke the bug. 9am and I’ve already learned something new

Tags: bug, CSS, first-letter, ie6, ie7, pseudo-element