How do I reset or override IE CSS filters?

Question

I'm using the proprietry MS 'filter' property to try and create a non ugly equivelant to css3 text-shadow and box-shadow;

I was actually doing really well until i hit this problem. It looks like when I apply a filter to a div inside another div which also has a filter the filter effects end up being combined on the child object.

I can't explain it much better than that, here's a demo: http://cableflow.dev.arc.net.au/test/filters.html

I've tried using filter:none; to do a reset but no joy. I've also tried different variations on the syntax, ie "-ms-filter: 'progid:...Glow()'", "filter: progid:...Glow()", "filter: Glow()", etc..

Testing in IE8

Answer 1

I've had some success by positioning the children absolute or relative. This didn't seem to work earlier though so it may break again once I get more complicated

I think once a parent has a filter applied all of it's children essentially become directx surfaces internally. You can still select text but it lags. I think text selection is a hack which makes each letter a seperate surface. It's a shitty mess which goes a long way to explaining why the browser in general and filters in particular are so buggy.

Answer 2

Have you tried to enable/disable the filter(s)?

Answer 3

try this:

filter: -;