Drop shadow not appearing in Firefox

[compulsiveguile]

I'm having trouble getting a drop shadow to appear when viewing my website in Firefox. When I view it in Safari, I have no issues. I'm pretty much just overlaying images, so I can't determine what the issue might be. I'm not familiar with the differences in Firefox and Safari (in regard to how they handle xhtml, css, etc.).

You can see what I'm seeing here (http://greg-loesch.com/osu). Load it up in two different browsers and check out the navigation panel on the lefthand side. Also, why would Firefox place a border around that xhtml verification icon in the bottom left and not Safari?

Here's the relevant CSS code.


/*--Menu--*/

.menu-container{
margin-left: 30px;
margin-right: 20px;
width: 150px;
height: 150px;

background: url(images/top-shadow-menu.png), repeat-y;
}

#menu{
float: left;
width: 120px;
margin-top: -8px;
margin-left: 10px;
font-variant: small-caps;
font-size: 15px;

}


Feel free to give constructive criticism regarding how I'm attempting to implement drop-shadows. I've Googled a lot, and I haven't been able to make really clear sense of a lot of the CSS drop-shadow tutorials I've come across...

[Wickham]

The border around the verification icon is a link border (changes color on hover in IE) so add
img { border: none; }
into the stylesheet.

The drop shadow code is wrong, but some browsers have guessed correctly, IE 7 and Firefox have not. It should be:-

.menu-container{
margin-left: 30px;
margin-right: 20px;
width: 150px;
height: 150px;

background: url(images/top-shadow-menu.png) repeat-y;
}

You had a comma before repeat-y which disabled that style.