CODEWITHSUNDEEP
htmlfirefoxgoogle-chromecss
user1302223
user1302223

Reputation: 3

Box Shadow working in Chrome but not in IE and Firefox

I have a box shadow written to work for a certain element, and it works fine in Chrome but does NOT work in Firefox and Internet Explorer. My website has three divs (header, body, footer) and they work for both Chrome AND Firefox for the other 2 fine.

Here is my code:

#footer {
background-image:url(../../images/footer-extend.png);
background-repeat: repeat-x;
width: 960px;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
overflow:hidden;
padding-top: 35px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;

margin:0 auto;
margin-top: -10px;
margin-bottom: 100px;
/* BOX SHADOW */

-moz-box-shadow: 6px 0 6px  -4px #222, -6px 0 6px  -4px #222, 0px 6px -4px #222;  
-webkit-box-shadow: 6px 0 6px  -4px #222, -6px 0 6px  -4px #222, 0px 6px -4px #222;
box-shadow: 6px 0 6px  -4px #222 , -6px 0 6px  -4px #222, 0px 6px -4px #222; 
}

Upvotes: 0

Views: 1221

Answers (2)

CSS Guy
CSS Guy

Reputation: 1984

Try this this will work in Firefox and Ie9

-moz-box-shadow:10px 10px 5px #000000;
-webkit-box-shadow:10px 10px 5px #000000;
box-shadow:10px 10px 5px #000000;

Upvotes: 0

drublic
drublic

Reputation: 993

Your box-shadow uses a negative value for blur in the last declaration. Are you maybe missing something and want to use the negative blur as spread?

I guess Firefox does not support negative blur, which seems to be legit, as this does not make any sense.

Try this (remember to apply it to the prefixed versions as well):

box-shadow: 6px 0 6px -4px #222, -6px 0 6px -4px #222, 0 6px 0 -4px #222;

Upvotes: 2

Related Questions