🔒 Locked

[web] IE CSS Syntax Bug

Started by Fuzztrek Sep 19, 2004 at 1:14 PM 8 replies 1.4k views

Original Post

Sep 19, 2004 at 1:14 PM

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.

Fuzztrek

Sep 19, 2004 at 1:26 PM

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;}

evolutional

Sep 19, 2004 at 1:51 PM

What DOCTYPE do you have specified?

Fuzztrek

Sep 19, 2004 at 1:56 PM

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.

Fuzztrek

Sep 19, 2004 at 1:59 PM

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

GroZZleR

Sep 19, 2004 at 4:43 PM

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>Testing!
Testing!
</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.

Fuzztrek

Sep 19, 2004 at 5:02 PM

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).

GroZZleR

Sep 19, 2004 at 5:23 PM

What version of IE?

<html><head>	<style>		#content		{			background-color: #0000FF;		}		#content .red		{			color: red;		}		#content .yellow		{			color: yellow;		}	</style></head><body>	Works fine.	Works fine.
</body></html>

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

Fuzztrek

Sep 19, 2004 at 5:47 PM

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":

this is white this is also white

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:

this is not white this is white

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):

this is white this is also white

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:

this is not white this is white

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:

this is white this is also whitethis is black (default) this is also black (default)

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:

this is not white this is whitethis is not blue this is blue

Hmm.. I think that's clear.

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.