a elements, line-height, and border-bottom issues

[iamshawnrice]

Hi.

I am trying to decrease the amount of space between the underline and text in the navigation of [this](http://iamshawnrice.com/demo/jlross/?page_id=144 “”) page.

Adjusting the line-height does nothing. As does setting a negative margin-bottom. As does declaring a height for the a element.

Does a fresh pair of eyes have a better perspecitve?

The code:

#top-menu ul li.current-menu-item a {
border-bottom: 2px solid #333;
}
#top-menu ul.nav li {
padding: 0;
float: left;
width: 20%;
font-family: ‘LeagueGothicRegular’, ‘Goudy Bookletter 1911’, arial, sans-serif;
text-transform: uppercase;
text-align: center;
}
#top-menu ul.nav li a {
font-size: 24px;
color: #555;
text-decoration: none;
text-shadow: 0 1px 1px rgba(176, 176, 176, .5);
-webkit-transition: all .5s ease-in-out;
display: inline;
}

[Senff]

To control the distance between the text and the bottom border, you’ll have to give the A element a height indeed, but it will only have effect when the element is block-level. In this case, its an inline element so the height won’t be applied. Change the A to a block level element (and give it a height of 20 or so) and you’ll see how it would work.

However — making it a block element will make it a lot more difficult to center it within its wrapping LI, and you’ll be back to your initial problem; the underline will take up the entire space of the wrapping LI. The solution to that would be to give the A a specific width and then center it with margin: 0 auto;.

All in all, every time you want to solve a problem, a new problem shows up, in a way.

[iamshawnrice]

Isn’t that the truth?

Thanks again for a quick blast of insight.

[Senff]

@joshuanhibbert I considered throwing that in, but to be honest I’ve encountered so many problems with that myself, that I didn’t feel comfortable suggesting it. ;)

[Author]

Posts