CSS (progid:dximagetransform.microsoft) not working after upgrading to SharePoint 2013

Question

We are in process of upgrading from SP2010 to SP2013.

There is a webpart with the foll. code:-

 <table>
            <tr>
                <td style="height:20px; FONT-SIZE: 14px;FONT-FAMILY: Calibri;TEXT-ALIGN: center;color:#ffffff;TEXT-ALIGN: center;filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#04a2a4", endColorstr="#cdfefe",GradientType=0 ), progid:DXImageTransform.Microsoft.gradient( startColorstr="#000000", endColorstr="#000000",GradientType=0 ); ">hello</td>
            </tr>
        </table>

This renders as follows in SP2010:-

Whereas in SP2013 it renders as follows:-

UPDATE

I did an F12 in IE and here are the results:

In SP2013 where it does not render, I do a F12 and see the foll.:-

<td style="height: 20px; text-align: center; color: #ffffff; font-family: Calibri; font-size: 14px;" "="" );="" ),="" ,gradienttype="0" endcolorstr="#cdfefe" #04a2a4",="" ,="" startcolorstr="#000000" progid:dximagetransform.microsoft.gradient(="">

Here is the rendered style on F12:-

As you can see, the progid tag is missing when rendered!

In SP2010 where it renders well, I do a F12 and see the foll.:-

<td style="height: 20px; text-align: center; color: #ffffff; font-family: Calibri; font-size: 14px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=;" ?="" );="" ),="" ,GradientType="0" endColorstr="#cdfefe" #04a2a4?,="" ,="" startColorstr="#000000" progid:DXImageTransform.Microsoft.gradient(="">

Here is the rendered style on F12:-

As you can see, the progid tag in inline style appears in this case.

Any idea as to what is causing issue for SP2013? The SP2013 site when run via IE8 shows the styles...

Answer 1

Try using the following css code

.yourcssclass{

background: url(fundraiser.jpg) no-repeat, -moz-linear-gradient(top, #ff3b68 0%, #0029d3 100%); /* FF3.6+ */
background: url(fundraiser.jpg) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3b68), color-stop(100%,#0029d3)); /* Chrome,Safari4+ */
background: url(fundraiser.jpg)no-repeat, -webkit-linear-gradient(top, #ff3b68 0%,#0029d3 100%); /* Chrome10+,Safari5.1+ */
background: url(fundraiser.jpg) no-repeat, -o-linear-gradient(top, #ff3b68 0%,#0029d3 100%); /* Opera11.10+ */
background: url(fundraiser.jpg) no-repeat, -ms-linear-gradient(top, #ff3b68 0%,#0029d3 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3b68', endColorstr='#0029d3',GradientType=0 ); /* IE6-9 */
background: url(fundraiser.jpg) no-repeat, linear-gradient(top, #ff3b68 0%,#0029d3 100%); /* W3C */
 }

the above code supports IE,chrome,firefox as well as opera.
here fundraiser.jpg is abackground image

Answer 2

The Property

progid:DXImageTransform.Microsoft.gradient( startColorstr="#04a2a4", endColorstr="#cdfefe",GradientType=0)

is deprecated After IE 9

Use the following CSS property to achieve the same by adjusting your colors

 background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */

Refer This Link http://www.colorzilla.com/gradient-editor/