Want to replace DXImageTransform to make FireFox/Chrome Compatible

Question

Hi,

The following piece of code does not work on FF and Chrome but works on IE. I want to replace this part to make sure it works on all browsers.

Anybody, any idea?

Code below:

<td width="50%"  style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#163866,endColorStr=#8bc9f3); HEIGHT: 38px;">

Answer 1

td {
   background: -webkit-gradient(linear, left top, left 38, from(#163866), to(#8bc9f3));
   background: -moz-linear-gradient(top, #163866, #8bc9f3 38px);
   FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#163866,endColorStr=#8bc9f3)
   height: 38px;
}

This will work in FF 3.6+, Safari 4+, Chrome, and IE 6+ (I think that supports gradient filters). Each browser will ignore the declarations it doesn't understand, so having all 3 will support all major browsers. Opera doesn't yet support gradients, instead use SVG (Scalable Vector Graphics)

Firefox Gradient documentation

Webkit (Safari/Chrome) Gradient documentation

Opera Gradients