browser-based css within a sheet

[bostonmark]

Hi, I have a stylesheet and I need to use this particular one. I can't have one for IE and one for non-IE -- I need just one single css file (for reasons such as stylesheet swapping). Anyway... I want to have rules in my CSS file based on the browser. The main problem below:

/* IF IE USE A GIF */
<!--[if IE]>
#corner { background: url(/img/flag.gif) top left no-repeat;
}
<![endif]-->

/* IF NOT IE USE A PNG */

<!--[if !IE]>
#corner { background: url(/img/flag.png) top left no-repeat;
}
<![endif]-->


I tried this and it doesn't work. I want to show the png image for non-IE and the gif image if it's IE. I cannot apply the !important rule to the png as to block out IE from it because I have a JS that will allow people to swap the CSS, so I need to do it using some sort of "if else" thing. If I use the !important hack, when they swap to the other CSS file, the iamge won't change because the !important will stay priority.

When I tried the above code, the image didn't show up in either case, IE and in Firefox. Just to clarify, this code is inside the CSS file. I cannot have separate files for IE and non-IE, so I need these rules to work within the .css

Any ideas out there?

[WebJoel]

That is a very well thought-out and adequately articulated question. I am not sure, but it looks to me as if your second IE statement isn't needed or maybe does not function. What is "<!-->" (the exclaimation point)? Is this even valid (anyone?). I know about priority. I'd think it should be 'priority-do this', not 'priority-do [I]NOT do this'.
What about making the *gif background be common/default and then exclude IE in favor of the conditional statement for the *png:
I would suspect that you'd write as follows:

#corner {background: url(/img/flag.png) top left no-repeat;} /*for ALL browsers*.

<!--[if IE]>/* for IE-only because IE can't handle *png images properly */
#corner { background: url(/img/flag.gif) top left no-repeat;
}<![endif]-->

and leave-out that whole
(if NOT IE )
<!--[if !IE]>
#corner { background: url(/img/flag.png) top left no-repeat;
}
<![endif]-->
-Tell the browser what it IS, not what it ISN'T...