[principante] ..form non allineato

[foranangel]

Ciao devo realizzare un form

questo è il codice

<form action="index.php?act=doadd" method="post"><fieldset><legend>form</legend>
                        <input name="vname" type="text"  size="30">
                        <label>nome*</label>

                        <input name="vemail" type="text"  size="30">
                        <label>e-mail*</label>

                        <input name="vwebsite" type="text"  value="http://" size="30">
                        <label>home page</label>

                        <select name="vgender">
                  <option value="Male"> Maschio </option>
                  <option value="Female"> Femmina </option>
		        </select><label>sex</label>

                        <textarea name="vcomment" cols=35 rows=7></textarea>
                        <label>commento*</label>

                <input type="submit" value=" Invia">
				</fieldset>
</form>

e questo è il mio codice css

form{
padding:0; 
margin-top:5px; 
text-align:left;
} 

fieldset{
padding: 2px;
border: 1px solid #999;
margin-top: 20px;
margin-left:5px; 
}
legend{
padding: 0px 5px;
text-transform: uppercase;
font-size:10px; 
font-family:Verdana,sans-serif; 
color:#999}
label{
text-transform:uppercase; 
cursor:pointer; 
padding:2px; 
font-size:10px; 
font-family:Verdana,sans-serif; 
color:#999
}
input,textarea,button{
margin:3px; 
padding:2px; 
background:url(../images/sfondo.gif) repeat-x top center; 
border:0; 
border:1px solid #ccc; 
overflow:hidden;
}
.select{
margin:3px; 
padding:2px;
margin-left: 8px;
}
input,textarea{
padding:2px 5px;
}
.radio {
vertical-align:middle;
}
button{
background:#fff; 
border:0; 
font-size:10px; 
cursor:pointer; 
text-transform:lowercase; 
color:#ccc
}
button:hover{
color:#668187
}

primo problema: la scritta form presente sul tag legend, mi si viusalizza in maniera differente tra IE e FF. In IE è a una distanza maggiore rispetto al bordo in alto a sx. In FF è quasi attaccato al bordo in alto a sx.
secondo problema: la select non è allineata rispetto agli altri campi.

come posso risolvere?
grazie
alessia

[awd]

Originariamente inviato da foranangel
primo problema: la scritta form presente sul tag legend, mi si viusalizza in maniera differente tra IE e FF. In IE è a una distanza maggiore rispetto al bordo in alto a sx. In FF è quasi attaccato al bordo in alto a sx.
secondo problema: la select non è allineata rispetto agli altri campi.

come posso risolvere?
grazie
alessia

Considera che ogni browser ha delle diverse impostazioni prefissate di fieldset e che IE spesso fa quello che vuole! prova aumentando il padding di fieldset (semmai solo quello sinistro), la linea si allunga ma vedo che in ogni caso IE va il cavolo che vuole!

Per allineare tutti i campi prova ad inserirli in dei div e i margini impostali ad div, tipo

div.campoForm {
	margin: 3px;
	padding: 0px;
	clear: left;
}

in questo modo (impostando i margini sopra o sotto) eviti anche l'uso dei BR

[awd]

le label sono meglio se definite nella forma
<label for="NomeCampo">Nome</label>

via CSS puoi anche settare le dimensioni dei campi. il size puoi tranquillamente lasciarlo e funzionerà nel caso in cui il css non sia caricato

oltre all'attributo NAME per i campi usa anche l'attributo ID name="vname" id="vname"

se scrivi in XHTML devi fare la chiusura per il tag INPUT

[andrea.paiola]

name non è standard ma neanche vietato... id invece è standard e praticamente obbligatorio