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 :)

sidisinsane · 05-09-2009, 04:27 AM

Increase the line-height on the a-element instead of using padding-top. Besides that, there's a mistake in your active-state declaration. Remove the space between the li-element and the class, so that it looks like this: #featuresNav ul li.active

CoryMathews · 05-09-2009, 02:47 PM

#featuresNav ul li .active
to
#featuresNav ul li.active

is not always a mistake. The second states I want the li that has a class of active the first states that you want an li that has or contains the class active. So if you were to put the class on the li tag you would want the li.active if you were going to put it on the a tag you would want the li .active.

Second line height is one of those things you try to avoid as it is not 100% implemented in all the browsers. So you may get funky results when its combined with different things.

9three · 05-09-2009, 03:54 PM

thanks guys but its not working.

I did:

Code:

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

Code:

<div id="nav">
    <ul>
      <li class="active"><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>

nothing happens though. I removed the space like you had said to.

stewart · 05-10-2009, 04:39 AM

It's because the "weight" is not greater... or it isn't defined more specifically ? For lack of better description.
Try this :

Code:

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

Notice the div in front of the id selector. This gives this declaration more "weight".

This SHOULD work, and just a note, you can use ul as the "nav" container itself, no need for an extra wrapping div :)

Edit :
Re-read your original post, might have to add an "a" at the end of that ^

9three · 05-13-2009, 02:00 PM

thanks it works. What if I wanted to add padding to the top without the border to the right moving? I tried doing a couple of different things but it doesn't seem to work.

edit:

nvm I just saw the 2nd post. works :)