Table / Div Layout in Firefox - Compatibilty Issues?, The page does not display correctly in Firefox Options

[Happy Jack]

Good evening, my first post, and I have a annoying problem.

I am currently building a site for a online radio station. All has been fine and dandy, no problems at all with the layout or flash player in every browser - perfect.

Yesterday, after some late night tweaking , I seem to have made an edit to the CSS file, or DIV tags, that now does not wrap the content, or display the site as it once was. This version was saved, and I now cannot backtrack. All the stranger, that this mystery problem is non-existent in IE.

Can anyone at all please point out where I have gone wrong. For the life of me, I cannot see where this has happened. I'm sure an experienced eye can spot this in a second.

Many thanks,
Jack

My Webpage - KAOS Sound Radio

CSS File -

CODE

* {
margin: 0;
padding: 0;
}

body {
background: #333 url("images/back.gif") repeat;
text-align: center;
font: normal 11px/18px verdana, arial, tahoma, sans-serif;
color: #333;
padding-top: 40px;
}

a {
color: #666;
text-decoration: none;
}

a:visited {
text-decoration: underline;
}

a:hover {
color: #ccc;
}

#topbar {
width: 900px;
height: 30px;
background: #000000 no-repeat;
}

#header {
width: 900px;
height: 210px;
background: #000 url("images/header2.jpg") no-repeat;
background-position: top right;
}

#wrapper {
width: 900px;
background-position: 0 0;
border: solid 10px #000;
margin: 0 auto;
text-align: left;
}

h1 {
width: 205px;
height: 30px;
background-color: #333;
margin: 1px 1px 1px 0;
float: left;
font: bold 16px/30px arial, verdana, tahoma, sans-serif;
padding-left: 10px;
color: #fff;
cursor: default;
}

h1:first-letter {
color: #0066ff;
text-decoration:;
}

h2 {
width: 674px;
height: 30px;
background-color: #333;
float: left;
font: bold 16px/30px arial, verdana, tahoma, sans-serif;
padding-left: 10px;
color: #fff;
margin-top: 1px;
cursor: default;
}

#nav {
list-style: none;
z-index: 2;
border-right: 1px solid #fff;
height: 210px;
width: 215px;
}

#nav li a {
color: #0099ff;
font: normal 11px/24px verdana, arial, tahoma, sans-serif;
display: block;
width: 205px;
height: 24px;
background-color: #000;
border-bottom: 1px solid #fff;
padding-left: 10px;
text-decoration: none;
}

#nav li a:hover {
background-color: #333;
}

#current a {
background-image: url("images/bullet.gif");
background-repeat: no-repeat;
background-position: 100% 50%;
}

#sidebar {
width: 132px;
background-color: #ccc;
float: left;
position: relative;
left: -4px;
margin-left: -147px;
border-top: 1px solid #fff;
font: normal 10px/18px verdana, arial, tahoma, sans-serif;
padding: 8px;
}

img {
border: none;
}

a img {
display: block;
margin-bottom: 20px;
border: 1px solid #fff;
}

a:hover img {
border-color: #f00;
}

#content {
float: left;
width: 100%;
}

p {
margin-bottom: 20px;
}

p:first-line {
}

#footer {
background-color:#000000
width: 900px;
margin-left:;
}

[Darin McGrew]

I recommend that you start by fixing the markup errors and CSS errors reported by the online tools.