problema compatibilità di: input [type=text]

[dosankos]

ciao, prima volta sul forum

Ho da poco intrapreso la strada del mondo html e connessi e sto seguendo varie guide e tutorial in giro sul web.
Durante una "prova" ho tentato di realizzare il mio primo sito seguendo le indicazioni del tutorial, tutto bene (più o meno ) fino a quando non si è parlato di input...
Per inserire un box di testo nel codice html abbiamo inserito questa stringa:
<input type="text"/>
all'interno di un div

Poi nel css ho tentato di dare alcune caratteristiche al testo che vi si scrive dentro e, seguendo il tutorial, ho inserito questo:

input[type=text] {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding:20px;
border:none;
background-color:#FFF;
font-style: italic;
color: #999999;
}

Il risultato è che Safari non legge le indicazioni del css (come se non le avessi scritte) gli altri browser invece (Opera, FF e Chrome) le leggono ma sballano le misure del box di testo.

Ne approfito anche per chiedere se ed in modo si possono personalizzare le misure di larghezza del box di testo inserito.

grazie, ciao

[fcaldera]

1) cambia input[type=text] in input[type="text"] (per compatibilità con tutti i possibili attributi usa sempre gli apici)

2) setta una larghezza (width) all'input altrimenti ogni browser ne imposterà una (diversa) di default

[dosankos]

ciao e grazie della risposta.

ho provato a seguire i tuoi suggerimenti modificando in questo modo il codice
del mio css
input[type="text"] {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding:20px;
border:none;
background-color:#FFF;
font-style: italic;
color: #999999;
width:120px;
height:20px;
}

il risultato è che ora prende si le caratteristiche del font scrivendolo in italic e grigino ma per quanto riguarda la grandezza non ne vuole sapere o meglio riguardo la grandezza verticale.
Per questo motivo ho provato a dargli un valore. Se il valore è alto (es 200px) lo prende se gli dico di farlo di 20px lo fa come vuole lui su tutti i browser che ho provato (safari, opera, chrome,ff)

Sempre a caccia di tutorial ne ho trovato un altro relativo ai form e anche qui ho riscontrato problemi nel far accettare ai browser le caratteristiche, nonostante le correzioni degli apici da te indicatemi, che invece su DW CS3 vedo correttamente.
qui il codice html e a seguire il css.
<form action="" method="post" id="form">

<input type="text" name="nome" value="pippo" />


<input type="password" name="pass" value="password" />


<input type="checkbox" name="check" value="1" checked="checked" />1


<input type="radio" name="radio" value="1" />1 <input type="radio" name="radio" value="2" />2 <input type="radio" name="radio" value="3" />3


<input type="reset" name"reset" value="reset" />


<input type="submit" name="submit" value="registrazione" />



<input type="button" name="button" value="bottone" />



<textarea name="texarea" rows="8"></textarea>


<select name="select">
<option selected="selected">Opzione di defoult</option>
<option>Opzione 1</option>
<option>Opzione 2</option>
<option>Opzione 3</option>
<option>Opzione 4</option>

</select>


</form>


CODICE CSS:

form#form {
background-color:#CCCCCC;
padding:10px;

}

form#form input [type="text"], form#form input [type="password"], form#form textarea {
background-color:#00FF00;
border: 1px solid #666;
paddong:2px;
font-family: Georgia, "Times New Roman", Times, serif;
color:#0066FF;
}

form#form input [type="submit"] {
background-color:#FF0000;
color:#FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
border:none;
}

grazie, ciao

[fcaldera]

i campi di input si possono regolare in altezza impostando il font-size ed un eventuale padding top/bottom. Prova ad impostare diversi valori per queste proprietà finché l'altezza non è quella desiderata

[dosankos]

grazie, ora provo.
Sulla questione successiva, del perché i browser facciano i "capricci" nella visualizzazione della "prova di form", hai idea del perché non mi funzioni?

thx