How can I get IE Filter & CSS Transparent Background to display together?

I am trying to get a transparent PNG & Gradient to display at the same in IE. Right now, the filter domi开发者_C百科nates over the background image. If I take out the filter, the PNG does display. Ideally, I would like the PNG to be on top of the gradient.

CSS:

.defaultSelection {
    border: 1px solid #bbb; color: #222222; outline: 0 none; 
    background: url('/img/dropdown-arrow.png') right center no-repeat; 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e9e9e9', endColorstr='#ffffff' )
}

HTML:

<li class="defaultSelection">Current Selection</li>

Good news: This is possible with IE (despite what others have said). But it does need a little hack called CSS3Pie.

CSS3Pie is a hack for IE which allows it to support a variety of CSS3 features using ordinary CSS, rather than those horrible filter styles.

See here for its supported features: http://css3pie.com/documentation/supported-css3-features/

You'll note that this includes the ability to specify a background with an image and a gradient:

As described on the page linked above, simply specify your CSS with -pie-background in addition to the normal background style, and also with the Pie behavior style to run the Pie script.

#myElement {
    background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*webkit*/
    background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
    behavior: url(PIE.htc);
}

Behind the scenes, CSS3Pie creates a VML element, and layers it with the real element to achieve the desired effects (VML is a vector graphics language which is supported by IE6 and up). But you don't need to know any of this, as Pie goes to some lengths to make itself completely transparent to the developer and to the user. It does have some bugs and known issues, but overall it's a very very good tool for pulling older versions of IE up to some sort of parity with more modern browsers.

Have you tried using the gradient on the li and then applying the image on an element within the li?

<li class="defaultSelection">Current Selection<span class='bg'>&nbsp;</span></li>

.defaultSelection {
border: 1px solid #bbb; color: #222222; outline: 0 none; 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,  startColorstr='#e9e9e9', endColorstr='#ffffff' )
}
.defaultSelection .bg{
   display:inline-block; 
   width: 10px;
   height:10px;
   background: transparent url('/img/dropdown-arrow.png') right center no-repeat;
} 

This is not possible with IE as a filter gradient is essentially another background image (it takes its place.) Try reversing the order to have the filter first and the bg image last in the CSS selector, you'll most likely see the image.

Your best bet is to go with layering, or make on PNG that has both the image and transparency.