{"issue":{"state":"open","pull_request":{"diff_url":null,"html_url":null,"patch_url":null},"milestone":null,"user":{"avatar_url":"https://secure.gravatar.com/avatar/ae3d14c21747311ad51cb2d13cb41ce7?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"ae3d14c21747311ad51cb2d13cb41ce7","url":"https://api.github.com/users/ricklowes","login":"ricklowes","id":1054928},"assignee":null,"updated_at":"2011-11-16T15:37:39Z","labels":[],"closed_at":null,"comments":0,"url":"https://api.github.com/repos/lojjic/PIE/issues/183","body":"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).\r\n\r\nWhat 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:\r\n\r\n.box {\r\n\tborder: 1px solid #dcdcdc; \r\n\tbackground-color: #fff;\r\n\tposition: relative; \r\n\tborder-radius: 6px; \r\n\tbehavior: url(/PS/common/styles/PIE.htc); /* IE < 9: border-radius */\r\n\tmargin: 10px 0;\r\n}\r\n\r\n.shadow-sides {\r\n\tbox-shadow: 23px 0 31px -33px #000, -23px 0 31px -33px #000;\r\n\t-moz-box-shadow: 17px 0 22px -29px #000, -17px 0 22px -29px #000;\t\r\n\tbehavior: url(/PS/common/styles/PIE.htc); \r\n}\r\n\r\nHere's the markup:\r\n\r\n\t\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t\t<div class=\"col-1\">\r\n\t\t\t\t\t\t\t<div class=\"box shadow-sides\">\r\n\t\t\t\t\t\t\t\t<h2 class=\"cap-top lite-bg\">Calling Cards</h2>\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"col-1-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"inner lined hset10\">\r\n                                                                                    ....\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</div><!-- /col-1-3 -->\r\n\t\t\t\t\t\t\t\t\t<div class=\"col-1-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"inner lined hset10\">\r\n                                                                                     ...\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</div><!-- /col-1-3 -->\r\n\t\t\t\t\t\t\t\t\t<div class=\"col-1-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"inner hset10\">\r\n                                                                                      ....\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</div><!-- /col-1-3 -->\r\n\t\t\t\t\t\t\t\t</div><!-- /row -->\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div><!-- /col-1 -->\r\n\t\t\t\t\t</div><!-- /row -->\r\n\r\n\r\nI am using beta5 of PIE.htc.\r\n\r\nHere's a link a screenshot of the results, compared to how it should look (in Chrome):\r\nhttps://docs.google.com/leaf?id=0B8yF5F6bsoQCMTMyZTMyYTctNjkwOC00ZTdmLWFkNDUtNDI2ZmI2NzYxZDI1&hl=en_US\r\n\r\n","html_url":"https://github.com/lojjic/PIE/issues/183","title":"Multiple box-shadow turning \"inside-out\"","number":183,"id":2257592,"created_at":"2011-11-16T15:37:39Z"},"action":"opened"}