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

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>TEXT</li>
<li class="scostati">TEXT</li>
<li ><span>TEXT</span></li>
<li class="scostati"><span>TEXT</span></li>
<li><span>TEXT</span></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.