CODEWITHSUNDEEP
csshtml-lists
jlmakes
jlmakes

Reputation: 2965

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

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!

Upvotes: 2

Views: 484

Answers (3)

Janick Bernet
Janick Bernet

Reputation: 21194

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

Upvotes: 0

Ionuț Staicu
Ionuț Staicu

Reputation: 22164

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

Upvotes: 0

user113716
user113716

Reputation: 322492

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.

Upvotes: 2

Related Questions