IE6 CSS List bug/mystery

ednark

Ran acrross frustrating issue (bug?). IE6 does not seem to want to honor my second css declaration on the element I want. Strangely, it works properly in IE5 and IE7. Is anyone familiar with the bug I'm tickling or know a workaround?

PS. I have doubled up some IDs here for the example but the bug appears even when there is only one element for an Id.

<html>
<head>
<style type="text/css">
li {
  font-family: "Andale Mono", "Monotype.com", monospace;
  font-weight: bolder;
  white-space: pre;
  color: white;
}
pre {
  margin: 0; padding: 0; border: 0;
}


ul li.classname-1 {
  background-color: green;
}
ul li.classname-2 {
  background-color: red;
}

/* THIS DOESNT WORK IN IE6
 * WORKS IN FF2, OPERA9, SAFARI3, IE7, and IE5
 * IE6 responds to whichever one is first
 * IE6 ignores the second one
 */
ul li#ID4.other-classname-1 {
  background-color: yellow;
  color: black;
}
ul li#ID4.other-classname-2 {
  background-color: gray;
}

</style>
</head>
<body>

<ul>
  <li id="ID3" class="classname-1 other-classname-1"><pre>GREEN:  #ID3.classname-1.other-classname-1</pre></li>
  <li id="ID3" class="classname-2 other-classname-2"><pre>RED:    #ID3.classname-2.other-classname-2</pre></li>
  <li id="ID4" class="classname-1 other-classname-1"><pre>YELLOW: #ID4.classname-1.other-classname-1</pre></li>
  <li id="ID4" class="classname-2 other-classname-2"><pre>GRAY:   #ID4.classname-2.other-classname-2</pre></li>
</ul>

</body>
</html>

dougal85

IE struggles with complex CSS selectors. like;

ul li#ID4.other-classname-1 {

since you are refering to the ID why not just do;

#ID4.other-classname-1 {

ednark

Leaving out the "ul li" still doesn't work. I certainly hope mixing tag, id, and classname selectors isn't too complex for IE6, thats just dumb if it's true.

This appears to be a bug where IE6 sees an ID selector and ignores everything else. Perhaps it is seeing my two declarations as equal and so ignores the second one!?

🙁

Weedpacket

Um .... id attributes are supposed to be unique within a document.

dougal85

ednark wrote:
I certainly hope mixing tag, id, and classname selectors isn't too complex for IE6, thats just dumb if it's true.

Never underestimate how many problems IE6 has!

when you do #id.classname IE6 has trouble, without the space like that its when a classname is in elements with the id.

if you do #id .classname then it looks for child elements with the classname.

I just noticed you don't have a space between li and #id - I would try adding one there too.

Perhaps it is seeing my two declarations as equal and so ignores the second one!?

Two declarations of what? As weedpacket said ID's need to be unique within the document. Generally speaking if its not, the first one will be effected only.

Anyway, I think this should work;

ul li .other-classname-1 {
background-color: yellow;
color: black;
}
ul li .other-classname-2 {
background-color: gray;
}

ednark

Two declarations of what? As weedpacket said ID's need to be unique within the document.

I know this, and it's not a problem. I had to use multiple IDs in my example. There are two stylesheet declarations for one ID, that is what I was referring too.

Generally speaking if its not, the first one will be effected only.

This may be true about finding elements in the DOM, but you should be allowed to set up more than one style for a uniquely named element. The render should take into account CLASSNAME even if and ID is also specifiedl.

What I'm trying to say is:

If you see ID1 and it also has a classname of other-classname-1 then show yellow
If you see ID1 and it also has a classname of other-classname-2 then show it gray

There will be only one ID1 element, the stylesheet should know that there are two different way I might ask to show it.

ul li#ID1.other-classname-1 { yellow }
ul li#ID1.other-classname-2 { gray }
<ul><li ID="ID1" CLASSNAME="other-classname-2">I should be gray but im not</li></ul>

The solution I had to use, which is perfectly fine, was to throw in a fake tag used only for the styling. But this wasn't what I wanted to do nor should be forced to do. Notice the space as was mentioned before.

What I'm saying here is:

If you see ID1 and it's child has a classname of other-classname-1 then show yellow
If you see ID1 and it's child has a classname of other-classname-2 then show it gray

ul li#ID1 .other-classname-1 { yellow }
ul li#ID1 .other-classname-2 { gray }
<ul><li ID="ID1"><span CLASSNAME="other-classname-2">I am gray yay</span></li></ul>