CODEWITHSUNDEEP
htmlcss
Chapsterj
Chapsterj

Reputation: 6625

IE9 Gradient using -ms

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.

Upvotes: 0

Views: 677

Answers (3)

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

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.

Upvotes: 0

zim2411
zim2411

Reputation: 628

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/

Upvotes: 0

zgood
zgood

Reputation: 12571

Try this out - Ultimate CSS Graident Generator

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

Upvotes: 1

Related Questions