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.
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.
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.
Sep 18th, 2009 at 10:57 am yareckon
IE6 takes the last class. .one.two.three is the same as .three
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
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{
}
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{
}
I hope that helps ;) Happy coding!
Jan 29th, 2010 at 9:28 am nm2
menu a#menu1.selected, #menu a#menu1.current
Aug 12th, 2010 at 10:57 am Raz
You’re all a bunch of noobs
Jan 19th, 2011 at 12:21 pm Maurice
Raz- And what helpful advice have you to share with us, today?
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/