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 a

Answer 1

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. ;)