CSS Hover Background Issue in IE

HTML & CSS
1

Hi All, I am pulling my hair out trying to figure out why my hovers aren’t working correctly in ie. I’m trying to put together a css only menu using a ul, it works perfectly in all browsers except IE, any version. Here’s a working version of the menu so far. The problem I’m having is the background style for the main ul is transferring down to the ul li in IE and ignoring my background image. And if I remove the filter line in the “#prodmenu li:hover > a” style the hovers don’t work at all in ie. One thing that is working however is the color, I have it as !important in the “#prodmenu ul a:hover” style and ie is displaying it correctly, just not the background.

Here’s a sample of the list:


<ul id="prodmenu">
 <li><a href="#">BASEBALL / SOFTBALL</a>	
  <ul>
   <li><a href="#">Netting</a></li>			
   <li><a href="#">Pitching Mounds</a></li>
  </ul>
</li>

And here’s the css bits that I think are causing the problem:


#prodmenu .current a, #prodmenu li:hover > a {
	background: #d1d1d1; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#E1E1E1'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#E1E1E1)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ebebeb, #E1E1E1); /* for firefox 3.6+ */
	color: #444;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
#prodmenu ul a:hover {
	background: #25548C !important; /* for non-css3 browsers */
	background: url('https://secure.practicesports.com/mas_assets/default/images/bg-mesh-blue.gif') !important;
	background-repeat: repeat !important;
	color: #fff !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}

I would really appreciate any help, this has been driving me crazy. I’ve searched but don’t really know what to search for to get my answer.

2

To get the hover background to show you probably need to turn the filter off here:


#prodmenu ul a:hover {
[B]	filter:none[/B];
  background: #25548C!important; /* for non-css3 browsers */
	background: url('https://secure.practicesports.com/mas_assets/default/images/bg-mesh-blue.gif')!important;
	background-repeat: repeat!important;
	color: #fff !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
3

Absolutely, that was it! Thank you so much, I never would have figured that out. Just had to set the filter to none. Thanks!