0

Anyone know how I can make this work in IE9. The top one works great in firefox but when I add the second one for IE9 it doesn't work. Any ideas what I'm doing wrong.

    background: -moz-linear-gradient(top,  rgba(117,117,117,1) 0%, rgba(111,111,111,1) 5%, rgba(102,102,102,1) 11%, rgba(39,39,39,1) 42%, rgba(28,28,28,1) 50%, rgba(0,0,0,1) 53%, rgba(0,0,0,1) 100%); /* FF3.6+ */

    background: -ms-linear-gradient(top left, rgba(117,117,117,1) 0%, rgba(117,117,117,1) 5%,rgba(102,102,102,1) 11%, rgba(39,39,39,1) 42%, rgba(28,28,28,1) 50%, rgba(0,0,0,1) 53%, rgba(0,0,0,1) 100%);

I don't want to use PIE.

Chapsterj
  • 6,483
  • 20
  • 70
  • 124
  • 1
    IE9 doesn't do gradients that way - IE10 probably will. You need to use `filter` for IE9; see [this question](http://stackoverflow.com/questions/3934693/gradients-in-internet-explorer-9) – Gareth Mar 13 '12 at 20:07
  • So how can I get the above effect using filter. Can you give me an example matching the -moz one. I need to be able to add multiple stops. thanks – Chapsterj Mar 13 '12 at 20:16

3 Answers3

1

Try this out - Ultimate CSS Graident Generator

Click the "IE9 Support" checkbox in the bottom right of the page.

zgood
  • 12,181
  • 2
  • 25
  • 26
  • Can you explain what the image SVG load is. mage/svg+xml;base64 , PD94bWwgdmVyc.........) What is this and how does it work. – Chapsterj Mar 13 '12 at 22:18
0

IE9 doesn't support gradients - only IE10: http://caniuse.com/#search=gradient

Instead, I'd recommend using something like this to speed up coding in IE: http://www.bradshawenterprises.com/blog/2010/dynamically-drawing-gradients-with-php/

I usually use this to generate a png of the gradient for me, then set that as the background first, then have another property after with the CSS grad. This lets it work in all older browsers that don't support gradients, not just IE.

It also meant that when the spec changed, my sites still worked.

Alternatively, use http://css3pie.com/, though I don't really like it for grads.

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
0

As stated in the other answers, the -ms prefix is for IE10+. IE9 drops support for the older filter syntax as well, so you can't actually render any gradients with pure CSS.

One solution to this is use SVG gradients for the background-image property. http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/

zim2411
  • 628
  • 4
  • 6