I have several pages and one stylesheet.
The page bodies get two classes: Their name, and the language.
For example:
<body class="contact english">
Now, in the stylesheet, I have an special rule for the german version of the “expertise” page:
body.expertise.deutsch .container
{
width: 590px;
}
In IEs 6, 7, and 8, this style gets consistently applied not only to
<body class="expertise deutsch">
but to every body element on every page.
When I remove the “body”:
.expertise.deutsch .container
{
width: 590px;
}
it works as intended and applies only to “expertise deutsch”.
Am I daft? Blind? Overlooking the obvious?
Is this intended behaviour, a known bug, or neither?
I can’t find anything except that from IE 8, IE is supposed to handle multiple selectors.
Because it has been misunderstood: “Every body element” of course refers to separate body elements on separate pages that all include the same style sheet.
As I understand it, IE6 doesn’t understand the difference between body.expertise.deutsch and body.deutsch. It only picks up the last class in the chain. Ryan Brill has more on it here.
I’m not sure if IE7 or 8 fixed it, but if they did you’ll probably need to be in standards mode for it to work (easiest way is to include a strict or HTML5 doctype at the top of the document).