IE6 picks "wrong" selector?

I've put up a testcase at http://forefront-tech.net/pub/badsel.html
that has me baffled.

The basic idea is that a small piece of Javascript adds a class name
"huvr" to an element on mouseover, and then removes it on mouseout. CSS
for the "huvr" class sets various display effects. Pretty basic DHTML
technique.

This all seems to work fine in Gecko (and I'm assuming in other
standards-based engines). It breaks in strange ways in IE6.

Take a look at the example above. The correct effect for a hover is to
turn the text color of the hovered element green, and to also set
various background colors for various other extant classnames.

In IE6, I get the result of the browser choosing the last-specified CSS
rule -- even though the other class is not on the hovered element.
Removing that rule, IE then picks the last remaining rule, etc.

WTF? Am I missing something?

Thanks,

Rick

<rickmorrison@gmail.com> wrote in message
news:1130954188.408306.309500@f14g2000cwb.googlegr oups.com...[color=blue]
> I've put up a testcase at http://forefront-tech.net/pub/badsel.html
> that has me baffled.
>
> The basic idea is that a small piece of Javascript adds a class name
> "huvr" to an element on mouseover, and then removes it on mouseout. CSS
> for the "huvr" class sets various display effects. Pretty basic DHTML
> technique.
>
> This all seems to work fine in Gecko (and I'm assuming in other
> standards-based engines). It breaks in strange ways in IE6.
>
> Take a look at the example above. The correct effect for a hover is to
> turn the text color of the hovered element green, and to also set
> various background colors for various other extant classnames.
>
> In IE6, I get the result of the browser choosing the last-specified CSS
> rule -- even though the other class is not on the hovered element.
> Removing that rule, IE then picks the last remaining rule, etc.
>
> WTF? Am I missing something?[/color]

All I get is the element that the cursor is over turns red, with white text,
under all circumstances in IE 6. I haven't looked with anything else.

Given what you're trying to do, why not just define each element with an <a>
tag, and then define an a:hover psuedo-class?

What I mean by "removing that rule" is to actually edit the example to
remove the last style rule. IE then picks whatever rule now falls last.

AFAICT, the reason this happens is because IE6 support for multiple
class selectors is (surprise, surprise) broken, and it simply ignores
any class selectors except the last selector, in other words, for IE:

TD.thisclass.thatclass == TD.thatclass

I don't want to use <a> tags, because that invokes *another* IE bug in
which the hover effect happens only on mouseover the text itself, not
the entire element. Er, until the element is clicked, at which point it
seems to work OK.

There are, as usual, ugly workarounds. But most of these seem only to
work with elements that have two possible classes. Working with three
possible classes, as I do, runs into apparently new bizzare and
terrible territory.

No wonder I have gray hair.


Rick