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

Question

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?

Answer 1

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.

Answer 2

There is a way to this in IE without CSSPie. The issue in IE 7 & 8 is that the element to which the shadow is applied, needs to have a background color set. Otherwise the shadow is inherited by child elements (including text).

This is how I achieve a cross browser box-shadow. This should work for IE 7-10, All Chrome & FF release that I have ever tried and Safari too. Ignore my color choices, obviously you'll need to set them to whatever works for your page.

.wrapper {
border: solid 1px #A7A7A7;
background-color:#ffffff;/*transparent won't work*/
}

.shadow {
-moz-box-shadow: 2px 2px 3px #A7A7A7;
-webkit-box-shadow: 2px 2px 3px #A7A7A7;
box-shadow: 2px 2px 3px #A7A7A7;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7');
}

Then just apply both classes to the parent element

<div class="wrapper shadow">
   <div id="someInnerDiv">
      <p>Some text that used to inherit the box-shadow, but doesn't anymore</p>
   strong text</div>
</div>