3

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

3
  • 1
    Check with IE developer tools. May be your styles are overridden Feb 28, 2014 at 5:37
  • I have updated the question...
    – variable
    Feb 28, 2014 at 6:41
  • The SP2013 site when run via IE8 shows the styles...
    – variable
    Feb 28, 2014 at 8:29

2 Answers 2

2

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

1

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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