Why does a filter gradient on a pseudo element not work in IE8?

Question

I want to create buttons like these:

In modern browsers the effect is created using inset box-shadow and filters.
For IE8 - pseudo-elements are chosen.

Answer 1

I already gave my preferred solution (use CSS3Pie), but I'll post this as a separate answer.

The likely reason why IE8 fails to work with filter where IE7 works is because IE8 changed the syntax for filter.

filter is an IE-specific proprietary style. When Microsoft released IE8, they made a big point of trying to be "standards compliant". The "standards compliant" way of supporting a non-standard style is to give it a vendor prefix, and that is what Microsoft did.

So therefore in IE8, you need to do the following:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 )";

IE7 doesn't support this syntax, so you need them both.

IE8 does in fact work with the old syntax in some cases. The cases where it doesn't work tend to be the ones where you use the progid: syntax. The reason for this is that the colon after progid causes it to be invalid CSS syntax, which is why MS added quotes around the whole thin for the IE8 -ms-filter version.

So the short answer is, use both versions in your stylesheets, and you'll be fine.