Conditional CSS in CSS not working
Question by Dave
so I have this css code:
.onetoone{
position: relative;
margin: 10px auto 5px;
padding: 20px;
width: 878px;
[if ! IE] height: 1241px;
[if IE] height: 241px;
border: 1px solid #AAAAAA;
behavior: url(PIE.htc);
}
However I don’t see any different height on .onetoone in IE and Firefox, both are still have the same 214px height. It should has a 1232px height in firefox and 241px height in IE 8, right?
What did I miss?
Thanks for all your answers.
Answer by Starx
Have you read the usage file?
According the website, you have to write the css and compile it using its online tool and then you have include c-css.php to get it working.
@import "/media/css/c-css.php";
According to example from this website, this should fix the problem.
.onetoone{
position: relative;
margin: 10px auto 5px;
padding: 20px;
width: 878px;
border: 1px solid #AAAAAA;
behavior: url(PIE.htc);
}
[if !IE] .onetoone {
height: 1241px;
}
[if IE] .onetoone {
height: 241px;
}
After you compile it becomes a huge file like this one here and you include like the way I said above.
However, I would go with the good old fashioned way I knew. And it was to include different css with the conditional CSS comments
<!--[if IE]>
<style>
.onetoone {
height: 241px;
}
</style>
<![endif]-->
<!--[if !IE]>
<style>
.onetoone {
height: 1241px;
}
</style>
<![endif]-->
Should work either way.
Update
Instead of loading different style like the one in my example load different file in the end after loading all the main css files in this way.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="fixforie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="fixforie6.css" />
<![endif]-->
