Navigation Positioning Problems -Cross browser

I’ve been putting this site together that uses a lot of transparency and stacking of elements on the page to achieve its look. I’ve been trying everything to get this to display properly and running into issues.

I have it almost worked out at this point, but I’m getting this odd space in between “services” and “gallery” and I can’t seem to figure it out. I think the same thing might be related to the drop-down menus being moved to the right also.

The image below the navigation is also being pushed down too far, but I’m thinking I can correct that with negative margin once I get the navigation worked out.

Any ideas on how to fix this? I have been messing around with it for hours trying to get it working.

Here’s the site;
test7.triple7studio.com

The CSS;

[CODE].container {
width:960px;
height:auto;
margin: 0 auto 0 auto;
}
#social-btn{
margin:-3px 5px 0px 5px;
border:none;
}

#contact-btn{
font: 16px Tahoma, Geneva, sans-serif;
font-weight:600;
letter-spacing:2px;
text-align:right;
position:relative;
top:-10px;
}
.logo {
clear:both;
}
.main-copy{
font: 14px Tahoma, Geneva, sans-serif;
letter-spacing:1px;
line-height:150%;
}
#rule{
margin: 5px 0px 5px 0px;
clear:both;
}

.contact-header{
text-align:right;
margin-top:-5px;
}
.contact-header a {
text-decoration:none;
list-style:none;
color:#fff;
}
.contact-header a:hover {
color:#090;
}

#nav-bg{
position:relative;
top: -19px;
z-index:1;
}

.nav{
position:relative;
top:-83px;
left: 19px;
z-index:5;
}

/* Navigation Style */

#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;
line-height:37px;
text-align:center;
margin: 0;
padding: 0
}

#jsddm li a
{ display: block;
height: 37px;
width: 186px;
background-image: url(/images/trans-bar.png);
background-repeat:repeat-x;
text-decoration: none;
color: #EAFFED;
white-space: normal;
}

#jsddm li a:hover
{
background:#999;

}

#jsddm li ul
{

visibility: hidden
}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background-image: url(/images/trans-bar.png);
background-repeat:repeat-x;}

#jsddm li ul li a:hover
{ background-image: url(/images/trans-bar.png);
background-repeat:repeat-x;}

.nav-cat
{
font-size:16px;
line-height:37px;
text-align:center;
}
.cover{
clear:both;
margin-top:-20px;
margin-left:23px;
}

#cover-img{
clear:both;
}

.content-container{
width:850px;
background:#FFF;
margin-top:-200px;
margin-left:63px;
}

.content-area-bg{
margin-top:0px;
}
#content-header-img
{
position:relative;
top:-183px;
}
.footer{
margin-top:0px;
margin-left:26px;
}[/CODE]

Also in #CSS _↴