Yet another newbe with CSS firefox problems!!

Howdy. my website looked perfect in firefox..untill i put all the layers into a CSS file. now all my icons appear justified to the left, i have no idea why....it works fine in IE any help would be great!!

Web Page= http://www.elitesleep.com/Pages/index.html

CSS=body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background-repeat: repeat;
background-image: url(../Pics-and-tabs/background.jpg);
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

img {
border: none;
}


/*- Menu 8--------------------------- */

#menu8 {
width: 200px;
margin: 10px;
border-style: solid;
border-color: #656556;
border-size: 1px;
border-width: 1px;
}

#menu8 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu8 li a:link, #menu8 li a:visited {
color: #656556;
display: block;
background: url(menu8.gif);
padding: 8px 0 0 20px;
}

#menu8 li a:hover, #menu8 li #current { {
color: #474739;
background: url(menu8.gif) 0 -32px;
padding: 8px 0 0 20px;
}

#Layer1 {
position:absolute;
left:-1px;
top:1px;
width:137px;
height:98px;
}
#Layer2 {
position:absolute;
left:44px;
top:4px;
width:200px;
height:100px;
z-index:2;
visibility: inherit;
}
#Layer3 {
position:absolute;
left:306px;
top:22px;
width:100px;
height:97px;
z-index:3;
}
#Layer4 {
position:absolute;
left:517px;
top:41px;
width:147px;
height:85px;
z-index:4;
}
#Layer5 {
position:absolute;
left:1085px;
top:389px;
width:55px;
height:32px;
z-index:5;
}
#Layer6 {
position:absolute;
left:1050px;
top:331px;
width:39px;
height:42px;
z-index:6;
}
#Layer7 {
position:absolute;
left:1009px;
top:271px;
width:93px;
height:56px;
z-index:7;
}
#Layer8 {
position:absolute;
left:928px;
top:203px;
width:36px;
height:63px;
z-index:8;
}
#Layer9 {
position:absolute;
left:683px;
top:81px;
width:85px;
height:46px;
z-index:9;
}
#Layer10 {
position:absolute;
left:812px;
top:146px;
width:89px;
height:72px;
z-index:10;
}
#Layer11 {
position:absolute;
left:10px;
top:1px;
width:1179px;
height:455px;
z-index:11;
}
#Layer12 {
position:absolute;
left:141px;
top:232px;
width:119px;
height:80px;
z-index:11;
}
#Layer13 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#Layer14 {
position:absolute;
left:273px;
top:233px;
width:392px;
height:77px;
z-index:3;
}
#Layer15 {
position:absolute;
width:353px;
height:115px;
z-index:4;
left: 120px;
top: 50px;
}
#Layer23 {
position:absolute;
left:918px;
top:71px;
width:229px;
height:62px;
z-index:7;
}
#Layer17 {
position:absolute;
left:1004px;
top:66px;
width:161px;
height:104px;
z-index:4;
}
#Layer18 {
position:absolute;
width:193px;
height:49px;
z-index:1;
left: 42px;
top: 26px;
}
#Layer19 {
position:absolute;
left:7px;
top:155px;
width:269px;
height:413px;
z-index:4;
}
#Layer20 {
position:absolute;
left:343px;
top:233px;
width:592px;
height:118px;
z-index:5;
}
#Layer21 {
position:absolute;
left:344px;
top:396px;
width:591px;
height:316px;
z-index:6;
}

#Layer29 {
position:absolute;
left:864px;
top:35px;
width:271px;
height:32px;
z-index:3;
}

#Layer16 {
position:absolute;
left:891px;
top:45px;
width:310px;
height:88px;
z-index:7;
}

 

position:absolute; - z-index:...; = you probably dont need this, try to write hand code

 

Let's see... multiple empty h1's? Spans inside of paragraphs without applying styling that couldn't just be applied directly? Meaningless generic classnames? Unclosed DIV's? unneccessary DIV's?

Almost as many validation errors as you have lines of code?

MUST be dreamweaver being used in WYSIWYG mode. Do yourself a favor, throw DW in the trash, grab a flat text editor and do this stuff by hand.

 

Not only that, but the Web site is inaccessible to people who don't have images turned on (or are using a screen reader or a text-based browser like Lynx) on top of being a usability disaster (horizontal scrollbar in Opera 9.22 at 1024x768? BAD IDEA).

I strongly suggest a complete site redesign before you re-code the site to make it work. I recommend starting with a canvas width of about 750-760px since despite most people having a screen resolution of 1024x768 not everyone will have their browser window maximized to fill that space, in addition to the fact that the browsers (IE 6/7, Firefox, Opera, Safari, Konqueror being the major ones) need to use some of that space for the scrollbars, sidebars (yes, even browsers can have sidebars for additional features or information, they're typically referred to as toolbars) and other chrome.

And please, don't use absolute positioning or image maps. Absolute positioning just removes the element completely from the flow and will position it relative to the browser window (unless the HTML element's parent has been set with position: relative or absolute first). I strongly suggest using floats and/or margins (including negative margins, where appropriate) instead.

If you need help making this work, feel free to ask. Deathshadow and I are more than capable of performing miracles with even the most complex of layouts (what's "too difficult" for most coders is just anywhere from a walk in the park to a good exercise in out-of-the-box thinking for us). Oh, and our advice is always free.