DropShadow and Round Corners Across Browsers

[ann_donnelly]

This isn't a specific Prose question, but I am working on a site using Prose that I need to get this working on.

We need a drop shadow around the main site area, around the navigation bar and the buttons.

For the shadow around the site I've added to the custom.css:

#wrap {background: url(images/header.png) no-repeat left top #FFFFFF;
width: 980px;
margin: 0 auto 0;
padding: 10px;
border: 0;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px;
-webkit-box-shadow: #333 0px 1px 3px;
box-shadow: 0px 1px 3px #333;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength =3, Color='#333333')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength= 3, Color='#333333');
position: relative;
overflow: hidden;
}

This is working fine in Chrome and somewhat in IE but not exactly as I'd like it to be -- only 2 sides of the page, not 3 and not quite as nicely. I think it should be working in FF based on posts I've viewed on the topic, but the drop shadow isn't working at all.

Trying same effect for the navigation bar, but I also need rounded corners here. The rounded corners are working in Chrome and FF, but not IE and from what I've read you really need to use images for it to work in IE.

If this doesn't work out I need to work out how to do this with images backgrounds.

The site is http://sallyhansen.ie/draft/

Any advice?