ansaurus

Question

Answer 1

+1 A:

You may want to post your entire stylesheet and markup somewhere. My guess is you have some invalid statements elsewhere as well, and some are getting applied weirdly. You may want to validate your css and markup as well: http://jigsaw.w3.org/css-validator/.

Check this link out too. Seems like some IE gotcha in there: http://www.ryanbrill.com/archives/multiple-classes-in-ie/

Typeoneerror 2009-11-30 02:05:22

I just re-checked, the markup is valid, and CSS is complaining only about opacity and overflow. I don't have the time right now to post the whole stylesheet and markup from the development server, but will do that later.

Pekka 2009-11-30 02:10:49

Answer 2

A:

every body element on every page.

So you have multiple body elements on the page? That's not normal. It's hard to say without seeing the HTML, but one thing to keep in mind is, body.expertise.deutsch .container is not an immediate child selector. So imagine some HTML like this (I guess):

<body class="expertise esperanto">
    <div class="container">I'm 590px wide</div>

    <body>
        <div class="container">I'm also 590px wide</div>
    </body>
</body>

Because container has some parent (however remote) with class of "expertise esperanto" it picks up the style. My advice is, don't use multiple body tags in the same page. Also, if you have two .container elements and only one should pick up the style, perhaps give them different classes.

darkporter 2009-11-30 06:57:45

No, I was referring to every body element in every page that includes the stylesheet. Will clarify the question.

Pekka 2009-11-30 12:08:21

Answer 3

A:

Actually the body tag has two seperate classes applied to it in your code, they are not joined as one but rather reside at the same depth.

body.expertise
body.deutsch

So your code...

body.expertise.deutsch .container
  {
    width: 590px;
  }

Would only work if the class was:

<body class="expertise.deutsch">

I'm a bit unsure of a good work around at this time for your problem...

You may want to check if their are any other unique class identifiers you can rely on to narrow down the css.

Ultimately its more headaches then it is worth to use multiple classes per element if you can avoid it. I generally setup my pages like <body><div id="body"> </div></body> so I have a second outer container to play with for css for reasons like this.

Kales 2009-11-30 09:40:55

No, the body has two classes applied to it, "expertise" and "deutsch". The notation for that is "expertise deutsch" and as far as I know, there are no exceptions. Correct me if I'm wrong of course.

Pekka 2009-11-30 12:09:13

that is precisly my point, you cannot run css that requires the two at the same time as you wrote, by simply going [element].[class1].[class2] this is not valid.since the classes remain at the same level you can only point to one or the other.

Kales 2009-11-30 19:59:16

correction, I mean it will not be valid if you are trying to support IE6 still

Kales 2009-11-30 20:04:57

Answer 4

+5 A:

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).

Olly Hodgson 2009-11-30 12:24:48

The article is interesting - @typeonerror posted it as well - but it talks about IE6 only, and I get it in 7 and 8 as well. I will post the full code later, maybe somebody is able to spot something. It works for me now so there is no pressing problem but I think it's curious enough to try to solve, even though it may end in embarrassment for me because I overlooked something :)

Pekka 2009-11-30 12:36:28

Yeah, a bit more reading suggests that IE7 and 8 support multiple class selectors.

Olly Hodgson 2009-11-30 12:54:10

@Pekka Gaiser No such thing as embarrassment for asking a question, no matter HOW obvious, often the best way to find issues is to "explain in detail" how something works to someone else - and of course if that person has ANY input, it often gives you a faster leap to a resolution, and at the least, teaching someone else is often the best way to learn in depth any subject.

Mark Schultheiss 2009-11-30 12:55:10

Answer 5

+1 A:

I tested your example in ie7 but cannot reproduce your findings:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      .container{
        height: 200px;
        background-color: red;
      }
      body.expertise.deutsch .container {
        background-color: blue;
      }
    </style>
</head>
<body class="expertise english">
<div class="container">
</div>
</body>
</html>

Shows a red div, like it should. And when you change the second body class from english to deutsch, the div is blue.

The only browser that should have problems with this code is ie6 as it doesn't understand multiple classes in css and only applies the last.(which would colour the page blue if only the class deutsch was applied)

Not sure…

Thomas Maas 2009-11-30 16:05:49

ansaurus

tags:

views:

answers:

Is this a IE Bug or am I stupid?

related questions