I've encountered this bug a few times and unfortunately I can't seem to find a "one-liner" to explain it, so I've had little luck searching for a fix. It occurs in Internet Explorer (version 6, PC). The problem is that IE ignores all #id.class CSS rules after the first rule. For example, if you have:

#test.temp1  {background-color: red;}
#test.temp2  {background-color: blue;}
#test.temp3  {background-color: orange;}
#test.temp4  {background-color: black;}

Only the first rule (div#test.temp1 {background-color: red;}) will be recognized and used. The obvious workaround is to remove the id selector and use unique class names. For instance, I've often had to do something like the following: Basically, multiple classes with the same name for different id's. So now I'll have to do something different, using only classes, like this: Which works but is ever so cryptic ;) (what poor examples...) At any rate, I really hope Microsoft updates IE's rendering engine SOOON! At least we have documentation (BugZilla) for Mozilla bugs... *sigh* So anyway, just wondering if anyoen can think of a workaround.

I might add that there is no problem when you use multiple classes on a tag instead of an id.

For instance, the following works fine:

body.white {color: white;}body.red {color: red;}body.blue {color: blue;}

What DOCTYPE do you have specified?

I've been testing with but I'll try changing it and see if that makes a difference.

hmm.. buggy. anyway, I mean that I've been testing it with loose but I'll try changing it and see if that makes a difference.

I've tried different ones, but nothing seems to make a difference, unfortunately.

Put a space between your parent element and your class name.



Page works fine for me in IE and Firefox. I've always put a space between them though, so maybe I'm the one that's wrong.

Quote:Original post by GroZZleR
Put a space between your parent element and your class name.

*** Source Snippet Removed ***

Page works fine for me in IE and Firefox. I've always put a space between them though, so maybe I'm the one that's wrong.

The bug occurs with #id.class, not tag.class. If you put a space between the #id and .class, none of the rules work in IE (not even the first one).

What version of IE?



This works just fine for me in IE and Firefox. Unless I'm missing something here.

The problem is that while IE applies the class to the child, it doesn't apply the class to the parent as well.

Example 1:

The following rule:

DIV#white {color: white;}

Applies color: white; to both DIV tags in the document with the id as well as child elements of the DIV with id "white":

<div id="white">this is white <span id="white">this is also white</span>

However, if you change the rule just slightly (notice the space):

DIV #test {color: white;}

This rule applies color: white; only to the child elements of any DIV tag. So:

<div id="white">this is not white <span id="white">this is white</span>

Now, that was using tag and id. My problem is with id and class. So Example 2:

The following rule:

#div.white {color: white;}

Applies color: white; to tags with id "div" AND class "white" in the document as well as child elements of the tag with class "white" (regardless of id):

<div id="div" class="white">this is white <span class="white">this is also white</span>

However, if you change the rule just slightly (notice the space):

#div .white {color: white;}

This rule applies color: white; only to the child elements of any tag with id "div". So:

<div id="div">this is not white <span class="white">this is white</span>

Perhaps this is a flaw in the syntax of CSS. As far as I know, there is no way to exclusively limit a rule to a single tag with BOTH id and class (or tag, id and class). Anyway, all is well and good until you add more than one class rule. Example 3:

The following rule (in IE only):

#div.white {color: white;}#div.blue {color: blue;}

Applies color: white; to tags with id "div" AND class "white" in the document as well as child elements of the tag with class "white" (regardless of id). Ignores the second rule:

<div id="div" class="white">this is white <span class="white">this is also white</span>

<div id="div" class="blue">this is black (default) <span class="blue">this is also black (default)</span>

If you change the rule just slightly (notice the space):

#div .white {color: white;}#div .blue {color: blue;}

This rule applies color: white; only to the child elements of any tag with id "div" AND it applies color: blue; to the child elements of any tag with id "div". So:

<div id="div">this is not white <span class="white">this is white</span>

<div id="div">this is not blue <span class="blue">this is blue</span>

Hmm.. I think that's clear.