# IE fix

**URL:** <https://forum.kirupa.com/t/ie-fix/165427>\
**Category:** web dev\
**Created:** [October 11, 2005, 3:02am UTC](https://forum.kirupa.com/t/ie-fix/165427 "2005-10-11T03:02:24Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![vulpine](https://avatars.discourse-cdn.com/v4/letter/v/eb8c5e/32.png) [@vulpine](https://forum.kirupa.com/u/vulpine)\
**Post date:** [October 11, 2005, 3:02am UTC](https://forum.kirupa.com/t/ie-fix/165427/1 "2005-10-11T03:02:24Z")

</div>

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](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\>
