SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    May 2004
    Posts
    512
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS NavBar: strange superfluous space

    I just spent a few hours dealing with a simple list styled as a horizontal navigation bar.

    The navbar is placed within a div called "nav".

    The "nav" is very simple:

    Code:
    #nav {
    	clear: both;
    	width: 770px;
    	margin: 0;
    	padding: 0;
    	background: #FFF;
    	}
    The navbar is very simple, too:

    Code:
    #nav ul{
    	padding: 0;
    	margin: 0;
    	white-space: nowrap;
       }
    #nav ul li {
    	display: inline;
    	}
    #nav ul li a {
    	color: #000;
    	letter-spacing: 0.15em;	
    	text-decoration: none;
    	padding: 0 10px;
    	border-right: 1px solid #000;
    	}
    #nav ul li a:hover {
    	background: #CCC;
    	}
    When I define the html links with as follows, there is some white space between the border of the left neighbour and the mouseover-background of the current item.

    Code:
    <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
    When I add a trailing space to the link, the mouseover effect works perfecly. Why is that? Just trying to understand ...

    Code:
    <ul>
          <li><a href="#">Item 1 </a></li>
          <li><a href="#">Item 2 </a></li>
          <li><a href="#">Item 3 </a></li>
          <li><a href="#">Item 4 </a></li>
    Attached Images Attached Images

  2. #2
    SitePoint Evangelist
    Join Date
    May 2004
    Posts
    512
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The space also shows up, if I set the padding to zero:

    Code:
    #nav ul li a {
    	color: #000;
    	letter-spacing: 0.15em;	
    	text-decoration: none;
    	padding: 0;
    	border-right: 1px solid #000;
    	}
    The padding and margin for the other elements is also set to zero.

    Any idea where the problem might be?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •