3

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?

sscirrus
  • 55,407
  • 41
  • 135
  • 228

2 Answers2

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>
hardba11
  • 1,478
  • 15
  • 27
2

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.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Thanks a lot for your answer. I have tried CSS3Pie before but I ran into a problem where IE would crash on every page that had the declaration in my CSS files. – sscirrus Mar 10 '11 at 10:35
  • @sscirrus - that's a shame. I hope you reported it as a bug on the Pie forum? Also, what version of Pie were you using; it's up to the third beta version now, and significantly more stable than the previous versions. – Spudley Mar 10 '11 at 10:54
  • Thanks for your advice. I'll give CSS3Pie another try. Getting things to display properly on IE7 and IE8 takes so much time... it's especially frustrating after getting used to the beauty of Chrome/FF! – sscirrus Mar 10 '11 at 11:38
  • I just went to CSS3Pie's home page using IE 8.0 and the browser crashes! It's the same problem I used to have with them. I'll let them know. – sscirrus Mar 10 '11 at 11:44