Display IE only CSS and display other browser CSS

Question

I have the following CSS code which is suppose to display one CSS if the browser is IE and display another CSS if the browser is !IE:

<!--[if !IE]-->
<style>
.img404 {
    display:none;
}
#textd {
    font-size: 14pt;
    color: #ffffff;
    text-shadow: 0 1px 0 #ccc,
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px rgba(0,0,0,.1),
        0 0 5px rgba(0,0,0,.1),
        0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2),
        0 5px 10px rgba(0,0,0,.25),
        0 10px 10px rgba(0,0,0,.2),
        0 20px 20px rgba(0,0,0,.15);
}
</style>
<!--[endif]-->
<!--[if IE]>
<style>
.img404 {
    display:none;
}
#textd {
    font-size: 14pt;
}
</style>
<![endif]-->

Only the IE one works.

Answer 1

If you want the non-IE css to be used, you need to stop it from being commented out:

<!--[if !IE]-->
Non-IE CSS
<!--<![endif]-->
<!--[if IE]>
IE only CSS
<![endif]-->

Notice that <!--[if IE]> doesn't have a trailing pair of dashes - to any browsers except IE, this will be interpreted as the opening of a comment, which is then closed later by <![endif]-->.

Conversely, <!--[if !IE]--> is a standard, self-closing comment (as is <!--<![endif]-->). Any code between these lines will be processed by any browser except IE.

Answer 2

You need two comment tags

<!--[if !IE]-->
Other Browsers
<!-- <![endif]-->