Botton, input submit e padding..

**ALonE** · 28-01-2008, 10:32

Buongiorno a tutti...

ho questi 3 bottoni:

Anzi il primo è un link, il secondo un input di tipo submit e il terzo un button di tipo submit.
Tutti e 3 hanno la stessa classe nel css:

Codice PHP:


font-weight:bold; font-size:10px; color:#000000; padding:0 0 0 10px; border:0; margin:0;

Ora come mai solo il link rispetta il padding-left di 10px?
Come mai il font sembra proprio diverso?
Come posso impostare il padding in modo corretto nel button o nell'input?

Ci sto impazzendo sopra...

Grazie

**andr983** · 28-01-2008, 14:33

Così mi dice poco niente, posta il codice html dei 3 pulsanti e tutto quello che serve dei css.

**ALonE** · 28-01-2008, 14:46

ok

hai ragione

html

Codice PHP:


[url="#"]AGGIUNGI[/url]

<input type="submit" name="cartAdd" value="AGGIUNGI" class="button" />

<button type="submit">AGGIUNGI</button>

e il css è

Codice PHP:


button,

input.button,

a.button{

           text-decoration:none; font-weight:bold; color:#000000; font-size:12px; 

           border:0; margin:0; padding:0; padding-left:10px; display:block;

           background:url(/images/btn_dot.gif) no-repeat left 50%; 

           line-height:16px; height:16px;

}

**andr983** · 28-01-2008, 15:03

Allora, secondo me, e penso sia abbastanza logico, i tuoi problemi nascono dal fatto che tutto quello che tu non espliciti nei css viene ereditato dalla visualizzazione standard del tag.

Per esempio, il font varia, ma se tu aggiungi

codice:

font-family: Arial, sans-serif;

nel css poi sarà uguale. (testato)
Lo stesso discorso vale per il padding, questo non l´ho provato (manca tempo), ma sicuramente l´input e il button vanno ridefiniti.
Dacci un´occhiata, spero sia la direzione giusta. Altrimenti posso riprovare con più calma, non mi sembra una cosa impossibile.

**ALonE** · 28-01-2008, 18:45

x quanto riguarda tutti gli altri tag ecco come sono impostati nel css

Codice PHP:


html, body{margin:0; padding:0; width:100%; height:100%;}

*{font-family:Arial, Helvetica, sans-serif; font-size:12px;}

**andr983** · 29-01-2008, 09:38

Ah... sei fortunato, avevo deciso di dargliela vinta e mente chiudevo il file mi è venuta l´idea giusta... Cmq è stato più difficile del previsto, anche se la soluzione è, come sempre del resto, banalissima. Evidentemente il button ha un margine/padding automatico che non glielo levi in alcun modo (che io sappia).
Ho messo un button dentro al tag a e definito il padding-left solo sul button, altrimenti lo contava due volte nella coppia a-button.
Testato su FF, IE, e XHTML 1.0

Ciao!

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>buttons</title>
<style type="text/css">
*{margin:0; padding:0;}
html, body {width:100%; height:100%; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
button,
input.button,
a.button{
           text-decoration:none; font-weight:bold; color:#000000; font-size:12px;
           border:0; margin:0; padding:0; display:block;
           line-height:16px; height:16px;
}
button,
input.button {padding-left: 10px; background:url(/images/btn_dot.gif) no-repeat left 50%;}
</style>
</head>
<body>
<div>
<button>AGGIUNGI</button>
<input type="submit" name="cartAdd" value="AGGIUNGI" class="button" />
<button type="submit">AGGIUNGI</button>
</div>
</body>
</html>

_____
Aggiunta: io non avevo l´immagine, mi sembra però che messa solo su button e input la conti solo una volta anche quella. Quindi dovrebbe filare...

Discussione: Botton, input submit e padding..

Strumenti discussione

Ricerca discussione

Visualizza

Botton, input submit e padding..

Permessi di invio