Box-shadow is Black in Chrome but White in Firefox?

Question

Actually the problem is simple, my shadow is black in Google Chrome and white in Firefox, It should be black. And if you have different comments please do say them because I'm still a student.

This is my HTML code: (it is dutch but it is just so you can see the anarchy.)

<div class="rechts">
    <h2>IN DE SPOTLIGHTS</h2>
    <p>Zondag 13 oktober beginnen we met ons nieuwe jaar! We starten om 13u30 en iedereen is natuurlijk meer dan welkom! KSA Scherpenheuvel is ook te vinden op <a href="https://www.facebook.com/pages/KSA-Scherpenheuvel/1065425993472427?fref=ts" style="color: black">facebook</a>!</p>

    <h2>FOTOMOMENT</h2>
    <p><img src="images/groepsfoto.jpg" width="400px" alt="foto niet beschikbaar" /><br /> Groepsfotooooo!</p>

    <h2>EXTRA</h2>
    <p><a href="baby.html" style="color: black;">babysitter nodig</a></p>
</div>

my css code for div with class rechts:

.rechts{
    position:absolute;
    right:10px;
    top:500px;
    background-color:#4CAD5D;
    width: 450px;
    border-radius:4px ;
    box-shadow: 0 10px 7px #fff;
    -webkit-box-shadow: 0 10px 7px black;
    -moz-box-shadow: 0 10px 7px black;
    text-align: center;
}

Answer 1

You have the 'box-shadow' and then the same with vendor prefixes. The first box-shadow has white in it.

Change this:

.rechts {
    box-shadow: 0 10px 7px #fff;
    -webkit-box-shadow: 0 10px 7px black;
    -moz-box-shadow: 0 10px 7px black;
}

To this:

.rechts {
    -webkit-box-shadow: 0 10px 7px #000;
    -moz-box-shadow: 0 10px 7px #000;
    box-shadow: 0 10px 7px #000;
}

You can use black or #000, but I prefer to place the vendor-prefix free line at the end.