CSS3 Box Shadow Effect for IE8?

Question

I have the following style to get this effect:

It works in IE9 and Chrome but not in IE8. What should I change to make it work in IE8.

Please note that I have applied this style to a tag encapsulating the image.

 border-collapse: separate !important;
 box-shadow: 0px 0.5px 11px 4px #888888;

Answer 1

CSS3PIE is your friend on this issue, go try iy but beware of using it on IE8

I'm having a lot of headache facing with crashing IE8 because of PIE collision with some other javascript right now

Answer 2

IE8 does not natively support box-shadow. You can use the amazing CSS3 PIE library for that.

---

Beware however, that this does not exactly replicate box-shadow. Mainly, if your image has any transparency to it, the shadow behind the element will leak through:

The shadow shape rendered by PIE is, unlike other browsers, opaque in the area behind the element's background. This means that if your element has a transparent or semi-transparent background, the opaque shadow will show through. To avoid this you must [..] give the element a non-transparent background

See: http://css3pie.com/documentation/supported-css3-features/#box-shadow

Answer 3

You can use IE specific filter css rules to acheive this and forgo the CSS3PIE entirely.

This will give you something close to what you are looking for.

filter: 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2); 

A demo can be viewed here: http://hedgerwow.appspot.com/demo/shadow

And for more information on IE filters see this MSDN article: http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx

Many of these filters have been supported since IE4, well before css2, and at a time when no browser fully supported CSS1. So if you think the glow filter looks ugly blame it on 1997 not Microsoft. ;)