View Full Version : Menu Shadow

11-11-2011, 02:23 AM

I have a menu bar created in Spry with a drop shadow.

When I view it in Firefox or IE9 the shadow does not show?

This is the code I believe that created it.

ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #F9C;
padding: 0.2em 0.75em;
color: #333;
text-decoration: none;
border-radius: 20px;
-webkit-box-shadow: 2px 2px 3px #000;

Appreciate any help.


11-11-2011, 02:44 AM

Ok. I got the shadows working by adding the following:

-moz-box-shadow: 2px 2px 3px #000;
box-shadow: 5px 5px 5px #ccc;

This gives me the shadows - Yeah!!

I am a noob, sigh

11-11-2011, 03:42 AM
Do you know what -moz is?
And why did you remove -webkit?

11-11-2011, 01:48 PM
Hi Domedia,

Again..I am a total noob here.

I believe -moz is something to get FireFox to display the css correctly for box shadow?

The webkit is still there I just didn't put it in my post.

If you could explain this bit of code I would appreciate it.


11-11-2011, 02:49 PM
The -moz- prefix is for Firefox 3.6 and below. For 4+ you don't need the prefix anymore. Webkit browsers (Safari and Chrome) still need the prefixes. For Opera and IE9 the W3C standard is also enough.

If you do a box-shadpw the values should be exact the same... I see in your example here that the -moz-box-shadow differs from the W3C standard one.

The 1st value is the x offset, the second is the y offset, the third is the blur and there is a 4th value for spread.

If you work a lot with css3, you'll notice that your stylesheet can become lengthy because of all the prefixes we need and it sucks with typing them of course.

There is a handy polyfill which solves this problem. You only have to write the normal, W3C standard, one and the polyfill handles the rest. A time saver!


11-11-2011, 04:34 PM
Any dash before a CSS property is a browser specific proprietary property.

The CSS standard makes room for these when browser wants to support CSS properties that are not made standard yet for example.

So '-moz' is used by mozilla, '-o' is used by Opera, and '-webkit' is used by the webkit engine used in Google Chrome and Safari (among others).

The browser support with the shadow you are using can be broken down by browser support like this

-webkit-box-shadow: 2px 2px 3px #000; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 2px 2px 3px #000; /* FF3.5 - 3.6 */
box-shadow: 2px 2px 3px #000; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */

EDIT: Did not see the previous post, believe it or not :)

11-12-2011, 03:00 AM

Wow. Thank You both for the explanations.

I see its gonna be a good while before I have any proficiency in Web building.


Thanks for the time and the explanations.