Search code examples
cssinternet-explorerfilterprogid

IE filters - Shadow acts on text; Gradient+Shadow acts on box?

When I attach the following to a div, I get a box with a gradient and a box-shadow in IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#D08080', EndColorStr='#E7A292') progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=170, Color='#B8B8B8');

However, when I'm doing JUST the shadow filter, I'm getting shadowing on the text inside the div. Other than the obvious (and ugly) hack of setting a filtered gradient with a constant color, how can I get a simple div to shadow itself rather than its text in all versions of IE?

Solution

  • IE's filters are always an ugly hack, can be hard to get right, and very often cause weird bugs. My recommendation is to avoid using them wherever possible.

    Take a look at CSS3Pie for a neat way around the issue.

    CSS3Pie is a hack for IE that allows it to use standard CSS properties instead of filter for gradients and box shadows. It also does border-radius.

    I hope it'll solve your problems.