CSS Hover-Effekt

[Bogi]

Hallihallöle ;)
ich arbeite grad an meiner neuen site und bin grad bei der navi.

die navigation ist oben platziert und hat auch ein hintergrundbild, das als hover-effekt um 5px nach unten verschoben wird.
funktioniert auch wunderbar, aber das problem ist, dass der text leider nicht in der mitte ist und dadurch sehr unschön ist.

im anhang befindet sich ein screenshot ;)

aber nun mal zum code, den ich verwende:

a.main:link, a.main:visited, a.main:active {
display: block;
background: url(templates/180bpm/images/navi_main.gif) no-repeat;
vertical-align: middle;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: left;
padding-top: 0px;
padding-left: 30px;
height: 20px !important;
height: 20px;
width: 100%;
text-decoration: none;
}

a.main:hover {
background-position: 0px +5px;
text-decoration: underline;
color: #3d3d3d;
}


und dann halt beim link die klasse main angeben.
bis auf das problem mit dem text funktioniert ja alles wunderbar.
aber wie kann ich das text-problem lösen?

danke schon mal für hilfe ;)

mfg, bogi

edit:
1. Hat sich erledigt ... ausserdem waren nicht alle meine Wünsche bei allen Browsern kompatibel, deswegen werd ich doch eine Vertikale Navi verwenden ...

Bitt closen ;)