padding firefox

[brouls]

Salve a tutti.

ho impostato un campo in questo modo:

.lista, .lista a:link, .lista a:visited {vertical-align: middle; text-align: left; color: #7A111B; width: 99%; height: 30px; padding: 8px; text-decoration: none}
.lista a:hover {color: #FFFFFF; background-color: #7A111B} 

su explorer tutto ok, ma su firefox e chrome invece mi da un problema quando inserisco un testo con più di una riga. In pratica quando metto il mouse sopra al link, in modo da veder colorato lo sfondo, quello della seconda riga finisce sopra alla scritta della prima riga, cancellandola parzialmente. Inoltre questo mi sballa anche l'interlinea con gli elementi sotto che restano più vicini al testo sopra rispetto a quelli che stanno sotto ad un testo di una sola riga.

Come posso risolvere?

Grazie

EDIT: Aggiungo un altro dettaglio che non avevo subito notato. Se io faccio un div utilizzando quella classe, in IE quando metto il mouse sopra l'intero sfondo del div si colora, mentre in firefox solamente lo sfondo sotto al testo. Ora non ho ancora controllato se la colpa di ciò è dovuta al fatto che il div stesso non viene messo largo il 99% nonostante io lo abbia specificato nel css oppure se il div è realmente largo così ma ad essere evidenziato è solo lo sfondo del testo...in ogni caso voglio risolverlo

[ResianTaxidrive]

aggiungi un display:block;

[brouls]

Ho risolto un primo problema levando l'attributo padding da .lista e inserendo un secondo div dentro al primo che serve solo ad assegnare il padding.

Il problema è che ora la parte di sfondo riservata al padding non viene più colorata e quindi l'evideziatura rimane proprio solo legata al testo e non è bellissimo...si può fare qualcosa?

[ResianTaxidrive]

E' possibile vedere onine l'esempio? non capisco bene