IE6 - DIV with class and ID

Question

I have the following HTML

<div id="nav" class="red">

some more HTML here

</div>

The following CSS:

#nav.red {
background: red;
}

However this does not work in IE6, can anyone help?

Answer 1

just use

#nav

.red { 
    background: red; 
} 

Answer 2

There is a mistake. Try this:

#nav, .red {
background: red;
}

Answer 3

At this moment it is unknown why this is the case, and there is no real 'fix'. You just have to work around it by changing your CSS. For example:

#nav{
   /*basic styles*/
}
   .red{
      /* stylings */
   }
   .blue{
      /* stylings */
   }
   .contact{
      /* stylings */
   }
   .news{
      /* stylings */
   }

See here for more, and here for a test page.

Answer 4

You could use ie7.js to fix the bug. It makes IE6 behave more like IE7. It should fix atleast the multiple classes-problem, so might work for #id.class also. More info about ie7.js

Otherwise, you have to work around it. For example

<div id="nav">
   <span class="red">hep</span>
   <span>hep</span>
</div>

and CSS

#nav {}
#nav span {color:#000;}
#nav .red {color:#f00;}

Or if you can, you could just do the colour-changing with the .red and use #nav for the common layout-stuff. eg.

#nav {float:left; padding:10;}
.red {background: #f00;}
.blue {background: #00f;}