Thanks for the great help the other day. I have a more advanced problem, now.
I have a UL as a nav bar with a bottom border that touches the baseline of the nav bar type. When you hover over a link, I would like the bottom border to turn darker.
I got the bottom border to touch the nav bar type by adding padding to the nav bar. I added a darker color border using the a:hover state. Trouble is, the darker border appears right below the lighter border, instead of on top of it. I can add negative top margin to the a:hover, but then the text moves up. Adding positive top padding brings the text back down, but it returns the dark border to the original location, below the light border.
The border’s position is something you won’t be able to change, I’m afraid. Even if the padding is set to zero, it just won’t work.
You might want to consider simply going with background images on the <li> items, probably would make things a lot easier. Would probably make the long red border easier too, wouldn’t have to do all the crazy line-height stuff.