IE fix

Can some one please tell me why this code looks dfferent in different browsers?.. It looks good on FireFox but I cant get it to show up the same way on IE.
IE doesn’t seem to understand ’ float:left’…grrr…i hate IE!

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN””>
<title>Untitled Document</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<script language=“JavaScript”>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById(“nav”);
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes*;
if (node.nodeName==“LI”) {
node.onmouseover=function() {
this.className+=" over";
node.onmouseout=function() {
(" over", “”);

body {font-family: tahoma; font-size: 11px;}


margin: 0;
padding: 0;
list-style: none;
position: relative;
height: 10px;

ul#nav li { float: left; display: block; padding-right: 30px;}

ul li a {
display: block;
text-decoration: none;
color: #777;


ul li a:hover {
/*color: #CC3366; */

padding-left: 2px;
border: 0px solid #f90;
border-left-width: 1px;
border-left-color: #f90;

li ul { display: none; list-style: none;}

li:hover ul, li.over ul
{ display: block; position: absolute; top: 24px; left: 0px; margin: 0px; padding: 0px;}

/* Fix IE. Hide from IE Mac */

  • html ul li { float: left; height: 1%; display: block; }
  • html ul li a { height: 1%; }
    /* End */




<ul id=“nav”>
<li><a href="#">Home</a></li>
<li><a href="#">The Act™</a></li>
<li><a href="#">About us</a>
<li><a href="#">Staff</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Press Kit</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Jobs</a></li>
<li id=“last”><a href="#">Contact Us</a></li>