The div containing my vertical navigation has margin-top:-40px; which makes it stick up above the content div that contains it (and cover over a portion of the bottom of my masthead). What happens in IE7 is the navigation div gets the top chopped off but the box shadow still shows correctly. As the page is loading I can see the nav div background actually stick up the 40px as defined, but once the shadow is applied the top gets cut off. Why does this happen? I have the nav div and all previous parents position: relative.

TIA

Most likely due to hasLayout: http://css3pie.com/documentation/known- ... #hasLayout

Thanks Jason for the reply and the link. I added zoom:100%; to the containing element and now all is well.

BTW, great job on this behavior. With PIE I now have the confidence to use some of the great new features of CSS3 without fear of IE. Thanks.