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”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<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() {
this.className=this.className.replace
(" over", “”);
}
}
}
}
}
window.onload=startList;
</script>
<style>
body {font-family: tahoma; font-size: 11px;}
ul#nav
{
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; */
color:#333;
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 */
</style>
</head>
<body>
<ul id=“nav”>
<li><a href="#">Home</a></li>
<li><a href="#">The Act™</a></li>
<li><a href="#">About us</a>
<ul>
<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>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Jobs</a></li>
<li id=“last”><a href="#">Contact Us</a></li>
</ul>
</body>
</html>