No Multiple-Class Support in IE6

IE6 was mean to me again today.

For the past few years, I haven’t had too much trouble out of IE — only because I’ve become familiar with its quirks. I know that floats need display: inline to fix the margins, position: relative or zoom: 1 needs to be added to misbehaving elements to trigger hasLayout, and height: 1% will make boxes stretch to contain their floated children. That’ll fix IE6 90% of the time. But today, I struggled with something I hadn’t run into before: Lack of Multiple Class Support

I was trying to reference elements with multiple classes in my CSS:

.aside.login {
  properties: values;
  ...
}

All the other browsers (including IE7) work with this just fine. IE6, however, only sees one class. I wish I had known about this before I spent most of my afternoon trying to figure out why rules were getting applied to things they shouldn’t have.


comment feed And the ensuing discussion…

  1. 1

    Nov 18th, 2008 at 11:17 pm Trey Piepmeier

    It’s funny, I had never really used multiple-class (or even class + ID) until recently because I just assumed it didn’t work in IE 6. Luckily, several of the things I’ve been working on lately don’t necessarily have to work in IE 6. Livin’ in the future, baby!

    My advice? Just patch IE 6 with jQuery.

  2. 2

    Nov 21st, 2008 at 6:35 am Sugarenia

    I think this only hurts when you specify the same property for both classes.

    For example, if you set a background image on the first class and you overwrite it on the second. Then it will only load the first (or last, I’m not quite sure) one.

    I think it works for different properties though.

    The solution? Ugly but effective. Use one class (i.e. .img-center) instead of two (.img.center). Sigh.

  3. 3

    Sep 18th, 2009 at 10:57 am yareckon

    IE6 takes the last class. .one.two.three is the same as .three

  4. 4

    Jan 5th, 2010 at 11:42 pm Tejus Pratap

    IE 6 expressions can be used for using multiple css classes. An example can be found in the following link. http://www.tejuspratap.com/main/content/using-multiple-css-classes-ie6

  5. 5

    Jan 29th, 2010 at 9:26 am nm2

    Hey everybody,

    I found a way to solve this problem, and it works fine here.

    I have: menu a#menu1.selected,

    menu a#menu1.current{

    background: url('../images/btn_hov.jpg') no-repeat;
    

    }

    So obviously IE6 recognizes only the .curent class

    I have included separate file for IE6 into the header: In this file I just repeat the code but only with the class that is being ignored: menu a#menu1.selected{

    background: url('../images/btn_hov.jpg') no-repeat;
    

    }

    I hope that helps ;) Happy coding!

  6. 6

    Jan 29th, 2010 at 9:28 am nm2

    menu a#menu1.selected, #menu a#menu1.current

  7. 7

    Aug 12th, 2010 at 10:57 am Raz

    You’re all a bunch of noobs

  8. 8

    Jan 19th, 2011 at 12:21 pm Maurice

    Raz- And what helpful advice have you to share with us, today?

  9. 9

    Feb 2nd, 2012 at 3:44 pm Spencer Goldade

    There’s a Javascript library available from Google that was able to fix this problem for me. It also fixes a lot of other IE problems. A huge time saver rather than coding out separate stylesheets or styles for IE.

    http://code.google.com/p/ie7-js/

Comments are closed.



Additional Resources


Tumblelog

Tumblr

Tumblr

Delicious

Delicious

Instructional

Recent Instructional Articles

Slicehost (and Linode) LAMP Cheatsheet

17.11
16

A quick list of steps I use to set up a LAMP server on Slicehost or Linode.

Terminal Tip: Prevent Creation of Mac Dot Files

07.08
2

An environment variable can prevent creation of ._filename files.

Terminal Tip: Delete Those Mac Dot Files

08.06
4

Use the find command to delete all of the ._* and .DS_Store files.

Editorial

Recent Editorial Articles

More Usable Mac: Finder Toolbar

05.12
3

I find it useful to keep a few extra items in my Finder toolbar.

No Multiple-Class Support in IE6

18.11
9

IE6 doesn’t respond to multiple class selectors.

New Skin for the Old Blogish

07.10
8

This blogish is finally back online after an extended period of http silence.

Downloadable

Recent Downloadable Articles

Gitup!

01.02
0

Gitup + Transmit = Really Simple Publishing

Leopard-Style iTerm Icon, Take 2

18.12
8

The newer, bluer version of the iTerm icon.

Leopard-Style iTerm Icon

05.12
6

An updated, Leopard-style icon for iTerm.

About This Site

About the Author

That’s me in the photo above. My current profession is web development. Therefore, it is the subject of this site.

Postpostmodern

Postpostmodern is the name of this site and my alias on most of the web. There's nothing really special about the name Postpostmodern. I studied art in college during the years after postmodernism, and nobody knew how else to classify the state of things other than silly words like postpostmodernism.

Sorta Blogish

I'd call this a blog, but I don't feel it fits the 'log' format. My goal is to publish articles on web-related topics that interest me, and while some articles may be time-sensitive, I would prefer that the organizational focus be on the categories and tags rather than chronology.

More Me

More about me can be found on the about page. Or, look me up in the usual places: