Menu looks great in Firefox, not so much in IE

[CKich30]

When viewing my page (siuehockey.net ) in Firefox, it's setup how I want it to look. When i viewed it using IE, the menu at the top runs into the "Cougar Hockey/cougarhockey.ne t" at the top left. It's leaving off two menu selections: Contact, and Cougar History, which when loading the page get covered up by the banner picture.

Here's the CSS for the site:

body {
    margin: 0;
    padding: 0;
    background: #000000 url(images/img01.jpg) repeat-x left top;
    text-align: justify;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #404040;
}
 
form {
    margin: 0;
    padding: 0;
}
 
fieldset {
    margin: 0;
    padding: 0;
    border: none;
}
 
input, textarea, select {
    font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
 
h1, h2, h3 {
    font-weight: normal;
    color: #212121;
}
 
h1 {
    letter-spacing: -1px;
    font-size: 2.2em;
}
 
h2 {
    font-size: 1.4em;
}
 
h3 {
    font-size: 1.2em;
}
 
p, ul, ol {
}
 
p {
}
 
.blockbg {
    background: #D9D785;
}
 
blockquote {
    background: url(images/img08.jpg) no-repeat left top;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    margin: 0 0 0 15px;
    padding: 0px 20px 0px 30px;
    font-size: 18px;
    color: #3D3D3D;
}
 
ul {
}
 
ol {
}
 
a {
    color: #808080;
}
 
a:hover {
    text-decoration: none;
}
 
small {
}
 
hr {
    display: none;
}
 
img {
    border: none;
}
 
img.left {
    float: left;
    margin: 0 15px 0 0;
    border: #D9D785 1px dashed;
}
 
img.right {
    float: right;
    margin: 0 0 0 15px;
    border: #D9D785 1px dashed;
}
 
.text1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    margin: 0 0 0 15px;
    padding: 90px 20px 0px 30px;
    font-size: 30px;
    color: #FFFFFF;
}
 
/* Header */
 
#header {
    width: 900px;
    margin: 0 auto;
    height: 71px;
    letter-spacing: -1px;
    font-family: Georgia, "Times New Roman", Times, serif;
}
 
 
#headerbg {
    clear: both;
    margin: 0 auto;
    width: 900px;
    height: 208px;
    background: url(images/era.jpg) no-repeat left top;
    margin: 0 auto;
    margin-top: 20px;
}
 
/* Logo */
 
#logo {
    float: left;
    margin-top: 30px;
}
 
#logo h1, #logo h2, #logo p {
    float: left;
    margin: 0;
    text-transform: lowercase;
}
 
#logo h1 {
    background: url(images/img04.jpg) no-repeat left 50%;
    padding-left: 60px;
    text-align: center;
    font-size: 3.2em;
    color: #000000;
}
 
#logo h1 a {
    color: #000000;
}
 
#logo p {
    padding-top: 27px;
    text-transform: uppercase;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color: #000000;
}
 
#logo h2 a, #logo p a {
    color: #000000;
}
 
#logo a {
    text-decoration: none;
}
 
/* Menu */
 
#menu {
    float: right;
    margin-top: 21px;
}
 
#menu ul {
    margin: 0;
    list-style: none;
}
 
#menu li {
    display: inline;
}
 
#menu a {
    display: block;
    float: left;
    padding: 30px 20px 0 20px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #4E4E4E;
}
 
#menu a:hover {
    background: url(images/img03.jpg) no-repeat center top;
}
 
#menu .current_page_item a {
    background: url(images/img03.jpg) no-repeat center top;
}
 
/* Page */
 
#page {
    width: 900px;
    margin: 0 auto;
    padding-top: 20px;
    background: #F4F4F4;
}
 
#latest-post {
    float: left;
    width: 570px;
    padding: 0px 20px 0px 20px;
    line-height: 25px;
    font-size: 12px;
}
 
#recent-posts {
    float: right;
    width: 250px;
    padding: 0px 20px 20px 20px;
    line-height: 25px;
    font-size: 12px;
}
 
#recent-posts .entry {
}
 
#recent-posts .entry a {
    background: #333333;
    padding: 5px 10px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 10px;
    color: #FFFFFF;
}
 
#recent-posts .more {
    background: url(images/img04.gif) no-repeat left 50%;
    padding-left: 20px;
}
 
.post {
}
 
.post .title {
    margin: 0;
}
 
.post .meta {
    margin: 0;
    padding-bottom: 10px;
    padding-top: 10px;
    line-height: normal;
    font-size: 13px;
    color: #505050;
}
 
.post .meta a {
    color: #808080;
}
 
.post .entry {
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: #9C9C9C 1px dashed;
 
}
 
table
{
margin-left: auto;
margin-right: auto;
}
 
 
/* Sidebar */
 
#sidebar {
    clear: both;
    width: 900px;
    background: #FF0000;
    color: #CCCCCC;
    padding: 10px 0 0 0;
}
 
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
#sidebar li {
    display: block;
    float: left;
    width: 187px;
    padding: 10px 10px 10px 25px;
}
 
#sidebar li ul {
    line-height: 1.8em;
}
 
#sidebar li li {
    display: list-item;
    background: url(images/img07.gif) no-repeat left 50%;
    float: none;
    width: auto;
    padding: 0 0 0 10px;
    line-height: 25px;
}
 
#sidebar h2 {
    margin: 0 0 10px 0;
    color: #000000;
}
 
#sidebar a {
    text-decoration: none;
    color: #000000;
}
 
#sidebar a:hover {
    text-decoration: underline;
}
 
/* Footer */
 
#footer {
    width: 900px;
    height: 50px;
    margin: 0 auto;
    margin-bottom: 20px;
    background: url(images/img06.jpg) no-repeat left top;
    font-size: 11px;
    color: #CCCCCC;
}
 
#footer p {
    margin: 0;
    padding: 13px 20px 15px 20px;
}
 
#footer a {
    color: #FFFFFF;
}
 
#legal {
    float: left;
}
 
#links {
    float: right;
}
 
 

Thanks for the help!

[David Laakso]

It is a testament to software engineers and browser error recovery that the page proper even shows up on the screen at all in any browser. The document doctype XHTML Strict 1.0 yields no less than 427 markup validation errors (not to mention there are numerous CSS errors). The document is actually "HTML proprietary."

What to do? Nevertheless, let's try...
1/ Change the doctype to (this will reduce the markup errors from 427 to less than 10 errors):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 

2/ In the head of the document, immediately above </head>, insert this "conditiona l comment" with styles within it to target IE/7.0 for corrections only to #header. (BTW, I was afraid to check your page in IE/6-- so I didn't even open it in that browser).

<!--[if IE 7 ]>
<style>
#h1 #logo, #logo p {zoom: 1;}
#logo p {  margin-top: -10px;}
#menu {float: none;margin-top: 98px;}
#headerbg {margin-top: 78px;}
</style>  
<![endif]-->
 

I'll leave resolution of all issues below the header in IE/7 and compliant browsers to you and/or another member of the forum.
Good Luck!
PS
When you supply the page URI, as you have done, anyone can open the CSS file...