CSS gradient browser question

[SteveH]

Hello

I have created a gradient for a table background colour using the link here:

http://ie.microsoft.com/testdrive/gr...r/default.html

I then placed the code it that the site generates into an external style sheet, and in my HTML page I have this:

<table class="center" border="0" cellspacing="0" cellpadding="0">

<tr><td width="100%" align="center" valign="top"><div id="gradient">

TEXT

</div>
</td></tr></table>

I can see the gradient in page using Safari, but not in my default browser, IE9. Why is that, please? This is what I have for gradient in my style sheet:

#gradient {

height: 100%;

padding: 10px;

/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top left, #28AB66 0%, #73CC9D 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top left, #28AB66 0%, #73CC9D 100%);

/* Opera */ 
background-image: -o-linear-gradient(top left, #28AB66 0%, #73CC9D 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #28AB66), color-stop(1, #73CC9D));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top left, #28AB66 0%, #73CC9D 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom right, #28AB66 0%, #73CC9D 100%);

}

Many thanks.

Steve

[dstorey]

The code is correct. The problem is that IE only started supporting gradients in IE10. IE9 and below do not support it, so will only display the fallback (if any). Usually a gradient isn't something that is critical for the site to work correctly, so just adding a solid color fallback may be ok. e.g. add something like:

background-color: #28AB66; (or pick a midpoint between your two colours) before your gradient properties.

You can also remove the -ms-linear-gradient rule, as the final version of IE10 was released without prefix. That is only needed for users of IE10 platform preview on Win8, which is likely only going to be a very limited number of developers.