Sign in to follow this  
Fuzztrek

[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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
Share on other sites
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).

Share this post


Link to post
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 this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this