Easy question for anyone here but me: vertically align the text anchor tag?

[pauljamesw]

i can move the text in the button up and down by adding padding, but that increases the visible are of the button and therefore begins to show the top of the next state ( image for other state is directly below)

here's the page on line:
http://www.pauljameswilliams.com/portfolio.html

CSS:


.tabs{
margin: 0 auto;
padding: 0;
list-style-type:none;
display:inline;
}

#menu{
position:absolute;
right:31px;
top:0px;
height: 27px;
width: 500px;
text-decoration:none;
}
#menu a{
width:125px;
height: 27px;
text-decoration: none;

font-family: Helvetica, Arial, sans-serif;
font-size:14px;
color:#FFF;
display: inline-block;
vertical-align:middle;
float:left;
text-align:center;
background-image: url('../tab.png');
background-position: 0 -30px;
}
#menu a:hover{

background-position: 0 -60px;
}
#menu a:active {
background-position:0 -90px;
color:#999933;
}
#menu a.current {
background-position:0 0px;
color:#fff;
}

[aeroweb99]

I put overflow: hidden on the #menu id, along with a padding top of 5px on the "a" tag and it works in FF.