Ok, my problem is simple. My website looks great in FireFox, however when viewd in IE, everything is reaaaally messed up. It's my menu bar and stuff on the left that is messed up.

Here's the style sheet:
Code:
 
body {
background: #E8E8E8;
font: 16px Verdana, sans-serif;
}
#left {
width: 159px;
height: 900px;
background: url(../Pictures/crackback.gif);
float: left;
margin-right: 20px;
}
#right {
width: 75%;
float: right;
}
a:link {color: #104E8B;
text-decoration: none;
background-color: transparent }
a:visited { color: #4169E1;
text-decoration: none;
background-color: transparent }
a:hover { color: #00066;
text-decoration: underline; 
background-color: transparent }
a:active { color: #A9ACB6; 
text-decoration: underline; 
background-color: transparent }
.title { text-align: center}
.floaty {
float: right;
}
#navlist
{
padding: 0 1px 1px;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;
}

#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}

#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.8em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
border-color: #000066;
color: #FFF;
background: #4169e1;
}
#good {
text-align:center;
}
And here's the page itself:
Code:
<html>
<title> Marcon Inc.</title>
<LINK TYPE="text/css" HREF="styles/Marcon.css" REL="stylesheet">

<body>
<div id="left">
<br>
<br>
<img src="pictures/marconLogo.gif">
<div id="navlist">
<ul id="navlist">
	<li><a href="index.html" title="home">Home</a></li>
	<li><a href="projects.html" title="prior">Previous Projects</a></li>
	<li><a href="staff.html" title="staff">Staff</a></li>
	<li><a href="concrete.html" title="ITD">Products</a></li>
	<li><a href="contact.html" title="contact">Contact Us</a></li>
</ul>
</div>
</div>
<div id ="content">
<br><br>
<br><br>
<br><br>
<br>
<h1><center>Welcome to Marcon, Inc.</center></h1>
</div>
</div>

</body>
</html>