Floated <li>'s with seemingly all margin's set to "0," but still seeing space between siblings???

Question

Hey,

So I'm creating an unordered list, floated to the right and styled with varying backgrounds to fashion a menu.

It was hell setting up the Jquery (animation queues, repeating animations while hovered, etc,) but I got it to work finally. Here's the CSS and Jquery for the navigation, and animation.

    <script type="text/javascript">

    $(document).ready(function(){

        $("#nav li").hover(function() {

            $(this).children('p').stop(true, true).animate({opacity: "show"}, "fast");

        }, function() {

            $(this).children('p').stop(true, true).animate({opacity: "hide"}, "fast");

        });

    });

</script>

#nav {
   margin:0;
   padding:0;
   background:#FF0000;
   clear:both;   
   float:right;   
  }  
#nav li {  
   position:relative;
   list-style:none;   
   padding-left:0;   
   margin-left:0;   
   float:right;   
   width:75px;   
  }  
#nav li a {   
   display:block;   
   width:75px;   
   height:48px;   
   margin-left:0;   
   padding-left:0;   
   Z-index:20;  
  }
.hover {   
   display:none;  
   position:absolute;  
   top:0;
   left:0;  
   height:48px;  
   width:75px;   
   z-index:0;   
  }  
.nav1 a {   
   background-image:url(images/nav_1.gif) 
  }  
.nav2 a {   
   background-image:url(images/nav_2.gif) 
  }
.nav3 a {   
   background-image:url(images/nav_3.gif) 
  }
.nav4 a {   
   background-image:url(images/nav_4.gif) 
  }  
.nav1 p.hover {   
   background-image:url(images/nav_1_hover.gif) 
  }
.nav2 p.hover {   
   background-image:url(images/nav_2_hover.gif) 
  }
.nav3 p.hover {   
   background-image:url(images/nav_3_hover.gif) 
  }
.nav4 p.hover {   
   background-image:url(images/nav_4_hover.gif) 
  }  

and then here's the HTML for the menu....

<ul id="nav">            
  <li class="nav1"><a href=""><img src="images/nav_spacer.gif" border="0" /></a><p class="hover"></p></li>
  <li class="nav2"><a href=""><img src="images/nav_spacer.gif" border="0" /></a><p class="hover"></p></li>
  <li class="nav3"><a href=""><img src="images/nav_spacer.gif" border="0" /></a><p class="hover"></p></li>
  <li class="nav4"><a href=""><img src="images/nav_spacer.gif" border="0" /></a><p class="hover"></p></li>
</ul>​

I hope this is sufficient -- I'm still pretty green to Javascript/Jquery and CSS, and I can't seem to figure out why there's a buffer between my menu items.

I'd appreciate any help.

Thanks!

Answer 1

Correcting my original answer: You only set the left-margin, maybe you should also try setting the right margin to 0.

Answer 2

Which browser? I don't get any buffer in between.

Of course, I don't have your images to work with either. Perhaps there's some overflow taking place.

Try adding clip:auto; overflow: hidden; to your #nav li a.

#nav li a {   
   display:block;   
   width:75px;   
   height:48px;   
   margin-left:0;   
   padding-left:0;   
   z-index:20;

   clip: auto;
   overflow:hidden;
}

Also, I may be wrong about this, but as far as I remember, you'll need to set positioning in order for z-index to have any effect. Like: position:relative.

Answer 3

Uhm... Try to add display:block for all images inside of a tag. This should work.