Padding without moving border?

9three · 05-09-2009, 02:53 AM

Hey,

I have a navigation using LIs. I added a border to the right to simulate a spacer for each link. What I'm trying to do is add padding to the top to bring the text down some becasue it's too high. But when I do that, the padding also moves the border. Is there a way around this?

HTML

Code:

<div id="nav">
    <ul>
      <li><a href="#">Stories</a></li>
      <li><a href="#">Blogs</a></li>
      <li><a href="#">Forums</a></li>
      <li><a href="#">Tournament</a></li>
      <li><a href="#">Podcasts</a></li>
    </ul>
  </div>

CSS

Code:

#nav ul
{
  float: left;
  width: 324px;
  margin: 21px 0px 0px 0px;
  padding: 0px;
  color: #FFFFFF;
}

#nav ul li { display: inline; }

#nav ul li a
{
  float: left;
  height: 30px;
  padding: 0px 8px 0px 8px;
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
  border-right: 1px solid #670000;
  background: url('../images/nav_bg.jpg') repeat-x;
}

#nav ul li a:hover
{
  color: #670000;
  background: url('../images/nav_bg_o.jpg') repeat-x;
}

I also want to add an active LI so I added

Code:

#featuresNav ul li .active
{
  color: #000000;
  background: #FFFFFF;
}

and I did <li class="active"><a href="#">blah</a></li> but it doesn't work.

Basically I just want the background and font color to change if I set the LI element to "active".

thanks :)