If IE not working properly

Question

I have 1 div and i want to apply a gradient and a background image to it (yes, on the same element). I know that it's only possible if the browser you`re targeting is NOT IE. With that in mind, i thought of applying a solid color in stead of the gradient with an image on top of it for IE only.

Here is my code:

background: url(../images/newsletter.png), -moz-linear-gradient(top, rgb(10,10,01) , rgb(5,5,5));
background: url(../images/newsletter.png), -webkit-gradient(linear, left top, left bottom, from(#0a0a0a), to(#05050f));
background-repeat: no-repeat, repeat;
<!--[if IE]>
background: #000 url(../images/newsletter.png) center left no-repeat;
<![endif]-->

The problem is the condition is ignored, before or after the declaration for FF/Chrome. (i`ve tested the and also the [if false] etc.) Any ideas?

Answer 1

You don't put that kind of conditional in CSS; it goes in your HTML. So create a new stylesheet with the IE fix, and link to it in a conditional comment:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

for example. However, that's in general; you can rewrite what you have now as:

background-color: black;
background-image: url(../images/newsletter.png);
background-image: url(../images/newsletter.png), -moz-linear-gradient(top, rgb(10,10,01) , rgb(5,5,5));
background-image: url(../images/newsletter.png), -webkit-gradient(linear, left top, left bottom, from(#0a0a0a), to(#05050f));
background-repeat: no-repeat;

which degrades gracefully without ugly conditional comments, and doesn't exclusively degrade gracefully on Internet Explorer.