Style attribute in <td> tag not working in Firefox

I have an HTML table and am trying to add a gradient using a style attribute on the <td>. This works in IE, but not Firefox, Opera, or Chrome.

<td height="100%" width="10%" valign="top"
    开发者_高级运维style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#6487DB'‌​, endColorStr='#003366', gradientType='0');" >
</td>

How can I get this to work in Firefox, etc.?

This:

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#6487DB'‌​, endColorStr='#003366', gradientType='0');

is IE specific code. It shouldn't work in other browsers. See css3please for ways of doing this in other browsers (that support css3).

EDIT: copied from the link I posted previously and modified to the correct colors

  background-color: #6487DB;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6487DB), to(#003366)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #6487DB, #003366); /* Chrome 10+, Saf5.1+ */
  background-image:    -moz-linear-gradient(top, #6487DB, #003366); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #6487DB, #003366); /* IE10 */
  background-image:      -o-linear-gradient(top, #6487DB, #003366); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #6487DB, #003366);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#6487DB', EndColorStr='#003366'); /* IE6–IE9 */

The 'filter:progid:DXImageTransform.Microsoft.gradient' statement is for Internet Explorer only! Add this code to your stylesheet instead:

<style>
.mygradientstyle{
background:#6487DB; /* Old browsers */
background:-moz-linear-gradient(top,#6487DB 0%, #003366 100%); /* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#6487DB),color-stop(100%,#003366)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#6487DB 0%,#003366 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#6487DB 0%,#003366 100%); /* Opera11.10+ */
background:-ms-linear-gradient(top,#6487DB 0%,#003366 100%); /* IE10+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6487DB ', endColorstr='#003366',GradientType=0 ); /* IE6-9 */
background:linear-gradient(top,#6487DB 0%,#003366 100%); /* W3C */
}
</style>

... Then call your with the class 'mygradientstyle' in your sourcecode:

<td height="100%" width="10%" valign="top" class="mygradientstyle">

... This should work across all browsers.

If you want a left-to-right gradient use this code:

<style>
.mygradientstyle{
background:#6487DB; /* Old browsers */
background:-moz-linear-gradient(left,#6487DB 0%,#003366 100%); /* FF3.6+ */
background:-webkit-gradient(linear,left top,right top,color-stop(0%,#6487DB),color-stop(100%,#003366)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(left,#6487DB 0%,#003366 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(left,#6487DB 0%,#003366 100%); /* Opera11.10+ */
background:-ms-linear-gradient(left,#6487DB 0%,#003366 100%); /* IE10+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6487DB', endColorstr='#003366',GradientType=1); /* IE6-9 */
background:linear-gradient(left,#6487DB 0%,#003366 100%); /* W3C */
}
</style>

Again, the snippet background:-o-linear-gradient(left,#6487DB 0%,#003366 100%); /* Opera11.10+ */ should work with Opera version 10 or higher. Opera 9 or lower is beyond my knowledge, but think that gradients are not supported. Any insights on that anyone?