Problema interlinea tag input di un form

[Kaesar83]

Salve raga,
io ho un form articolato in questa maniera!

<form method="post" action="">
                <div align="center">
                    <div id="form">
                        <div id="descrizioni">    
                            Username:

                            Password:

                            Ripeti password:

                            Nome:

                            Cognome:

                            E-mail:
                        </div>
                        <div id="input">
                            <input type="text" name="username" id="username" size="25" />

                            <input name="password" type="password" id="password" size="25" />

                            <input name="password1" type="password" id="password1" size="25" />

                            <input name="nome" type="text" id="nome" size="25" />

                            <input name="cognome" type="text" id="cognome" size="25" />

                            <input name="email" type="text" id="email" size="25" />
                        </div>
                    </div>
                    

                    <input type="submit" name="submit" value="Installa" />
                </div>
        </form> 

Come vedete nel div descrizioni ci sono i nomi dei campi e nel div input ci sono i vari input associati a ciascun campo!
Voglio in pratica creare un form tableless.
Tutto va bene se non fosse che ho 2 problemi di visualizzazione con FF:

1) il div form che racchiude i 2 div descritti sopra sembra non avere altezza eppure racchiude qualcosa quindi dovrebbe avere una certa "consistenza" (questo l'ho scoperto inserendo un border: 1px solid #000; nel css relativo al div in questione)
2) la separazione tra un input e un altro è differente tra FF e IE7 quindi la visualizzazione tra testo e relativo input che dovrebbe venire sulla stessa linea (immaginaria) non rende per nulla bene

Come faccio a risolvere questi 2 problemi?
Grazie in anticipo

[Mich_]

Inizia con l'usare la marcatura corretta.
Non usare nomi riservati come id dei tuoi tag.
Le label vanno scritte con il tag <label>

Dentro un <form> non devi usare i <div>: se vuoi fare delle sezioni devi usare <fieldset>.
Pero` non puoi separare la label dal suo relativo input.

Sistemare il CSS per la tua marcatura e` cosa improba, e troverai sempre un browser in cui la cosa non funziona.

PS: anche l'uso che fai del
e` semanticamente sbagliato: prova a non usarlo.

[jackweb]

Scusate l'intromissione...
Mich, vorresti dire che usare < div id="mio_div"> per impaginare un sito è una tecnica errata?
O forse intendevi solo all'interno del form?
Perchè allora il lavoro che stò facendo è da rivedere....

Grazie

[Mich_]

Originariamente inviato da jackweb
Scusate l'intromissione...
Mich, vorresti dire che usare < div id="mio_div"> per impaginare un sito è una tecnica errata?
O forse intendevi solo all'interno del form?
Perchè allora il lavoro che stò facendo è da rivedere....

Grazie

I div per formattare un sito sono corretti (sono IL modo corretto).

Ma dentro il form e` meglio non usarli, dato che per i form ci sono altri tag semanticamente corretti (ho scritto chiaramente di non usarli dentro il <form>).

In realta` non sono vietati dalla sintassi, ma nell'esempio di Kaesar non hanno senso. E quell'esempio ha un grosso errore di semantica, che si ripercuote sulla difficolta` (impossibilita`?) di sistemare il CSS.

[Kaesar83]

Si ok Mich_ usando <fieldset> e <label> va bene ma io voglio dare un certo ordine al mio form, ad esempio mettere tutti i label a sinistra e tutti gli input a destra all'interno di un div che comprende l'intero form!
Come faccio a dare questo ordine!?

[Mich_]

Puoi definire una larghezza fissa per le label.

Come unita` di misura ti consiglio gli em, in modo che sia proporzionale al font usato.

[Kaesar83]

Perfetto Mich_ grazie per l'help, son riuscito ad arrivare ad una buona soluzione visiva!

[Mich_]

Originariamente inviato da Kaesar83
son riuscito ad arrivare ad una buona soluzione visiva!

E` proprio questo il problema di fondo: si guarda piu` alla resa visiva che alla correttezza del codice.

Un codice ben formato rendera` bene in tutti i browser, compresi quelli non visuali; un codice mal formato magari rende bene nei browser in cui e` stato testato (che per motivi pratici sono limitati di numero), ma poi in browser diversi la formattazione crolla.