The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS a elements, line-height, and border-bottom issues

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #40788


    I am trying to decrease the amount of space between the underline and text in the navigation of [this]( “”) 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;


    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.


    Isn’t that the truth?

    Thanks again for a quick blast of insight.


    @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. ;)

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.