Question

CSS:

.silver {
color: #636363;
border: solid 1px #9C9C9C;
background: #D6D6D6;

/*important part*/
background: -webkit-gradient(linear, left top, left bottom, from(#E8E8E8), to(#BABABA));
background: -moz-linear-gradient(top,  #E8E8E8,  #BABABA);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#bababa')";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#bababa');

padding: 2px 5px 2px 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right: 5px;
font-size: 95%;
}

This works when I apply to class to a input / submit button, but the gradients do not display when I apply the class to a span or div. How can I get gradients working in IE9?

Answer 1

When IE9 was released, it was supposed to herald a new dawn for IE; a version that supported all the new shiny browser features that everyone else had been supporting for years.

The good news is that for the most part it succeeded in this.

The bad news is that they dropped the ball when it came to CSS gradients. IE9 doesn’t support them. But is also doesn’t support the old IE6/7/8 hack to get gradients working via the filter property.

There is a solution. You can render an SVG image into the background, which means that you can simply create an SVG with a gradient and you’re sorted. But wait, it’s not as simple as that; if you’ve got the filter property there to support IE8 and friends, you actually need to get rid of it for the SVG trick to work with IE9.

It all gets a bit complicated at this point. You need conditional comments, separated stylesheets for different IE versions, or some other method of hacking around the problem.

Or you can use CSS3Pie. This is a little Javascript utility that adds support for a number of CSS features to various versions of IE. One of those features is CSS background gradients.

With CSS3Pie, you can simply use the standard CSS background property, and the gradients will work in all IE versions exactly as they do in other browsers.

It works on all versions of IE from 6 to 9, so in addition to not having to mess around with the SVG hack I described earlier, you can also drop that messy filter style too. Its a win all round. I’d recommend that as the solution for you.

But, if you decide you’d rather do it the hard way, with an SVG gradient for IE9, here’s a link to a site that will generate the CSS code for you: http://www.colorzilla.com/gradient-editor/ Tick the ‘support IE9’ checkbox to see the code you’ll need, but also note the caveat text and further instructions that appear at the same time.

Hope that helps.