PDA

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



pauljamesw
20 Jun 2010, 04:48 PM
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
20 Jun 2010, 10:25 PM
I put overflow: hidden on the #menu id, along with a padding top of 5px on the "a" tag and it works in FF.