CSS rule works in IE but not in Chrome/Firefox

Question

The typo in my HTML has been corrected. The question is still valid.

I have this HTML structure:

<div id="div1" class="div1">
     <div id="div2" class="div2">
          <h2 class="h2"> Hello </h2>
     </div>
</div>

And a CSS that says:

.div1.h2 {
    font-size: 1.6em;
    font-weight: bold;
    color: #808080;
    margin: 0 0 1em 0;
}

With IE the CSS is applied to h2 but not with Chrome and Firefox

Anything I'm missing?

Answer 1

All of your classes are missing the closing quotes.

Validate your HTML to prevent further oddities.

EDIT: (based on corrected HTML)

Due to inconsistent browser interpretation, .div1.h2 could mean:

1. All elements with class div1 and class h2 (which, if the browser is correct, selects zero elements), or
2. All elements with class h2 with ancestor elements of class div1 (which, if the browser behaves, selects your <h2> )

I think IE is treating .div1.h2 as in the latter scenario. Add a space in your selector: .div1 .h2 .

Answer 2

1. Correct all syntax errors. (missing quotes after class attributes)
2. There is no H1 anywhere

This works

  .div1.h2 { font-size: 1.6em; font-weight: bold; color: #808080; margin: 0 0 1em 0; } 

or this

  h2, .h2 { font-size: 1.6em; font-weight: bold; color: #808080; margin: 0 0 1em 0; } 

Answer 3

If you are running a very old version of IE (IE6, I think), then there is an IE bug that might be at play here.

The bug in question is that when you have a CSS selector with multiple classes applying to the same element, IE6 will only see the last of those class names.

So .div1.h2 is seen by IE6 as just .h2 , whereas other browsers will see .div.h2 .

The element only has a single class name on it, that being h2 , so IE6 will match it on the element, but other browsers won't, because they're looking for class="div2 h2" -- ie both class names on the same element.

This explains why you may be seeing a difference between browsers.

It doesn't explain why you are using this selector in the first place. Given the HTML code you've quoted, I doubt you actually intended to look for an element with both those classes; you probably want to look for an element with div2 that has another element with h2 inside it.

If that's what you wanted, then it is your selector that is incorrect. In order to do that, you need to add a space between the two classes.

.div2 .h2 { .... }
     ^
  note the space here

Alternatively, you could use a > symbol instead of the space, which is a more precise alternative that would suit your HTML code. Unfortunately, if you're using IE6, you can't use > as it isn't supported.

Of course, if you're still stuck with IE6, then there will be a whole stack of other things that are broken. My advice is to upgrade your browser like everone else has.

Answer 4

Anyone ending up here with an external css sheet not working in Chrome/Firefox but does in IE check encoding of the css and html file. I found Chrome needed css in UTF-8 but firefox also needed the html file in the utf-8.