CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxbox-shadow
Dries Jans
Dries Jans

Reputation: 107

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

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;
}

Upvotes: 4

Views: 255

Answers (2)

L84
L84

Reputation: 46308

It is a good practice to write your code with prefixes first then unprefixed next, IE: 

-webkit-box-shadow: 0 10px 7px black;
-moz-box-shadow: 0 10px 7px black;
box-shadow: 0 10px 7px #fff;

The problem here is your unprefixed box-shadow is #fff which equals white. Some browsers (depending upon versions, etc.) will use the unprefixed version, even if a prefixed version comes after the unprefixed version.

Change it to box-shadow: 0 10px 7px #000; (or use black in place of #000) and you will be good.

Upvotes: 1

ezattilabatyi
ezattilabatyi

Reputation: 357

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.

Upvotes: 5

Related Questions