hasLayout.net

Affected Versions

This bug affects: IE6

Symptoms

!important keyword is being ignored when the same rule is set again later in the same ruleset

Date of the Tutorial

Sun Aug 9 07:51:27 2009

Description

I don't have any good IE bugs to write about right now, so I've decided to post this one. This bug will only rarely bite you due to its triggers and it's quite often used to target IE6 without the use of conditonal comments. Let's take a look:

Demo

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

HTML Code:

<div></div>

CSS Code:

div {
    width: 500px;
    height: 500px;
    background: #f00!important;
    background: #00f;
}

In sane browsers the background color of the <div> will be red, while in IE6 it will be blue. What happens is that IE6 ignores the !important set on our background rule because the same rule is specified again in the same ruleset.

Solutions

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

Solution (Clean Solution)

Date of the Solution

Sun Aug 9 07:57:08 2009

Fixed Versions

All of the affected

Description

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

HTML Code:

<div></div>

CSS Code:

div {
    width: 500px;
    height: 500px;
    background: #f00!important;
}

The solution seems obvious in this case. Simply remove your duplicate rule that follows the rule with !important. Easy as pie, isn't it?

Comments

Currently there are no posted comments.

Donate / Buy My Books

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

Alternatively, purchase my book: