CODEWITHSUNDEEP
css
user121196
user121196

Reputation: 31020

css selector on IE

I'm using .class1.class2 .class3 selector, where .class1.class is a combination selector and .class3 belongs to a descendant. works fine in FF, but on IE7, it doesn't work. In the css below, the second style is always shown in IE. any solution?

 
<STYLE type="text/css">
.test1.test2 .test3{
    width:90px;
    height:100px;
}
.test4.test2 .test3{
    width:900px;
    height:100px;
}
</style>


<div class="test1 test2">
    <button value="test" class="test3"/>
</div>

Upvotes: 1

Views: 284

Answers (3)

Luca Filosofi
Luca Filosofi

Reputation: 31173

just for let you know, what you are using is called Multiple Classes method! IE7 need to use this form:

div.class1.class2 div.class3 {}

IE6 don't suppurt this you can hack it, read the solution

http://www.quirksmode.org/css/multipleclasses.html

hope this help!

Upvotes: 4

DisgruntledGoat
DisgruntledGoat

Reputation: 72530

That style should work perfectly on IE7+. As Pekka said in the comments there is a small problem with IE6. I'm guessing that you're not using the strict doctype perhaps?
In which case, you deserve everything you get :-o

Just add <!doctype html> to the start of the HTML file and everything should be fine.

Upvotes: 1

ant
ant

Reputation: 22948

Use Conditional Comments , this issue has been raised too many times here is an example :

<!--[if lte IE 9>
<style type="text/css">
.test1,.test2,.test3{
    width:90px;
    height:100px;
}
.test4,.test2,.test3{
    width:900px;
    height:100px;
}
</style>

<![endif]-->

This means all IE family browser less than version 9 are going to read in this style, or you can use style with # to be read by IE like this :

<STYLE type="text/css">
.test1,.test2,.test3{
    #width:90px;
    #height:100px;
}
.test4,.test2,.test3{
    #width:900px;
    #height:100px;
}
</style>

Upvotes: 0

Related Questions