removing border-radius style in IE specific stylesheet - css

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

Answer 2

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

Answer 3

Due to the way the stylesheet will cascade, you only need to have this in your ie8.css:
ul.treelayout {border-radius: 0;}
This will keep all of the styles the same, except it will remove the IE border radius. If you want further IE changes you can add them in as you like.
When overwriting a stylesheet that is always included, you only need to add styles you want to overwrite or have show up in the browser you're customising for. This makes the css file smaller, which is better for your users.