use different style sheets for different browsers

how do i use different style sheets for different web browsers?

i am using nopcommerce 1.9 and it looks fantastic in firefox 4.

I want to use this:

<!--[if gt IE 6]>
        <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

but it doesnt seem to work in the master page....

any ideas?

All CSS files are loaded in the selected theme. You avoid separate themes for the different browsers. Use standards based CSS in the theme, then do a browser check in master page and load CSS in code like below.

    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="/styles/iehacks.css" />
    <link rel="stylesheet" type="text/css" href="/styles/buttonsIE.css" />
    <![endif]-->
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="/styles/ie6hacks.css" />
    <![endif]-->
    <!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="/styles/ie8hacks.css" />
    <![endif]-->