hasLayout.net

Bookmark and Share

:first-letter Ignore Bug

Table of Contents

Affected Versions

This bug affects: IE6

Symptoms

The entire :first-letter ruleset is ignored

Date of the Tutorial

Tue Jul 28 09:36:43 2009

Description

Here's a somewhat rare bug with an interesting cause for it. Let's glance at the demo to see the problem:

Demo

Due to the nature of the bug, the demo is available on a separate page

HTML Code:
<p>Lorem Ipsum</p>
<p>Dolor Sit Amet</p>
CSS Code:
p:first-letter,
h2 {
    color: #00f;
    font-weight: bold;
    font-size: 200%;
    font-style: italic;
    text-decoration: underline;
}

Everything is fine in sane browsers but IE6 seems to ignore the :first-letter pseudo-element completely as if it does not support it.

If you have a sharp eye you probably noticed the h2 in my selector and wondering if I toked some crack before writing this code. Well, that's not the case - the h2, or rather any other selector separated with a comma that follows the :first-letter selector causes IE6 to forget about that nifteh :first-letter. Can you think of a solution right this second? :)

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Tue Jul 28 09:41:51 2009

Fixed Versions

All of the affected

Description

This is not the first time I claim the solution to be super easy, but I think this bug takes the cake. Let's glance at the fixed demo and try to spot the change:

Due to the nature of the bug, the demo is available on a separate page

HTML Code:
<p>Lorem Ipsum</p>
<p>Dolor Sit Amet</p>
CSS Code:
h2,
p:first-letter {
    color: #00f;
    font-weight: bold;
    font-size: 200%;
    font-style: italic;
    text-decoration: underline;
}

Now everything is fine and spiffy. What exactly have I done to fix the problem? I simply moved the :first-letter pseudo-element selector to be the last one (i.e. no more commas and other selectors following it). Yes, it is in fact that simple.

Comments

Create new comment

Currently there are no posted comments.

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: