Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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:- SP2010 render

Whereas in SP2013 it renders as follows:- SP2013 render

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:-enter image description here

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:-enter image description here

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...

share|improve this question
1  
Check with IE developer tools. May be your styles are overridden –  Nadeem Yousuf Feb 28 at 5:37
    
I have updated the question... –  variable Feb 28 at 6:41
    
The SP2013 site when run via IE8 shows the styles... –  variable Feb 28 at 8:29

2 Answers 2

up vote 2 down vote accepted

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

share|improve this answer

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/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.