BytesizeCSS

The #id.class selector in IE6 28.08.2008 @ 02:11pm 3 comments

An example of what I am talking about can be seen below:

#feedback {
    background-color: #DFDFFF;
    border: 1px solid #4947BF;
    padding: 10px;
    }
#feedback.error {
    background-color: #FFBFC8;
    border-color: #AF4C59;
    }
#feedback.success {
    background-color: #CEFFBF;
    border-color: #64AF4C;
    }

<div id="feedback" class="success">
    <p>This is a success message</p>
</div>

Using the above XHTML markup you will notice that IE6 applies the #feedback styling and completely ignores the #feedback.success CSS. It is really quite strange how IE6 decides which rule to apply. For example, if my feedback div had the 'error' class it would apply the #feedback.error styling. So, in simple terms IE6 basically says "Check to see if the first #id.class rule matches and if so, apply it. If not, ignore the other #id.class rules and just apply the #id rule".

In order to get IE6 to pay attention to the other #id.class rules, you have to add another element inside your #feedback element that wraps it's containing markup and then tweak the CSS slightly... it's a pain, but it works. For example:

<div id="feedback" class="success"><div>
    <p>This is a success message</p>
</div></div>

Then the CSS should be tweaked to read as follows:

#feedback div {
    background-color: #DFDFFF;
    border: 1px solid #4947BF;
    padding: 10px;
    }
#feedback.error div {
    background-color: #FFBFC8;
    border-color: #AF4C59;
    }
#feedback.success div {
    background-color: #CEFFBF;
    border-color: #64AF4C;
    }

And voila! IE6 gets it... finally!