CSS box shadow top-only in mozilla?

Question

I have a footer on my web site, and I'd like to have a subtle shadow cast above it. The CSS looks like this:

div.footer {
  -webkit-box-shadow: 0px 0px 7px $dark2;
  -moz-box-shadow: -7px 0px 7px $dark2;
  box-shadow: 0px 0px 7px $dark2;
}

As I'm sure you're all familiar, Mozilla extends pages to render the full extent of a box shadow, which is a problem if you have elements extending 100% wide, such as my footer.

I've already tweaked the moz declaration to prevent horizontal scrollbars, (I did this on my menubar on my site as well), but when I put this on my footer I found that Mozilla extends the page 7px past the footer on the bottom now. I was surprised by this because it doesn't extend the page vertically past the menubar at the top of the page...

So, has anyone got a solution for rendering a top-only box-shadow in Firefox?

EDIT: See a fiddle of this at: http://jsfiddle.net/burlesona/2LwXa/

Answer 1

Try box-shadow: 0px -7px 7px -7px #333;.

The fourth value is the spread of the shadow. Negative values cause the shadow to shrink. Combined with the blur, it results in a shadow with the same size as the element, which the offset-y then moves in to view.