transparency conflicting with drop shadow in ie7 using CSS3 PIE

Question

I'm using CSS3 PIE to do border-radius, drop shadow and transparency effects to make the transparent area around the main of the page. I'm trying to make it look like this:

http://www.palosverdes.com/rpv/re-design/JANUARY-2012/C-10.html

Here's my current version:

http://www.palosverdes.com/rpv2012/indexforie7.cfm

This renders the effects I want in the modern browsers, but in IE7 the drop shadow seems to be filling the area that should be transparent. Here's a screenshot:

imgur.com/lD0JG (I still can only post two hyperlinks, sorry)

Any ideas what might be causing the problem?

Answer 1

It turns out that css3pie doesn't support drop-shadow on items that are not opaque (it shows through). Here's the relevant link: css3pie.com/documentation/supported-css3-features/#box-shadow As far as I can tell, this problem can only be resolved in ie7/8 by using a png-based drop shadow with some css or adding the drop-shadow as part of the background-image for the div.