CSS trouble with Firefox

[awesomemn]

Hello,

I am new at CSS, so please bare with me. I designed a layout based on some tutorial I read and the layout works fine in IE 6.. I load it in Firefox and the DIVs below the header get moved up and underneath the header DIV, and the layout is not centered on the page. My Ad button DIV also seems crunched.

View the page at http://www.myawesome.com/test1.html
View the CSS file at http://www.myawesome.com/teststyles1.css

Note: I know my links are not good, colors clash, the links will actually be LI items with CSS mouseover in the finished version.

Any help is greatly appreciated.

Thanks!

[_Aerospace_Eng_]

Really just simple mistakes. Its clear that your #header div is not 95px high. Its actually taller than that. As for centering IE incorrectly centers block level elements like divs, the correct way to center a block level element is margin:auto. Add a div around the rest of your html and give it id="container" and try this for your CSS
body {
background-color:#44466D;
font-family:"Trebuchet MS", Arial, sans-serif;
font-size:100%;
color:#333;
text-align:center;
margin:5px;
padding:5px;
}

a img {
border:0;
}

#container {
width:770px;
margin:auto;
}

#header {
margin:0 0 5px;
}

#mainwrapper {
background-color:#44466D;
border:1px solid #FFF;
text-align:left;
margin:10px 0 0;
padding:0;
}

#maincontent {
background-color:#000;
float:right;
width:580px;
border:1px solid #646699;
font:0.9em Arial, Helvetica, sans-serif;
color:#FFF;
height:100%;
padding:10px;
}

#sidebar {
float:left;
width:130px;
font-size:.8em;
text-align:left;
padding:0 0 0 6px;
}

#sideadbutton {
width:124px;
background-color:#210042;
border:1px solid #646699;
font:11px Arial, Helvetica, sans-serif;
color:#FFF;
margin:0;
padding:4px;
}

#nav {
margin:2px 0 0 -4px;
padding:0;
}

#nav li {
list-style-type:none;
margin:0 0 -6px;
padding:0;
}

#nav a,#nav a:visited {
text-decoration:none;
border:1px solid #FFF;
background-color:#373963;
color:#FFF;
display:block;
padding:5px;
}

#nav a:hover,#nav a:active,#nav a:focus {
color:#306;
background-color:#A5A7C7;
font-weight:700;
}

h2 {
font-size:1.2em;
margin:24px 0 0;
}

#footer {
clear:both;
border-bottom:3px dotted #FFF;
font:normal 0.7em Arial, Helvetica, sans-serif;
color:#FFF;
letter-spacing:6px;
border-top:3px dotted #FFF;
margin:10px 0 0;
padding:5px;
}

#footer p {
margin:0;
}

.clear {
clear:both;
font-size:0;
line-height:0px;
}
I removed a few widths and heights.

[awesomemn]

Thanks, that worked!

Now I went in and made my navigation links with <li> and they display fine with the spacing I want between them in IE but in Firefox there is negative spacing between each nav <li>. Any ideas?

Thanks again!

[_Aerospace_Eng_]

What did you expect when you put negative margins?
#nav {
margin:2px 0 0 -4px;
padding:0;
}

#nav li {
list-style-type:none;
margin:0 0 -6px;
padding:0;
}
Try this for your CSS
body {
background-color:#44466D;
font-family:"Trebuchet MS", Arial, sans-serif;
font-size:100%;
color:#333;
text-align:center;
margin:5px;
padding:5px;
}

a img {
border:0;
}

#container {
width:770px;
margin:auto;
}

#header {
margin:0 0 5px;
}

#mainwrapper {
background-color:#0099FF;
border:1px solid #FFF;
text-align:left;
margin:10px 0 0;
padding:0;
}

#maincontent {
background-color:#000;
float:right;
width:580px;
border:1px solid #646699;
font:0.9em Arial, Helvetica, sans-serif;
color:#FFF;
height:100%;
padding:10px;
}

#sidebar {
float:left;
width:154px;
font-size:.8em;
text-align:left;
padding:0 0 0 6px;
}

#sideadbutton {
width:144px;
background-color:#210042;
border:1px solid #646699;
font:11px Arial, Helvetica, sans-serif;
color:#FFF;
margin:0;
padding:4px;
}

#nav {
margin:2px 0 0 0;
padding:0;
}

#nav li {
list-style-type:none;
padding:0;
}

#nav a,#nav a:visited {
text-decoration:none;
border:1px solid #FFF;
background-color:#373963;
color:#FFF;
display:block;
padding:5px;
}

#nav a:hover,#nav a:active,#nav a:focus {
color:#306;
background-color:#A5A7C7;
font-weight:700;
}

h2 {
font-size:1.2em;
margin:24px 0 0;
}

#footer {
clear:both;
border-bottom:3px dotted #FFF;
font:normal 0.7em Arial, Helvetica, sans-serif;
color:#FFF;
letter-spacing:6px;
border-top:3px dotted #FFF;
margin:10px 0 0;
padding:5px;
}

#footer p {
margin:0;
}

.clear {
clear:both;
font-size:0;
line-height:0px;
}
Also change this
</div>
<div style="clear:both;"></div>
to this
</div>
<div class="clear">&nbsp;</div>
This line is also wrong
<img src="images/css_top1a.gif" alt="Go to Home Page" width="770" height="218" border="0" /></img>
Why do you have </img>?
Its not doing anything, the /> on the image tag closes that image. Remove </img>. And get rid of border="0" in that image tag as well.

[awesomemn]

Thanks that at least got the nav items to not overlap, but there still is a big spacing difference. When viewing in IE there is lots of space between each line item (almost too much to my liking) and in Firefox there is no spacing between each item. How do I get it to display the correct amount of space?

The img tag I had butchered when copying/pasting some <a> tags, I made a </img> tag by accident.

The reason I was trying negative values for the nav items is IE showed more space between each item than I liked, the negative values made it have the spacing I liked in IE but in firefox it overlapped. :)

Should I be closing my img tags like <img src="file.jpg" /> ?
Should I be closing my body, header, a, tags <body /> or </body> ?

Thanks for helping an old school HTML guy that built everything with tables. CSS is a whole new world for me. I greatly appreciate it!! :)

[_Aerospace_Eng_]

I suggest you do a search on "What is XHTML?". You don't seem to know how it works or much less what it actually is. As for the spacing issue, add this to your CSS
* html #nav li, * html #nav li a {
height:1%;
}
Look up the * html CSS hack. You will get a lot of information on it. Since it only seems to happen in IE6 its safe to use the * html hack. IE7 doesn't support it.