i'm working on a new site and i can't figure out a way to get the text on a background image to align to the bottom. the page is layed out in tables and below is the code for the mouseovers that utilize css:

a.mainNav {
width:82px;
height:21px;
background-image: url(images/navTabOff.gif);
display:block;
color:#a41128;
font-family: arial, helvetica, sans-serif;
font-size:13px;
font-weight:bold;
text-decoration:none;
}

a.mainNav:active {
width:82px;
height:21px;
background-image: url(images/navTabOff.gif);
display:block;
color:#a41128;
font-family: arial, helvetica, sans-serif;
font-size:13px;
font-weight:bold;
text-decoration:none;
}

a.mainNav:visted {
width:82px;
height:21px;
background-image: url(images/navTabOff.gif);
display:block;
color:#a41128;
font-family: arial, helvetica, sans-serif;
font-size:13px;
font-weight:bold;
text-decoration:none;
}

a.mainNav:hover {
width:82px;
height:21px;
background-image: url(images/navTab.gif);
display:block;
color:#ffffff;
font-family: arial, helvetica, sans-serif;
font-size:13px;
font-weight:bold;
text-decoration:none;
}

I've tried a number of things that should logically do the trick but no matter what I do the text on the background image floats to the top of the background image.

Thoughts, suggestions?

Thanks in advance.