Creating a Gradient Using CSS

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:



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