Multiple CSS filters in IE

Question

I'm just wondering that it is possible to apply two different filters in IE using CSS. So, I need to use a transparent PNG and also some opacity to a div. Is it possible to use both of them?

My transparent-maker line looks like this:

li.item .item-texture {
   background: none transparent scroll repeat 0% 0% !important; 
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ie/articles/item-content-hov.png', sizingMethod='scale') !important;
}

I've tried to add one more line ( filter: alpha(opacity=50); ) and separate filters with comma ( ..'scale') !important, alpha(opacity=50); ), but it was useless.

Answer 1

Sorry, but the chosen answer above is not correct. You can apply multiple filters in IE, but they need to be separated by one or more spaces.

A comma before the spaces will also work, but only if it follows a closing bracket. So IE 4.0 filters without parameters such as gray don't work in this case. Best to stick to spaces only as a separator.

If you go to the link given above: http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx, and click on the following example link (in IE, of course), you see that both a rotation and a blur are applied to the second image. From "view source", the image tag is:

<img id=image2 src="/workshop/samples/author/dhtml/graphics/sample.jpg" 
     style="filter:progid:DXImageTransform.Microsoft.Blur(strength=50), 
                   progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"
     height="165px" width="256px" border="0" alt="ocean beach">

I have somewhat successfully simulated the "spread" of a box shadow in IE7 and 8 (although successful depends on how acceptable you think it looks), using:

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=0)
        progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=90)
        progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=180)
        progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=270);

so that a shadow spreads from all sides of a div. I've also combined shadows on div's that contain gradients. This does not all come without its own peril, however. In the case above, the shadows have layout, and you have to adjust margins to accommodate their size. Also, with IE being IE, combinations of some of these filters can have unintended consequences, leading to developing workarounds, abandoning approaches, and the pulling out of one's hair.

In your original examples in your question, if you list more than one filter, the previous one will be overridden by the succeeding one, just like any other CSS property. In your second example, "!important" needs to be completely at the end of the style, or the entire block of CSS is discarded since it is misformatted. (Actually, !important needs to be thrown out completely. About the only reason you would ever need to use it is if you are developing third party code and need to defend your tags from another !important-happy developer over whom you have no control. If your style is being unintentionally overridden, you need a more specific declaration.)

Answer 2

There cannot be more than 1 filter property, as IE will only take the last one into effect.

NOTE: Since this seems to be getting a few down votes I wanted to clarify that this doesn't mean you can't apply multiple filters, just that you can only use 1 filter property. If you try applying multiple filters and separate them out into multiple properties, only the last one will take effect.

According to the following article from MSDN, they are separated not by a comma but a space: http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx

Also note that some IE filters (alpha included) require the element to have layout in order to be applied correctly: http://www.satzansatz.de/cssd/onhavinglayout.html