Works in FF but not in IE

Sorry all, yet another FF/IE inconsistency. This has got to be the most frustrating part about web developing–nonstandards compliant web browsers. Sad thing is that IE has the majority of the market share so you can’t just ignore it.

Anyway, here’s a link to the site I’m working on:
[URL]home.earthlink.net/~frijolie/index.html[/URL]

when viewing it in FF, it’s 98% perfect and almost done. If you view the same page in IE the #leftnav is all messed up. I have no idea what IE is complaining about so I don’t even know where to begin fixing it. Any ideas on where to start or what I can do to fix it?

Thanks in advance

You can view sorce to get the XHTML and below is the css code:

[CODE]
body {
text-align: center;
background-color: silver;
color: black;
}

#wrapper {
text-align: left;
width: 90%;
margin: 3em auto;
border: 1px solid black;
background-color: white;
color: black;
}

#header {
background-color: gray;
border-bottom: 1px solid black;
color: white;
padding: 0.5em;
}

#header h1 {
padding: 0;
margin: 0;
background-color: transparent;
}

#leftnav {
float: left;
width: 15%;
margin: 0;
padding: 1em;
background-color: #FFF;
border-right: 1px solid black;
color: black;
}

#leftnav ul {
list-style-type: none;
margin-left: 1.5em;
padding: 0;
}

#leftnav li {
padding: 0;
margin: 0;
}

.category {
margin: 1em;
padding: 0.5em;
border: 1px solid black;
background-color: #DDD;
color: black;
}

.category h3 {
text-align: center;
background-color: #BBB;
margin-top: -5px;
color: black;
}

.category table {
margin: 0 auto;
width: 100%;
}

.category table td {
text-align: center;
border: 1px solid black;
}

#buttons ul {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 2em;
text-align: center;
}

#buttons li {
height: 25px;
width: 75px;
margin: 10px;
text-align: center;
}

#buttons li a {
height: 100%;
width: 100%;
display: block;
text-decoration: none;
border-width: 3px;
border: 1px solid black;
}

#buttons li a:link {
color: #000;
font-weight: bold;
background-color: #CCC;
border-style: outset;
}

#buttons li a:visited {
color: #000;
font-weight: normal;
background-color: #CCC;
border-style: outset;
}

#buttons li a:hover {
font-weight: bold;
color: #FFF;
background-color: #999;
border-style: outset;
}

#buttons li a:active {
font-weight: bold;
color: #FFF;
background-color: #999;
border-style: inset;
}

#main {
margin-left: 18%;
padding: 1em;
background-color: white;
color: black;
}

#main p {
padding: 0;
line-height: 150%;
text-indent: 2em;
background-color: transparent;
}

.entry {
margin: 2em;
border: 1px solid black;
padding: 10px;
background-color: #DDD;
color: black;
}

.entry h2 {
background-color: #BBB;
padding: 0.2em;
margin: 0;
color: black;
}

#footer {
clear: both;
margin: 0;
padding: 1em;
color: white;
border-top: 1px solid black;
background-color: gray;
}

#footer h3 {
margin: 0;
padding: 0;
}

img {
border: none;
}
[/CODE]

Also in #CSS _↴