Hi!
I have a div:
<div class="navigation mainPage"></div>
I need to specify that: every DIV that has a class "navigation" AND class "mainPage" should have "width: 999px".
Is this possible? thx
views:
64answers:
4I have read an article that other browsers(specially old browsers don't support multiple css in a single element. Here is the link http://webdesign.about.com/od/css/qt/tipcssmulticlas.htm
jerjer
2009-10-08 13:36:54
I meant multiple css classes in a single element.
jerjer
2009-10-08 13:39:03
This does not work in IE6, not as intended. In IE6, this selector matches on the mainPage class only. See http://so.piskvor.org/1537692/ for a test case.
Piskvor
2009-10-08 14:18:23
That would make everything with the class navigation have a width of 999px. They only want the width set to 999px with the div has navigation and mainpage classes set.
rikh
2009-10-08 13:13:51
#navigation means 'id="navigation"', not 'class="navigation"'; also, comma means "OR", as in "navigation or mainPage or both"
Piskvor
2009-10-08 13:17:07
In my browser tests (IE8,FF3,Opera10), it seems that Nimbuz and Darth are correct, but see the IE6 caveat mentioned by Darth.
Piskvor
2009-10-08 13:35:55
re OR: See http://www.w3schools.com/css/css_syntax.asp , header Grouping. E.g. ".class1, .class2" would match elements with class1 OR class2, whereas ".class1.class2" would only match elements with class1 AND class2, and ".class1 .class2" would match elements with class2 inside elements with class1.
Piskvor
2009-10-08 13:39:31
A:
Since you want every DIV, make it more specific:
div.navigation, div.mainPage{ width:999px; overflow:hidden;}
Meera Tank
2009-10-08 13:15:10
+2
A:
You can try
.navigation.mainPage { width: 999px; }
but this doesn't work in IE6. You can try to go around by doing
<div class="navigation navigation-mainPage"></div>
and then CSS
.navigation-mainPage { width: 999px; }
Even though this isn't the nicest solution, but I don't know of any other way around it.
Darth
2009-10-08 13:17:23