SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Threaded View

  1. #1
    SitePoint Evangelist
    Join Date
    May 2004
    0 Post(s)
    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:

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

    #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.

          <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 ...

          <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


Posting Permissions

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