My CSS gradient isnt working in IE 9 or below

Question

I have a CSS gradient for an image that doesn't work in IE 9 or below. I tried adding adding a height:100%; because I saw that helped someone else but it still didn't affect mine. The image is the Sign Up button, and my URL is http://ht.io-web.com/ . Here is the CSS

.white {
background: -moz-linear-gradient(center top , #FFFFFF, #DEDCDC) repeat scroll 0 0 transparent;
border: medium none #DEDCDC;
color: #85B700;
margin-left: 5px;}

Answer 1

gradients for ie:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

gradients for webkit browsers:

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

Answer 2

CSS Gradients are not available in IE9 and below without Microsoft scripting (as noted by Keith).

http://caniuse.com/#search=linear-gradient

And your CSS code specifically use the Mozilla browser prefix so it will only work in Firefox browsers.

You can use "-webkit-" and "-o-" to target Safari/Chrome and Opera browsers (as noted in CanIUse.com) but they have different parameters I believe.

Answer 3

IE doesn't support CSS gradients -- not even in IE9.

However, there is a javascript hack called CSS3Pie that can solve this for you.

See http://www.css3pie.com/

Add this script to your site, and IE will be able to process CSS gradients.

(css3pie also does other CSS stuff too, like rounded corners, but IE9 supports them already, so those hacks only apply to IE8 and below)