Is this an IE bug?

**galen** · Oct 23, 2007 08:29

http://britneyspearsbelieve.com/html/

Everything works fine in firefox. XHTML and CSS are both valid.

The problem is in IE

Code:

#container { width: 833px; height: 597px; margin: 0 auto; position:relative;}
	#container.inspiration {background: url(../_images/inspiration-bg.jpg) no-repeat;}
	#container.home {background: url(../_images/home-bg.jpg) no-repeat;}
	#container.fragrance {background: url(../_images/fragrance-bg.jpg) no-repeat;}
	#container.stores {background: url(../_images/stores-bg.jpg) no-repeat;}
	#container.extra {background: url(../_images/extra-bg.jpg) no-repeat;}
	#container.shop {background: url(../_images/shop-bg.jpg) no-repeat;}
	#container.signup {background: url(../_images/signup-bg.jpg) no-repeat;}
	#container.design {background: url(../_images/design-bg.jpg) no-repeat;}
	#container.collection {background: url(../_images/collection-bg.jpg) no-repeat;}

The line (in this case .inspiration) that comes after the #container style works fine. All lines after the first display no background, or anything style I add in there. So if i delete the .inspiration line, the .home line will work.

Any ideas?

**funktifyknow** · Oct 23, 2007 08:42

I see a bunch of boxes with color and text in IE6. Is that what I should be seeing?

**Paul O'B** · Oct 23, 2007 08:47

HI,

Yes its a bug in ie6 and under where it doesn't understand the dot notation of concatenating classes.

IE6 treats #container.class1 and #container.class2 etc as basically the same thing so only one of them actually gets actioned. Therefore you cannot use this method at all if you want to support ie6.

It looks as though you can simply remove the concatenated elements.

e.g.

Code:

    .inspiration {background: url(http://britneyspearsbelieve.com/html/_images/inspiration-bg.jpg) no-repeat;}
    .home {background: url(http://britneyspearsbelieve.com/html/_images/home-bg.jpg) no-repeat; border: 90px solid #000;}
    .fragrance {background: url(http://britneyspearsbelieve.com/html/_images/fragrance-bg.jpg) no-repeat;}
    .stores {background: url(http://britneyspearsbelieve.com/html/_images/stores-bg.jpg) no-repeat;}
    .extra {background: url(http://britneyspearsbelieve.com/html/_images/extra-bg.jpg) no-repeat;}
    .shop {background: url(http://britneyspearsbelieve.com/html/_images/shop-bg.jpg) no-repeat;}
    .signup {background: url(http://britneyspearsbelieve.com/html/_images/signup-bg.jpg) no-repeat;}
    .design {background: url(http://britneyspearsbelieve.com/html/_images/design-bg.jpg) no-repeat;}
    .collection {background: url(http://britneyspearsbelieve.com/html/_images/collection-bg.jpg) no-repeat;}

If you do need that page uniquely identified then you will need to put the id on the body tag and the class on an inner nested wrapper so you can address it as #id .class (note the space before the dot) in the normal way.

Hope that makes sense

**galen** · Oct 23, 2007 09:39

That fixed it. Thanks. There was another part of my stylesheet that had #id.class but that worked in IE. Are there certain cases where it does work? do you have a link to where i could read about this, or do you know the "name" of the bug so i can google it.

Thanks again.

**Paul O'B** · Oct 23, 2007 11:54

Hi,

Yes it will work if it is only defined once or if you are using only the first instance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#test.red {background:red;}
#test.blue{background:blue}
#test.green {background:green;}
</style>
</head>
<body id="test" class="red">
<!-- <body id="test" class="green"> -->
<!-- <body id="test" class="blue"> -->
<h1>Ie6 Classname bug</h1>
<p>Only the first #test.classname will affect this page. e.g. #test.red</p>
<p>Change the classname in the body and you will see that no style gets applied. Or alternatively change the order of the stylesheet and the rule that comes first is the one that gets applied.</p>
</body>
</html>

I think I was one of the first to document the bug and there are many threads in the forums but there is some more information here.

IE6 also has problems with multiple classes joined by dot notation and gets those wrong also.

User Tag List

Thread: Is this an IE bug?

Thread Tools

Display

Is this an IE bug?

Bookmarks

Bookmarks

Posting Permissions