Can anyone give me insight or a solution (preferably) as how to have this render correctly in IE 5/6
<style>
#navigation{
float:left;
width:100%;
margin:0px;
padding-bottom:5px;
text-align:right;
background:url('/app/webroot/img/layout/navBG.gif') repeat-x;
background-position:bottom;
}
#navigation a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#999999;
text-decoration:none;
}
#navigation a:hover{color:#333333;}
#navigation ul {list-style:none;margin:0px 0px 0px 250px;padding:0;}
#navigation li {float:left;width:auto;height:20px;margin:0px 5px 0px 5px;padding:0;text-align:center;}
li a {display:block;padding:0;margin:5px;height:100%;color:#FFF;text-decoration:none;}
li a:hover, li a:focus, li a:active {background:url(/app/webroot/img/layout/navHover.gif) no-repeat;background-position:50% 100%;;}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="/about">About</a></li>
<li><a href="/about_resume">Resume</a></li>
<li><a href="/about_portfolio">Portfolio</a></li>
<li><a href="/about_hire">For Hire</a></li>
</ul>
</div>
It renders inline with the hover effect in every browser except IE 5/6 in which it still renders as a vertical list ?!?!?