weitere Seiten formatieren

Hallo,

ich möchte __weitereseiten__ mit HG-Images ausgeben

= einheitliche Größe 20x20 px

in deutsch.isl habe ich Images hinterlegt

Code:

; weitereseiten
; zurueck
TEXT203=<img border=\"0\" style=\"height: 20px; width: 20px;\" src=\"../images/weitereseiten_zurueck.png\" alt=\"zurück\">
; vor
TEXT204=<img border=\"0\" style=\"height: 20px; width: 20px;\" src=\"../images/weitereseiten_weiter.png\" alt=\"weiter\">

und in der css-Datei

Code:

.weitereseiten {
width: auto;
display: block;
text-align: center;
margin: 0px;
font-size: 12px;
}
.weitereseiten .ws_navi {} /* Navigation nicht anpassen */
.weitereseiten .ws_dots {} /* Punkte nicht anpassen */
.weitereseiten .ws_inactive {/* Nicht aktive Seiten */
color: #FFF;
text-align: center;
background:url(../images/weitereseiten_bg.png) no-repeat;
padding-top: 2px;
margin-right: 3px;
height: 20px;
width: 20px;
}
.weitereseiten .ws_inactive a:link, .weitereseiten .ws_inactive a:visited {color: #FFF !important;}

.weitereseiten .ws_active { /* aktive Seite hervorheben */
color: #FFF;
text-align: center;
background:url(../images/weitereseiten_activ.png) no-repeat;
padding-top: 2px;
margin-right: 3px;
border: none;
height: 20px;
width: 20px;
}
.weitereseiten .ws_brackets {
display:none; /* Eckige Klammern nicht anzeigen */
}

Ergebnis

auch width: 20px !important; ändert nichts

wenn ich bei .weitereseiten .ws_inactive und .weitereseiten .ws_active
display: block;
schreibe, bekomme ich das

und mit
float: left;

bitte Hilfe - wie muss ich das richtig schreiben?

Nachtrag:
mit

Code:

color: #FFF;
text-align: center;
background:url(../images/weitereseiten_bg.png) no-repeat;
padding: 4px 6px 4px 6px;
margin: 0;
height: 20px;
width: 20px;

wird's so ausgegeben, wie ich gerne möchte

aber das funktioniert nur, solange es keine 2-stelligen Seitennr, gibt....

... und wie bekomme ich noch einen Hover-Effekt rein?

.weitereseiten .ws_inactive a:hover {....}
wird ignoriert Undecided