Question

I have two css files included on my page.

<link rel="stylesheet" href="/css/screen.css" />
<!--[if IE 8]>
    <link rel="stylesheet" href="/css/ie8.css"/>
<![endif]-->

Now in screen.css I have a style like this

ul.treelayout{
    list-style: none;
    margin: 0px 0px 10px 0px;   
    background-color: #fff;
    padding: 3px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #007b40;
}

I would like to remove the radius related styles in the ie.css such that the result style of ul.treelayout in IE is

ul.treelayout{
    list-style: none;
    margin: 0px 0px 10px 0px;   
    background-color: #fff;
    padding: 3px;
    border: 1px solid #007b40;
}

It seems that due to the fact that the styles cascade simply writing the class without the styles in ie.css doesn’t do the trick. Any ideas?

Thanks

Regards
Gabriel

Answer 1

Ok mine is not to reason why 😉 – but you can do this the other way around and only give the border-radius styles to NON-IE browsers.. in fact with a combination of Conditional comments you can give the border radius styles to IE9 and other browsers, I don’t know which script you mean is clashing but maybe you can also just give the script to the browsers that need it?

here’s an example (not using border-radius but hopefully you may get the idea..)

<style type="text/css" media="screen">
div {
padding: 40px;
color: #fff;
}
</style>

<!--[if IE]>
<style type="text/css" media="screen">
div  {background: #00f}
</style>
<![endif]-->

<!--[if (!IE)|(gt IE 7)]><!-->
<style type="text/css" media="screen">
div  {background: #f00}
</style>
<!--<![endif]-->

HTML:

<div>
   <p>background is red in non-IE browsers,and IE gt 7  - but background is blue in other IE's</p>
</div>

About the above conditional comments..

the first is a regular style

the second is a “traditional” hidden conditional comment which Only IE sees

the third is a revealed comment which all browsers see but IE still reads the arguments

you would put the common rules in a normal sheet, and the border radius rules inside a sheet in the third style comment

you can change the argument of the third comment it’s basically saying if NOT IE OR is gt IE7

More Information on arguments: About Conditional Comments