hasLayout.net

Affected Versions

This bug affects: IE8

Symptoms

rules inside :first-letter pseudo-class are completely ignored when !important modifier is used

Date of the Tutorial

Tue Jul 28 09:02:11 2009

Description

Here's a rare bug. You're using :first-letter pseudo-element and (for some strange reason) add !important to strengthen the specificity of the rule. All browsers play along fine, but IE8 decides to rebel and ignores the rule completely - not just the !important, but the entire rule. You then start adding second and third !important in hopes to fix the problem, alas, that's not the way to go :) To the demo!

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 {
    color: #aaa;
    font-weight: normal;
    font-style: normal;
}
p:first-letter {
    color: #00f!important;
    font-weight: bold!important;
    font-size: 200%!important;
    font-style: italic;
    text-decoration: underline;
}

In IE8 the first letter of the paragraph will be infact italized and underlined, showing the not the entire :first-letter ruleset is ignored. However, three other rules with !important set on them are ignored. As I've mentioned earlier, it doesn't matter that your rules with !important would be overriding a less specific rule or not.

Solutions

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

Solution (Clean Solution)

Date of the Solution

Tue Jul 28 09:22:57 2009

Fixed Versions

All of the affected

Description

The only known to me solution involves simply removing the cause of the bug. Let's take a look at the fixed demo:

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

HTML Code:

<p>Lorem Ipsum</p>
<p>Dolor Sit Amet</p>

CSS Code:

p {
    color: #aaa;
    font-weight: normal;
    font-style: normal;
}
p:first-letter {
    color: #00f;
    font-weight: bold;
    font-size: 200%;
    font-style: italic;
    text-decoration: underline;
}

Nothing has changed except for the fact that I got rid of the !important modifiers on the rules - viola, all of them are now taken by IE8. Since p:first-letter { } is of higher specificity than p { } we do not need any extra magic for our rules inside :first-letter pseudo-element to take effect. If your case is different, try to make the :first-letter ruleset more specific by other means.