IE8 ignores “filter” CSS styles

Question

I have a page which uses the AlphaImageLoader CSS filter for IE8 like so:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/thing.png', sizingMethod='scale');

In my test IE8 (Windows XP, factory settings), everything is fine. The client however received a screenshot from someone claiming to be also using IE8 which looks like the browser completely ignores the filter directive. All other styles in the IE-specific stylesheet loaded via conditional comments appear to be working. Is there any setting in IE or in Windows which would be causing this?

Thanks, Simon

Answer 1

This simple test case: http://fiddle.jshell.net/TyMxr/show/light/

<div></div>

div {
    border: 2px solid red;
    width: 256px;
    height: 256px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=128&d=identicon&r=PG', sizingMethod='scale');
}

works in IE6, IE7, IE8, IE9, and Quirks Mode in any of those versions.

I can't think of any reason this wouldn't work in IE.

Do you have a test page to look at? I think something else must be going on.

Answer 2

IE8 replaced filter with -ms-filter.

If you want to support all versions of IE, you need to provide both of these styles.

The syntax for -ms-filter is slightly different to filter as well:

• All filters are now specified with their full progid string (as per your example, but some filters could previously be specified with a shorter syntax).

• The value for -ms-filter must be enclosed in quotes. This is to prevent it from being invalid CSS syntax (since it contains a colon after progid it is invalid CSS; in bad cases has been known to cause parsing errors in other browsers that stop them from reading the rest of the CSS file properly).

So in your example, you need the following styles:

.myelement {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/thing.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/thing.png', sizingMethod='scale')";
}

Note that IE9 has dropped support for both filter and -ms-filter, in favour of the equivalient standard CSS3 properties.

Hope that helps.