Skip to content

Multiple box-shadow turning "inside-out" #183

Open
ricklowes opened this Issue Nov 16, 2011 · 1 comment

2 participants

@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
Owner
lojjic commented Nov 16, 2011

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.