The :first-letter pseudo-element

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

This entry was posted on Friday, April 11th, 2008 at 8:24 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.