Vertical Alignment on Rollovers Using CSS

[cloudthumper]

Greetings --

I want to use CSS to create a text and image rollover for my navigation. The
image rolls over just fine but my text insists on a vertical alignment of top
instead of middle. I have set every parameter I can think of to get the text to
align itself as I wish but no matter what I try it always aligns to the top.

I have attached the style sheet text.
P.S. Horizontal alignment is no problem. It aligns to the center as it should.)

Thanks.

Cloudthumper


<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
a:link {
height: 45px;
width: 142px;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006666;
text-decoration: none;
height: 45px;
width: 142px;
font-weight: bold;
background-image: url(images/button-1.jpg);
vertical-align: middle;
text-align: center;
}
a:hover {
height: 45px;
width: 142px;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000;
text-decoration: none;
height: 45px;
width: 142px;
font-weight: bold;
background-image: url(images/button-2.jpg);
vertical-align: middle;
text-align: center;
}
-->
</style>

[mzanime.com]

Well, first of all, there is no need to repeat all of those properties over and
over, since most of them are the same, most of them can be simply specified
once, in the <a> element. Use shorthand properties too when you can, to reduce
code.

a {
display: block; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; color: #F00; height: 45px; width: 142px;
font-weight: bold;vertical-align: middle; text-align: center;
}

a:link { background-image: url(images/button-1.jpg); }
a:visited { background-image: url(images/button-1.jpg); }
a:hover { background-image: url(images/button-2.jpg); }
a:active { background-image: url(images/button-2.jpg); }

[cloudthumper]

Thanks for your help Michael.

My problem, however, centers around the text not the image. I want the text
that I use as the button label to be centered both horizontally and vertically.
This is text as text not text as a graphic. The text slams itself at the top of
the table cell not in the middle as I want. I have used every option that I can
think of to center the text vertically but to no avail. As an example, I have
posted a representative problem page at:
[url]http://www.meatballweb.com/css-test/test-css.html[/url]

I'm beginning to think that it's a flaw in the way css rules are applied by
both Firefox and IE. Both yield the same results.

Any assistance would be most welcome.

Thanks.

Cloudthumper