[CSS] padding-top

[kuarl]

salve!

vi espongo subito il mio problema:
ho una serie di tag div come questi:

<div align="center" ID="questionList" style="background-image:url(img/scheda-normal.gif);" class="lista">Domanda 1</div>
<div align="center" ID="questionList" style="background-image:url(img/scheda-hover.gif);" class="lista">Domanda 2</div>
<div align="center" ID="questionList" style="background-image:url(img/scheda-normal.gif);" class="lista">Domanda 3</div>


la classe a cui fanno riferimento è questa:

.lista {
width:97px;
height:21px;
padding-top:3px;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
}

stranamente non ho sorprese con IE ma ce le ho con Mozilla, con IE se io vario il padding-top il testo va perfettamente al centro (in senso verticale) del tag div, con moz invece il testo raggiunge la posizione di IE ma il tag si deforma e diventa più alto mandando a meretrici tutta la formattazione dei div... come posso risolvere il problema?

[edit] credo di aver capito il meccanismo ma non so trovarci una soluzione... praticamente quei 3 px vengono aggiunti da mozilla all'altezza della cella, mentre ie non li aggiunge alterando semplicemente la formattazione della cella (cosa più logica). A questo punto mi basterebbe impostare con IE l'altezza a 21px e con moz a 18px (21-3)... ma non saprei come fare

[flanza]

sarà più logica...ma è sbagliato! il paddind è uno degli errori di IE (rispetto al box model) per ovviare a questo devi usare degli hack (ovvero istruzioni particolari per ie) e dare diversa altezza ai div ad esempio scrivendo:

height:18px;
h\ eight:22px;

[kuarl]

Originariamente inviato da flanza
sarà più logica...ma è sbagliato! il paddind è uno degli errori di IE (rispetto al box model) per ovviare a questo devi usare degli hack (ovvero istruzioni particolari per ie) e dare diversa altezza ai div ad esempio scrivendo:

height:18px;
h\ eight:22px;

cioè non ho capito?? cosa rappresenta
h\ eight:22px;

??

[flanza]

allora tutti i browser capiscono la prima height e lo fanno, ma solo IE capisce la seconda (che è scritta male) e quindi IE aggiusta eseguendo la seconda istruzione ed a questo punto abbiamo allineato i due browser... e poichè ie non aggiunge i 3 pixel che dovrebbe aggiungere, glielo diciamo noi di farlo

comunque volevo dire

height:18px;
h\ eight:21px;

[kuarl]

Originariamente inviato da flanza
allora tutti i browser capiscono la prima height e lo fanno, ma solo IE capisce la seconda (che è scritta male) e quindi IE aggiusta eseguendo la seconda istruzione ed a questo punto abbiamo allineato i due browser... e poichè ie non aggiunge i 3 pixel che dovrebbe aggiungere, glielo diciamo noi di farlo

ho moz 1.7 e l'ha capito pure lui che è scritta male

boh

volendo non usare il padding, c'è un'altro modo per centrare verticalmente il testo all'interno di un div?

[kuarl]

ho risolto, dovevo allineare verticalmente una sola riga, quindi ho impostato il suo line-heigth su 21 e quindi ora è perfettamente al centro, sia con ie che con moz