Skip to content
This repository

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

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

2 participants

ricklowes Jason Johnston
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

Jason Johnston
Owner

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.