pixel space under text in vertical menu ul/li/a

Question

I've a simple html ul/li/a vertical menu as this : http://jsfiddle.net/byXED/3/

<div id="front_page_a">
    <ul id='nav'>
        <li><a href="/">TEXT</a></li> 
        <li class="scostati"><a href="/">TEXT</a></li> 
        <li ><a href="./pages/chi.php"><span>TEXT</span></a></li>
        <li class="scostati"><a href="./pages/dove.php"><span>TEXT</span></a></li>
        <li><a href="./pages/contatti.php"><span>TEXT</span></a></li>
    </ul>
</div>

The problem is the css i put for the a tag, cause I don't get the right way to have the same space on top and bottom of the text in the anchor tag

#pageNavigation {
    background-image: url('../Images/TIBC_Base/nav-bg.png');
    background-repeat: repeat-y;
    margin:5px 0;
    padding:5px 15px 5px;
    min-height:125px;
}

#pageNavigation .navContent {
    display: table;
    width:240px;
    list-style-type: none;
    margin:0; padding:0;
}

#pageNavigation .navContent li {
    display: table-row;
    height:57px;
    text-align:center;
}

#pageNavigation a  {
    display: table-cell;
    vertical-align: middle;
    height:57px;
    border-top:0px #E1E1E1 solid;
    border-bottom:1px #E1E1E1 solid;
    font-size:16px;
    text-decoration:none;
    color:#485963;
    text-shadow: 0px -1px #EEEEEE;
}

Please, my question is : why the text of the link ("TEXT") has a space at the bottom ? what I have to do to have the text vertically centered in the anchor space? I've tried various way, but none functioned. In the posted example I've put a padding:0px 7px; for the anchor tag but it doesn't work vertically.

The code posted has the problem with Firefox , it works fine with Safari.

Answer 1

In the CSS a { you have a border around the anchor tag and a padding. If you make this values to 0 (zero) your "extra space" disapears.

a {
    line-height:100%;
    display:table-cell;
    text-decoration: none;
    background-color:red;
    border: 0px solid; /*changed to zero, removes border*/
    font-size: 35px;
    padding: 0px 0px; /*changed to zero, removes horiz space before&after text*/
    color:white;
    vertical-align: middle;
}

Answer 2

You should know that apparently Gecko and WebKit have different interpretations on how line-heights work. This fiddle illustrates the problem: http://jsfiddle.net/w88Ss/ . According to the definition , it seems that Firefox is doing the right thing; anyhow, there is this difference.

If you think, for any reason, that you should use this approach, you can try a higher line-height , like line-height:40px , specifically for firefox, maybe using a JS code.

Answer 3

One solution, let's say a light workaround, is to use only some font and not some other.

In other words, I've noted that if in the css of the a tag I specify a font like Arial the vertical alignment is perfect with Firefox & Safari. If I use some other fonts like serif, Helvetica the problem is still there.