Menu not displaying correctly in IE

[bramsibma]

I am working on a website for my hobby: <snip> all looking fine in Chrome but when I watch it in IE it stinks... the blocks are not displayed correctly.

This is the following css I use:

#menu {
float: left;
width: 125px;
}
#menu ul {
clear: left;
margin: 0px;
padding: 0px;
width: 125px;
}
#menu ul li {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
list-style-type: none;
display: block;
clear: both;
overflow: auto;
margin: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3B4127;
border-right-color: #3B4127;
border-bottom-color: #3B4127;
border-left-color: #3B4127;
font-size: 16px;
background-color: #737776;
}
#menu ul li a {
margin: 0;
color: #000;
text-decoration: none;
display: block;
padding-left: 2px;
}
#menu ul li a:hover {
color: #FFF;
background-color: #3B4127;
}
#menu ul li a:active {
color: #FFF;
background-color: #3B4127;
}

I am no CSS talent. So all advice and corrections are welcome!

Greetings,

Bram

[edited by: swa66 at 12:44 am (utc) on April 4, 2009]
[edit reason] No personal URLs please see ToS [/edit]

[swa66]

I always forget which browser uses padding and which uses margins by default on <ul> and <li>, but try to reset them, that usually helps.

Try keeping IE out of quirks mode (For IE6: use a full doctype with absolutely nothing in front of it)

Try validating your code.

If it still fails in a version of IE, trey to target just that one and counter it with something in a conditional comment.