Hiya, sorry to ask this here but I've done a bit of searching and can't figure out why Windows IE is screwing up my top nav menu.
The relevant CSS
Code:
ul.topnav {
height:30px;
list-style:none;
margin:0px;
padding:0px;
display:block;
width:600px;
margin:0 auto;
}
ul.topnav li {
float:left;
margin:0 1px 0 0;
background: #EEEEEE url(images/tab.png);
}
ul.topnav a {
background-image: url(images/tab.png);
color:#FFFFFF;
display: block;
float: left;
height: 30px;
padding-left: 20px;
text-decoration: none;
}
ul.topnav a:hover {
background-position: 0 -30px;
color:#222222;
}
ul.topnav a:hover span {
background-position:100% -30px;
}
ul.topnav span {
background-image: url(images/tab.png);
background-position:100% 0;
display: block;
height: 20px;
padding-right: 20px;
padding-top:10px;
}
the HTML
Code:
<div>
<ul class="topnav">
<li><a href="index.php" title="Home"><span>Home</span></a></li>
<li><a href="index.php?cmd=2" title="Submit Your Pictures And Get Rated!"><span>Submit Pictures</span></a></li>
<li><a href="index.php?cmd=10&ty=1" title="Latest Nude Pictures For You To Rate!"><span>Latest Pics</span></a></li>
<li><a href="index.php?cmd=10&ty=2" title="Top 10 Pictures As Voted By You Guys!"><span>Top 10</span></a></li>
<li><a href="index.php?cmd=10&ty=3" title="Top Rated Guys"><span>Top Guys</span></a></li>
<li><a href="index.php?cmd=10&ty=4" title="Top Rated Girls"><span>Top Girls</span></a></li>
</ul>
</div>
I think it's got something to do with the fact Im using
display: block;
float:left;
instead of
display:inline;
But I don't know any other way to do it? Anyone got a hack for IE? works in FF and safari OSX, and FF Windows.
Thanks