adding “progid:DXImageTransform.Microsoft” makes text blurry

Question

As soon as I add this to the css:

filter:  progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);

all text inside that element gets blurry.

Is this a known problem?

Whats the work-around?

I am creating shadow effect on a div (container), and this css is applied to that div.

Also, I have tried applying position:relative and a background-color to it without any luck. Only way to get the text to look "normal" is to remove the filter so far.

Also, cleartype is disabled!

Thanks

Answer 1

Yes, it's a known issue and is to do with the way these filters work. I'd recommend looking at CSS3PIE to add this sort of behaviour - it works flawlessly for shadows and rounded corners.

Make sure you read the documentation, there are a couple of gotchas that people miss (correct mimetype for the htc, position:relative on shadowed elements).