lojjic/PIE — Issue #183: Multiple box-shadow turning "inside-out"
Author: ricklowes
Created: 2011-11-16 15:37:39+00:00
State: open

I am trying to setup a subtle box-shadow effect, and am getting a strange result in IE (6, 7 and 8) using PIE - the shadows appear to be almost "inside-out", or "mirrored" on a vertical axis when applied to a rounded box (using border-radius).

What I am trying to do is add a shadow that only appears on the left and right side of the box - to do this I am using multiple box shadows with some negative values:

.box {
border: 1px solid #dcdcdc;
background-color: #fff;
position: relative;
border-radius: 6px;
behavior: url(/PS/common/styles/PIE.htc); /* IE < 9: border-radius */
margin: 10px 0;
}

.shadow-sides {
box-shadow: 23px 0 31px -33px #000, -23px 0 31px -33px #000;
-moz-box-shadow: 17px 0 22px -29px #000, -17px 0 22px -29px #000;
behavior: url(/PS/common/styles/PIE.htc);
}

Here's the markup:

Calling Cards

....

...

....

I am using beta5 of PIE.htc.

Here's a link a screenshot of the results, compared to how it should look (in Chrome):
https://docs.google.com/leaf?id=0B8yF5F6bsoQCMTMyZTMyYTctNjkwOC00ZTdmLWFkNDUtNDI2ZmI2NzYxZDI1&hl=en_US