Creating a Gradient Using CSS

[Krus1972]

Hello,

I am trying to create the following gradient effect, using CSS, so that it appears in Internet explorer version 10 and version 11 just as it does in the following image:

http://product.info/test.htm

I am using the following CSS and HTML code. This code works well and the gradient appears perfect when viewing it using Internet Explorer versions prior to Version 10. It also looks perfect when using Firefox and other browsers. When viewing using Internet Explorer version 10 and version 11, the gradient is there, but, it looks way different. I don't know why this appears so different in IE10 and IE 11 then in previous versions. Any help in modifying this code to make it appear correctly when viewing in Internet Explorer version 10 and 11 as well as all other browsers would be well appreciated:


.intro2
{
padding:0 .5em;
height:2.0833em;
border:1px solid #ccc;
color:#000;
background:#f6f6f6;
background-image:-moz-linear-gradient(top,#ffffff,#efefef);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
filterrogidXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
white-space:nowrap;
vertical-align:middle;
overflow:visible;
}


.intro3
{

font-weight:bold;
border-color:#ecc101;
background:#ffe971;
background-image:-moz-linear-gradient(top,#fff9c1,#fed81c);
background-image:-webkit-gradient(linear,left top,left bottom,from(#fff9c1),to(#fed81c));
filterrogidXImageTransform.Microsoft.Gradient(startColorStr=#fff9c1,endColorStr=#fed81c)

}


<TABLE height="100" CELLSPACING=0 CELLPADDING=0 border=0 bordercolor="#000000">
<tr>
<td width="180" class="intro2 intro3">
<center><span style="font-size:18px;">&nbsp;</span></center>
</br>
<center><span style="font-size:18px;">&nbsp;</span></center>
</td>
</tr>
</table>



Thanks again for any help

 

[vacunita]

For Gradients in IE 10 and above you want to use the ms-linear-gradient.

background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */

You can also use online generators to make it easy on yourself.

http://www.colorzilla.com/gradient-editor/

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech