Multiple box-shadow turning "inside-out"

[ricklowes]

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:

                <div class="row">
                    <div class="col-1">
                        <div class="box shadow-sides">
                            <h2 class="cap-top lite-bg">Calling Cards</h2>                              
                            <div class="row">
                                <div class="col-1-3">
                                    <div class="inner lined hset10">
                                                                                ....
                                    </div>
                                </div><!-- /col-1-3 -->
                                <div class="col-1-3">
                                    <div class="inner lined hset10">
                                                                                 ...
                                    </div>
                                </div><!-- /col-1-3 -->
                                <div class="col-1-3">
                                    <div class="inner hset10">
                                                                                  ....
                                    </div>
                                </div><!-- /col-1-3 -->
                            </div><!-- /row -->
                        </div>
                    </div><!-- /col-1 -->
                </div><!-- /row -->

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

[lojjic]

Thank you for reporting and for the testcase. I'll try to add some special handling for negative spread to keep it from getting pointy.