# [web] IE CSS Syntax Bug

## Recommended Posts

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:
#test1.temp1  {background-color: red;}
#test1.temp2  {background-color: blue;}
#test1.temp3  {background-color: orange;}
#test1.temp4  {background-color: black;}

#test2.temp1  {background-color: purple;}
#test2.temp2  {background-color: white;}
#test2.temp3  {background-color: cyan;}
#test2.temp4  {background-color: green;}

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:
.t1temp1  {background-color: red;}
.t1temp2  {background-color: blue;}
.t1temp3  {background-color: orange;}
.t1temp4  {background-color: black;}

.t2temp1  {background-color: purple;}
.t2temp2  {background-color: white;}
.t2temp3  {background-color: cyan;}
.t2temp4  {background-color: green;}

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.

##### Share on other sites
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;}

##### Share on other sites
What DOCTYPE do you have specified?

##### Share on other sites
I've been testing with but I'll try changing it and see if that makes a difference.

##### Share on other sites
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.

##### Share on other sites
I've tried different ones, but nothing seems to make a difference, unfortunately.

##### Share on other sites
Put a space between your parent element and your class name.

<html><head>	<style>		div .white {color: white;}		div .red {color: red;}		div .blue {color: blue;}	</style></head><body><span class="red">Testing!</span><br><div><span class="red">Testing!</span></div></body></html>

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.

##### Share on other sites
Quote:
 Original post by GroZZleRPut 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).

##### Share on other sites
What version of IE?

<html><head>	<style>		#content		{			background-color: #0000FF;		}		#content .red		{			color: red;		}		#content .yellow		{			color: yellow;		}	</style></head><body><div id="content">	<span class="red">Works fine.</span>	<span class="yellow">Works fine.</span></div></body></html>

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

##### Share on other sites
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.

## Create an account or sign in to comment

You need to be a member in order to leave a comment

## Create an account

Sign up for a new account in our community. It's easy!

Register a new account

• ### Forum Statistics

• Total Topics
628285
• Total Posts
2981836

• 10
• 10
• 10
• 11
• 17