Question

I have a small design problem in my css, and I’d like to know if someone could check it out for me. The design problem is in the rollover effect of my horizontal navigation. There seems to be some sort of added margin or padding, but I’m having trouble finding the problem in the css. I will paste the code I’m using below, so you can see for yourself. You won’t be able to see the problem until you rollover the navigation list items.

HTML:

    <div class="Horiznav">
  <ul>
    <li id="active"><a href="#">Link #1</a></li>
    <li><a href="#">Link #2</a></li>
    <li><a href="#">Link #3</a></li>
    <li><a href="#">Link #4</a></li>
    <li><a href="#">Link #5</a></li>
  </ul>
</div>

CSS:

.Horiznav {
  background: #1F00CA;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}
.Horiznav ul {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  text-Align: center;
  margin: 0;
  padding-top: 5px; padding-bottom: 5px;
}
.Horiznav ul li {
  display: inline;
}
.Horiznav ul li a {
  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
}
.Horiznav ul li a:hover {
  background: #16008D;
  color: #fff;
}
#active a { border-left: 1px solid #fff; }

Answer 1

Since you have the li elements display:inline the problem (extra gap to the left of each menu/list item) is as a result of the white-space in the HTML markup. You can either:

A – Get rid of the white-space in the HTML:

<ul><li id="active"><a href="#">Link #1</a></li><li><a href="#">Link #2</a></li><li><a href="#">Link #3</a></li><li><a href="#">Link #4</a></li><li><a href="#">Link #5</a></li></ul>

B – Or, use the font-size:0 trick:

Set font-size:0 on the ul container and override this with font-size:whatever on the li child elements:

.Horiznav ul {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  text-Align: center;
  margin: 0;
  padding-top: 5px; padding-bottom: 5px;
  font-size: 0;       /* #1 */
}
.Horiznav ul li {
  display: inline;
  font-size: 16px;    /* #2 */
}

http://jsfiddle.net/EZSvC/4/

C – Or, use a floated layout:

Float the li elements (they are then implicitly displayed as blocks) and clear the floats on the ul container with overflow:hidden. However, you will need to give the container width and apply margin:0 auto if you want it centred.

http://jsfiddle.net/EZSvC/5/