IE CSS Syntax Bug - GameDev.Net Discussion Forums

Add Forum to Favorites | Send Topic To a Friend | View Forum FAQ | Track this topic

Last Thread Next Thread

IE CSS Syntax Bug

Fuzztrek Member since: 3/6/2002 From: Edmonton, Canada

Posted - 9/19/2004 2:14:35 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.

User Rating: 1315 | Rate This User

Report this Post to a Moderator | Link

Fuzztrek Member since: 3/6/2002 From: Edmonton, Canada

Posted - 9/19/2004 2:26:35 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;}

User Rating: 1315 | Rate This User

Report this Post to a Moderator | Link

evolutional Moderator - Alternative Game Libraries Member since: 1/25/2002 From: Leeds, United Kingdom

Posted - 9/19/2004 2:51:24 PM

What DOCTYPE do you have specified?

User Rating: 1905 | Rate This User

Report this Post to a Moderator | Link

Anonymous Poster

Warning Level: 10%

Posted - 9/19/2004 2:55:07 PM

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

User Rating: 1015

Report this Post to a Moderator | Link

Fuzztrek Member since: 3/6/2002 From: Edmonton, Canada

Posted - 9/19/2004 2:56:35 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.

User Rating: 1315 | Rate This User

Report this Post to a Moderator | Link

Fuzztrek Member since: 3/6/2002 From: Edmonton, Canada

Posted - 9/19/2004 2:59:33 PM

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

User Rating: 1315 | Rate This User

Report this Post to a Moderator | Link

GroZZleR Member since: 1/26/2002 From: Whitby, Canada

Posted - 9/19/2004 5:43:04 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>
<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.

User Rating: 1469 | Rate This User

Report this Post to a Moderator | Link

Fuzztrek Member since: 3/6/2002 From: Edmonton, Canada

Posted - 9/19/2004 6:02:24 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).

User Rating: 1315 | Rate This User

Report this Post to a Moderator | Link

GroZZleR Member since: 1/26/2002 From: Whitby, Canada

Posted - 9/19/2004 6:23:12 PM

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.

User Rating: 1469 | Rate This User

Report this Post to a Moderator | Link

Fuzztrek Member since: 3/6/2002 From: Edmonton, Canada

Posted - 9/19/2004 6:47:58 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":

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

User Rating: 1315 | Rate This User

Report this Post to a Moderator | Link

All times are ET (US)

Last Thread Next Thread

Forum Rules:

You may not post new threads
You may post replies
You may not edit your posts
You may not use HTML in your posts

Jump To: