IE8 not accepting multiple classes in quirks mode?

Question

I'm running into a situation where IE8 appears to be dropping CSS selectors. I find this hard to believe, but I can't figure out what is happening.

In a css file I have this declaration:

#srp tr.objectPath.hover td {
    border-top:none;
}

However, when I inspect the file in IE8 through the built-in developer tools, the declaration is modified to this:

#srp TR.hover TD {
    border-top:medium none;
}

I don't care about the change in case or the restatement of the rule, but dropping the '.objectPath' is a real problem because it targets the rule more broadly than I intend.

I note that this page is, and must stay in, Quirks mode.

Any ideas what is happening?

Thanks!

Answer 1

tr.objectPath.hover is not correct syntax if you are trying to use the hover pseudo-class. The correct syntax would be with a colon (ie tr.objectPath:hover). When the machine is reading your code, it reads objectPath as the tr's class name, but then when it gets to hover it gets rid of the old class name and replaces it with the hover class (whether there are actually any elements belonging to that class or not. Also, if this is the case, then I don't see what you are trying to do by referring to the child of an instance of :hover.

It you are in fact using hover as a class name (which I wouldn't recommend as it could be confusing to people reading your code) and you want the CSS to apply to the td children of a tr that is of both the objectPath and hover classes, you might consider just creating a new class for elements that are of both classes and using that instead (ie. #srp tr.newClass td).

EDIT: Looking further into the matter, it appears that this is (yet) a(nother) known bug in IE. I have tested it out in IETester and it seems to exist in all versions of IE. The only solution I could see on your end is very very messy:

First, it would require using JavaScript in your CSS since you don't have access to anything else. This is possible but very prone to bugs.

Second, it would require creating a getElementsByClass function in that JavaScript that could take multiple class names as parameters. This would be a very sizable chunk of code.

Finally, you would probably want to look into specifying this code to be used only by IE so that users of other browsers don't have to deal with any potential problems from all this stuff.

To clarify, I would NOT recommend doing this. Instead, I would suggest contacting someone who does have access to the HTML source code (assuming you are actually working in partnership with them) so that they could apply the much simpler fix of adding an objectPathhover class to the tr elements that belong to both classes or even to their td children.

Answer 2

It looks like you've got some incorrect syntax in your declaration, but its hard to tell exactly what you're doing. Are you trying to match to a hover state or is there a class actually called 'hover' ?

If going for the state, try:

#srp tr.objectPath:hover td {
    ...
}

If there is another class, you may need 2 separate declarations:

#srp tr.objectPath td {
    ...
}

#srp tr.hover td {
    ...
}

Answer 3

As an aside, the hover pseudo class will not work in quirks mode (except for anchors)

Answer 4

In Quirks Mode IE 8 renders the page and treats the DOM as IE 5.5 would render. That's the reason IE 8 in Quirks Mode ignores the multiple classes. It is not a bug in IE 8, if you want your page to be parsed and rendered properly, then you must have a proper DOCTYPE set to render the page in Standards Mode.