title: CSS box shadow top-only in mozilla?
body: <p>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:</p>
  
  <pre><code>div.footer {
    -webkit-box-shadow: 0px 0px 7px $dark2;
    -moz-box-shadow: -7px 0px 7px $dark2;
    box-shadow: 0px 0px 7px $dark2;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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...</p>
  
  <p><strong>So, has anyone got a solution for rendering a top-only box-shadow in Firefox?</strong></p>
  
  <p>EDIT: See a fiddle of this at: <a href="http://jsfiddle.net/burlesona/2LwXa/" rel="noreferrer">http://jsfiddle.net/burlesona/2LwXa/</a></p>