CSS box-shadow issues

Question

I'm building this page: http://ss.rsportugal.org/

As you can see, there are two 10 pixel shadows in the page. One just bellow the menu and the other just above the footer bar. These shadows are made using box-shadow: 0 0 10 rgba(...);

It works as expected in WebKit engine and for some reason that I am unable to figure out and I could use some fresh eyes on this, Gecko and Opera add 5 extra pixels to #header width and not to #footer-container, making a horizontal scrollbar appear on the body. Also works fine if I remove the box-shadow but I kind of want to keep it. ):

Answer 1

Try checking box-sizing property.

Webkit uses different box-model for box-sizing than FF. IE differ from both.

Ensure you declare the same kind for all browsers, and everything should be processed in the same box-model, thus, not making any disgusting surprises.

Answer 2

Thats because youve set the width to 100% so after the box-shadow is added its 100%+10px (the 10px beign divided between the two sides). If you used position:fixed; on the header as well you wouldnt have the issue. Its doing the same thing in Safari by the way, so webkit IS effected. What you could do is wrap them in a container and set that to 100% with overflow:hidden then on the inner element make it also 100% with the box shadow as desired.. this way it will get clipped off the left/right sides.

Something like:

<style type="text/css">
  #header {
    background:none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    left:0;
    overflow:hidden;
    position:absolute;
    top:0;
    width:100%;
    z-index:4;
  }
  #header-inner {
     width: 100%; 
     -moz-box-shadow: 0pt 0pt 10px rgb(0, 0, 0);
  }
</style>
<div id="header">
<div id="header-inner">
    <div id="logo">
        ...
    </div>
    <div id="menu-background"></div>
    <div id="menu-wrapper">
        ...
    </div>
</div>
</div>

Answer 3

It looks like you've already fixed the site, but it sounds like this is a known bug that I landed the fix for last week (so the fix should be in Firefox 4 beta 8, though we haven't shipped beta 7 yet).