bouncing navigation in IE

using li position:absolute and ul position:relative

[bgirl]

I am re-using some css navigation code I had working on an earlier version of a website, made a few size changes and now I'm getting a weird bouncing in IE. In Firefox it displays correctly (or at least how I intended). I have all the navigation elements in one image file to save some downloading bandwidth. The background image is 300px x 260px with the ON, OVER and CURRENT states each 100px wide.

In IE the 'bounce' starts at the second nav button (there are 7) and gets 'taller' on each button - the current nav and roll over nav display a few pixels lower than they should each time. Maybe it's my math? Or the 3 pixel jog? Somewhere in the a:hover or current page values I must have done something to mess up the positioning...

Here's the code:

--wrapper div with only margin set
#nav_wrapper {margin:25px 0 0 25px;}
--background image
#nav {position:relative; height:260px; width:100px; margin:0; padding:0; 
background:url(nav.gif) no-repeat;}
--list item and base anchor
#nav ii {position:absolute; list-style:none; margin:0; padding:0; left:0; top:0;}
#nav li, #nav a {display:block; height:37px; width:100px; border:0;}
--li position values
#nav_01 {top:0; border:0;}
#nav_02 {top:37px; border:0;}
#nav_03 {top:74px; border:0;}
... and so on
[b]--a:hover values[/b]
#nav_01 a:hover {background:url(nav.gif) -100px 0 no-repeat; border:0;}
#nav_02 a:hover {background:url(nav.gif) -100px -37px no-repeat; border:0;}
#nav_03 a:hover {background:url(nav.gif) -100px -74px no-repeat; border:0;}
... and so on
[b]--current page values[/b]
#nav_01_on {top:0; background:url(nav.gif) -200px 0 no-repeat; border:0;}
#nav_02_on {top:37px; background:url(nav.gif) -200px -37px no-repeat; border:0;}
#nav_03_on {top:74px; background:url(nav.gif) -200px -74px no-repeat; border:0;}
... and so on

[bgirl]

Forgot to add the html structure... the "on" state and links are written in via php.

<div id="nav_wrapper>
 <div id="nav">
  <ul>
   <li id="nav_01"><a href="link1.php">&nbsp;</a></li>
   <li id="nav_02"><a href="link2.php">&nbsp;</a></li>
   <li id="nav_03_on">&nbsp;</li>
   ...
  </ul>
 </div>
</div>

[bgirl]

Ah ha!

I answered my own question. The <a> tag needed the absolute positioning too. This is where the problem was:

#nav ii {position:absolute; list-style:none; margin:0; padding:0; left:0; top:0;}
#nav li, #nav a {display:block; height:37px; width:100px; border:0;}

moved the positioning code
#nav ii {list-style:none; margin:0; padding:0; left:0; top:0;}
#nav li, #nav a {position:absolute; display:block; height:37px; width:100px; border:0;}

Now it works like a charm.

[Ingolemo]

I don't know if it'll help now, but you've got a typo in your

#nav li

selector; it's written as

#nav ii

.

Also, would it not be a good idea to use classes to specify that a link is "on" instead of altering the id?