CSS3 PIE, IE8, and border-radius - css

Question

I came across www.css3pie.com yesterday while looking for ways to get box shadow and border radius working in IE8. So far, it has helped out great but am racking my head trying to figure out why it won't work for the last part of the dev...the two tabs at the top. The gradient shows up in the non-active state, but is unchanged when the class 'current' is applied. The href is also changing how it's supposed to. Check out the following code:
<div class="nav1">
<ul>
<li <?php if ($thisPage=="Contact Us") echo "class=\"current\""; ?>>Contact Us</li>
<li <?php if ($thisPage=="Visit Us") echo "class=\"current\""; ?>>Visit Us</li>
</ul>
</div>
and it's being styled like so...
.nav1 ul {
margin:0px;
padding:0px;
list-style:none;
}
.nav1 ul li {
position: relative;
font-size:12px;
float:left;
margin-right:5px;
border: 1px solid #999999;
background-color: #fafafa;
border-radius: 5px 5px 0px 0px;
background: #f7f7f7; /* Old browsers */
background: -moz-linear-gradient(top, #f7f7f7 0%, #ccc9c9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#ccc9c9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7f7f7 0%,#ccc9c9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7f7f7 0%,#ccc9c9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7f7f7 0%,#ccc9c9 100%); /* IE10+ */
background: linear-gradient(top, #f7f7f7 0%,#ccc9c9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ccc9c9',GradientType=0 ); /* IE6-9 */
color:#868686;
text-shadow: 1px 1px #fafafa;
padding: 6px 30px;
behavior: url(inc/PIE.htc);
}
li.current{
position: relative;
border-radius: 5px 5px 0px 0px;
background: #e0e0e0; /* Old browsers */
background: -moz-linear-gradient(top, #e0e0e0 0%, #bab8b8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#bab8b8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e0e0e0 0%,#bab8b8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e0e0e0 0%,#bab8b8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e0e0e0 0%,#bab8b8 100%); /* IE10+ */
background: linear-gradient(top, #e0e0e0 0%,#bab8b8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#bab8b8',GradientType=0 ); /* IE6-9 */ text-shadow: 1px 1px #fafafa;
behavior: url(inc/PIE.htc);
}
.nav1 ul li a{
font-size:14px;
float:left;
color:#868686;
text-decoration:none;
}
.nav1 ul li a:hover{
color:#666666;
font-size:14px;
float:left;
color:#000000;
text-decoration:none;
}
.nav1 ul li.current a {
color: #000;
}

Answer 1

Since CSS PIE is going to handle the gradients for IE you can safely remove the filter: declaration. That may help.