New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
2 participants
@ricklowes

ricklowes commented Nov 16, 2011

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

This comment has been minimized.

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