Navigation issue, IE being naughty

programming web dev
1

Hello,

Having a probelm with some tab navigation, I have it set up so it’s a horizontal tab listing it works perfectly in firefox but when I tested it in IE it staggers the tabs so it looks a stair case basically. Heres my xhtml and css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="navi.css" />
    <title>Navigation</title>
</head>
<body>
             <ul id="menu">
<li id="home"><a href="#" title="Takes you to the Home page. Accesskey: a" accesskey="a"><span>Home</span></a></li>
<li id="about"><a href="#" title="Tells you about me. Accesskey: b" accesskey="b"><span>About</span></a></li>
<li id="portfolio"><a href="#" title="Showcase of things I have created. Accesskey: c" accesskey="c"><span>Portfolio</span></a></li>
<li id="contact"><a href="#" title="Get in contact with me. Accesskey: d" accesskey="d"><span>Contact</span></a></li>
             </ul>        
</body>
</html> 

body {
    font-size: small;
}

#menu {
    float: left;
    width: 100%;
    margin: 0;
    padding: 10px 0 0 46px;
    list-style: none;
}

menu li {
    float: left;
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", sans-serif;
    font-size: 55%;
}

#menu a {
    float: left;
    display: block;
    margin: 0 2px 0 0;
    padding: 4px 8px;
    color: #333;
    text-decoration: none;
    border: 1px solid #5fa562;
    border-bottom: none;
    background: #70ad38;
}

Your help would be most appreciated.

Cheers,
Inept