css box shadow not working

[jtrinker]

I’m trying to add a css drop shadow to the header, but I’m not getting any change in the appearance.

html:

    




















The Elements | About | Work | Contact | Home

css:

div.shadow {

-moz-box-shadow: 5px 15px 5px 0px #000;

-webkit-box-shadow: 5px 15px 5px 0px #000;

box-shadow: 5px 15px 5px 0px #000;

}



div#header {

background-color: #5c5d60;

position: absolute;

margin-bottom: 10px;

top: 0px;

left: 0px;

width: 960px;

height: 83px;

}

I appreciate your help!

[jtrinker]

And i already changed

to

[DogsGhost]

you have too many numbers in the value of your box-shadow property.
Also your navigation is in a paragraph tag…

[jtrinker]

Where does

go in relation to

?

[chrisburton]

I believe the shadow didn’t work because you did not have a set width on the shadow div. You are using extra markup than needed so I condensed and applied the code below for you.

HTML

CSS

#header {

background-color: #5c5d60;

width: 960px;

height: 83px;

-moz-box-shadow: 5px 15px 5px 0px #000;

-webkit-box-shadow: 5px 15px 5px 0px #000;

box-shadow: 5px 15px 5px 0px #000;

margin-bottom: 10px;

}

@Dogsghost, this person does not have too many “numbers” inside the shadow.

box-shadow is applied like this:

horizontal shadow
vertical shadow
blur
spread
color
inset

[Soraph]

Adding a width will not fix the issue @ChristopherBurton

[Paulie_D]

@ChristopherBurton Has it right: http://codepen.io/anon/pen/jeycp

[Author]

Posts