Issue with CSS on firefox and chrome

Hey there,
I have a little trouble figuring out where I am missing something on my site.
I am developing a website for this company and I thought I was done.I first thought it may be But after trying publishing it.I found out that my menu disappeared and also when I was trying to zoom in/out my site looked shitty.Dreamweaver made me think It was ready.But it does not work on all other browsers but IE9.
I knew something was wrong with it when MSIE worked and Firefox and chrome not.
Here is the website:http://www.microboticsinc.com/Test/WIP/home.html.The funny thing is that the homepage looks so bad but the other pages are missing only the menu buttons.

Here is the buttons css code:

#products
{
display: block;
width: 166.67px;
height: 46.15px;
background: url("Resources/Web Page Parts/Buttons/products.jpg") no-repeat 0 0;

}

#products:hover
{
background-position: 0 -48.0px;
}

#products span
{

position: absolute;
top: -999em;
}


#home
{
display: block;
width: 166.67px;
height: 46.15px;
background: url("Resources/Web Page Parts/Buttons/home.jpg") no-repeat 0 0;

}

#home:hover
{
background-position: 0 -48.0px;
}

#home span
{

position: absolute;
top: -999em;
}


#support
{
display: block;
width: 166.67px;
height: 46.15px;
background: url("Resources/Web Page Parts/Buttons/support.jpg") no-repeat 0 0;

}

#support:hover
{
background-position: 0 -48.0px;
}

#support span
{

position: absolute;
top: -999em;
}


#contact
{
display: block;
width: 166.67px;
height: 46.15px;
background: url("Resources/Web Page Parts/Buttons/contact.jpg") no-repeat 0 0;

}

#contact:hover
{
background-position: 0 -48.0px;
}

#contact span
{

position: absolute;
top: -999em;
}


#about_us
{
display: block;
width: 166.67px;
height: 46.15px;
background: url("Resources/Web Page Parts/Buttons/about_us.jpg") no-repeat 0 0;

}

#about_us:hover
{
background-position: 0 -48.0px;
}

#about_us span
{

position: absolute;
top: -999em;
}

[/CODE][/QUOTE]

And the one for the background and all the rest:

[QUOTE][CODE]
.outerDiv {
border:solid 3px #transparent;
width:1070px;
height:1000px;
position:relative;
color:black;
font-family:verdana;
font-weight:bold;
font-size:11px;
text-align:left;
/**/
margin: 0 auto;
}

.nestedDivTL {
background-color: #transparent;
width: 175px;
position: absolute;
top: 165px;
left: 10px;
bottom: 596px;
}

.nestedDivTR {
background-color:#transparent;

position:absolute;
top:50px;
right:400px;
}

.nestedDivBL {
background-color:#transparent;
width:400px;
height:300px;
position:absolute;
top:200px;
right:25px;
}

.nestedDivBR {
background-color:#transparent;
width:400px;
position:absolute;
top:200px;
right:450px;
}

.nestedDivBG {
background-color:#transparent;
width:Auto;
height:Auto;
position:absolute;
top:0px;
left:0px;
}

.nestedDivSC {
background-color: #transparent;
position: absolute;
top: 176px;
left: 202px;
}

.nestedDivnf {
background-color:#transparent;
position:absolute;
top:420px;
left:15px;
width: 160px;
height:568px;
bottom: 12px;
/*overflow:hidden;*/

}

a:hover{text-decoration: underline; color:green}



* { margin: 0; padding: 0; }

/* .clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
/* html .clearfix {height: 1%;}*/
/*.clearfix {display: block;}*/
/** End hide from IE-mac */

body
{background-image: url("Resources/Web Page Parts/Misc/Map.gif");
background-repeat:no-repeat center center-fixed;}



html {
background: url("Resources/Web Page Parts/Back Drops/carb.jpg") no-repeat center center fixed;
/*display: block; */ -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}



Can someone please help me figuring out what I missed or omitted?