Minor CSS issue

Question

I am new to the designing/programming world so I am sure the issue is easy to solve. I am trying to add the moz-box-shadow effect to my header. But as soon as I add that component, the header which is taking up space horizontally shortens up. I want the header to be like Twitter's, where they use a shadow effect.

#header {
    background-color: #990000;
    width:101.3%;
    margin-left:-8px;
    margin-top:-8px;
    height:40px;
    -moz-box-shadow: 1px 1px 10px #D7D7D7;
}

Also, the way i have set the width is it likely going to create cross browser issues?

Answer 1

Here's a version similar to what Twitter has:
This is Twitter's version, more or less:

Live Demo (edit)

HTML:

<div id="top-fixed">
    <div id="top-bar"></div>
</div>

CSS:

html, body {
    margin: 0; padding: 0
}
body {
    padding-top: 50px;
    background: #c0deed
}
#top-fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
}
#top-bar {
    height: 40px;
    width: 100%;

    background-color:#00a0d1;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8));
    background-image:-moz-linear-gradient(#00a0d1,#008db8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')";

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

Answer 2

The trick that Twitter is using, is putting in an absolutely positioned box and giving that box a width of 100% and the shadow. Using overflow-x: hidden on it´s parent, you get the effect that you are looking for.

Answer 3

I've been doing shadows with .png's. I see no benefit of using this (esp. since I would assume browsers started supporting .png prior to supporting box shadowssee, for example, Mozila's statement that FF started supporting box shadows in FF3.5,) but of course, if this is better than doing shadows via .png, feel free to leave a comment proving me wrong!