The Borderline

[justbobf]

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.

Here is the link to the test site:
http://ifaulkner.com/testCSS/

Here is the CSS I have written:

Code:

#mainNav{
padding: 0 0 17px 15px;
background-color: #000;
border-bottom: 8px solid red;
}

#mainNav li{
list-style-type: none;
display: block;
float: left;
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #fff;

}
#mainNav a {
text-decoration: none;
color: #fff;
display: block;
height: 25px;
padding: 0 1em 0 1px;
border-left: 1px solid #000;
}
#mainNav a:hover {
border-bottom: 8px solid #900;
color: #0c9;
}

And here is the HTML:

Code:

• Design
• Advertising
• Retouching
• Web

Any ideas?

[TheDoc]

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.

[Author]

Posts