Multiple Id Class Bug

From CSS Discuss

Jump to: navigation, search

Contents

The multiple #id.class bug

Description

This bug is activated when an element is referenced to in the selector by its ID, and then by its Class to specify more stylings. For example you might have a DIV with an ID of 'photos', and then that div would have a different class on each page of your site, 'about', 'welcome', 'contact', 'news'. Your CSS might then look like this:

#photos.about{
   /* stylings */
}
#photos.welcome{
   /* stylings */
}
#photos.contact{
   /* stylings */
}
#photos.news{
   /* stylings */
}

Unfortunately, IE fails to render this CSS properly. In fact what it does do is render the first CSS Class (#photos.about) and then skip all the others.

Note that it seems IE does parse the other CSS rules, but only applies the first. If you set the element class to be all the classes until the required class, styles from each class rule will override styles from previous class rules. For example:

     <div id="photos" class="about welcome contact"><!-- --></div>

Will include styles from #photos.about, #photos.welcome and #photos.contact in that order. Note that you must include all the classes in the chain, or it won't work.

Test case and bug description

Workarounds

CSS Changes

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:

#photos{
   /*basics styles*/
}
   .about{
      /* stylings */
   }
   .welcome{
      /* stylings */
   }
   .contact{
      /* stylings */
   }
   .news{
      /* stylings */
   }

This might not always be as easy as it sounds, depending on your project.


The above described fix didn't seem to work for me. What did work in my case was creating an unnecessary sub div class="ieSux" within the orignial div and give it the intended stylings. For example:

HTML

  <div id="photos" class="about">
    <div class="ieSux">
      <!-- content -->
    </div>
  </div>

CSS

#photos{
   /*basics styles*/
}
#photos.about .ieSux {
      /* stylings */
}
#photos.welcome .ieSux{
      /* stylings */
}
#photos.contact .ieSux{
      /* stylings */
}
#photos.news .ieSux{
      /* stylings */
}

Hopefully that makes sense?


separate <style> blocks

Try placing the multiple selectors into separate <style> blocks. Worked for me in this case:

#bird.yellow { filter: ....etc }
#bird.orange { filter: ....etc }

this didn't work, only the first of the two displayed, rearranging the two lines simply changed which one worked.

like this it was fine:

<style>
#bird.yellow { filter: ....etc }
</style>
<style>
#bird.orange { filter: ....etc }
</style>
Personal tools