IE6 - DIV with class and ID

I have t开发者_如何学Pythonhe 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?

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.

just use

#nav

.red { 
    background: red; 
} 

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;}

There is a mistake. Try this:

#nav, .red {
background: red;
}