Menu
Hey programmers,
I’m turning to you again since I’m still stuck with a simple piece of code.
I pasted the code below. Here’s the problem:
The gif images i’m placing as LI items are all the same width, but when I view in browser (ie or firefox), very uneven spaces are created between them. When I place text instead of images the spacings are even. Why is this happening? How can I fix? I tryed so many things. Don’t know what to do anymore 🙁
Thank you very much…
[code]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Untitled Document</title>
<style type = “text/css”>
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 10em;
}
#nav li {
float: left;
width: 10em;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
</style>
<script language=”javascript”>
sfHover = function() {
var sfEls = document.getElementById(“nav”).getElementsByTagName(“LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhover\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, sfHover);
</script>
</head>
<body>
<ul id=”nav”>
<li><a href=”#h”><img src=”images/menu_home.gif” border=”0″ width=”151″></a> </li>
<li><a href=”#b”><img src=”images/menu_board.gif” border=”0″ width=”151″></a> </li>
<li><a href=”#p”><img src=”images/menu_programs_on.gif” border=”0″ width=”151″></a>
<ul>
<li><a href=”#”>Climbing perches</a></li>
<li><a href=”#”>Labyrinthfishes</a></li>
<li><a href=”#”>Kissing gouramis</a></li>
<li><a href=”#”>Pike-heads</a></li>
<li><a href=”#”>Giant gouramis</a></li>
</ul>
</li>
<li><a href=”#g”><img src=”images/menu_grant.gif” border=”0″ width=”151″></a>
</li>
</ul>
</body>
</html>