comportamento div in explorer

[Mich_]

Allora iniziamo a sistemare il codice HTML

Anzitutto occorre definire un linguaggio, una grammatica. Si fa con il DOCTYPE. Scegli il linguaggio che reputi piu` adatto.

Poi nel codice HTML ci sono degli attributi di formattazione. Questo puo` dare fastidio al CSS: il browser no sa se dare priorita` all'uno o all'altro.

Poi ci sono errori semantici: non e` corretto usare dei <div> per definire le ettichette: il tag piu` adatto e` <label>; in alternativa puoi usare uno <span> o un

(non sono semanticamente corretti, ma non danno problemi).

Nel tuo form hai un input hidden di nome submit: e` un chiaro esempio di errore semantico. Il submit ce l'ha gia`: e` il tuo <input type="image" ...>

[citrus]

Originariamente inviato da Mich_
Allora iniziamo a sistemare il codice HTML

Anzitutto occorre definire un linguaggio, una grammatica. Si fa con il DOCTYPE. Scegli il linguaggio che reputi piu` adatto.

Poi nel codice HTML ci sono degli attributi di formattazione. Questo puo` dare fastidio al CSS: il browser no sa se dare priorita` all'uno o all'altro.

Poi ci sono errori semantici: non e` corretto usare dei <div> per definire le ettichette: il tag piu` adatto e` <label>; in alternativa puoi usare uno <span> o un

(non sono semanticamente corretti, ma non danno problemi).

Nel tuo form hai un input hidden di nome submit: e` un chiaro esempio di errore semantico. Il submit ce l'ha gia`: e` il tuo <input type="image" ...>

ok eccoci allora:
- il doctype va bene quello che c'è gia (xhtml1-transitional)

- ho tolto gli attributi di formattazione dal codice html come dici tu.. anche se cmq c'era solo una background sul body..
quelli sugli input text del form sono stili applicati in linea perchè mi serve di differenziare la larghezza di uno piuttosto dell'altro (altrimenti dovrei definire una classe per ogni input mentre invece mi sembra più "intelligente" definire una classe generale per tutti e poi specificare le differenze (minime) direttamente in linea. o sbaglio? il css cmq sa che in caso si contrasti vince sempre lo stile applicato in linea no?

- non mi convince molto il discorso del tag <label>...
a me interessa che tutti i titoli abbiano lo sfondo azzurrino, siano larghi 190px e alti 20 e che il testo al loro interno sia bianco e di un certo tipo...
e la cosa non vale solo per i titoli dei campi dei form, ma la utilizzerò poi anche per altre cose.... ecco perchè ho scritto la classe "etichetta".
usare il tag <span> non va bene perchè la formattazione viene applicata strettamente all'area del testo... quindi non avrei più un etichetta larga 190px ma sarà larga a seconda della quantità di testo che ci si inserisce...
il tsag

onestamente non l'ho provato.. ma non capisco perchè il <div> non dovrebbe andare bene....
opera e firefox funzionano alla grande...
è solo explorer che mi da questi problemi......

- per quanto riguarda il campo "submit" mi serve per capire lato server se il form è stato inviato o meno, e siccome se il bottone è di tipo immagine il valore "submit" non passa (non so perchè ma è così) ho inserito quel campo nascosto...
avrei potuto chiamarlo tranquillamente pippo ma siccome il codice php era gia scritto ho optato per "submit"...
in ogni caso non mi sembra un errore semantico......


ergo... sto ancroa impazzendo a fare delle prove ma il problema rimane... sicuramente sbaglio da qualche parte ma non capisco dove....
qui potete vedere il codice che ho modificato:
http://ultrapulito.no-ip.org/kalidoxa/html/login.html
http://ultrapulito.no-ip.org/kalidoxa/style.css

come dicevo.. con opera e firefox funziona (tranne per il padding ma poi penserò anche a quello) mentre con explorer è un delirio....

ma lo vedete così anche voi o è solo il mio explorer che fa disastri?

deng iu
citrus

[lamp]

L'ho provato solo con IE7 beta ma credo vada bene.

Ho eliminato tutti gli "spacer" per una migliore leggibilità.

Nella classe etichetta, inoltre, ho aggiunto un float:left.

PS: non vedo l'id "login" nel foglio di stile...

<div class="etichetta">username</div>
<div class="etichetta">password</div>
<form id="login" name="login" action="javascript:submit('rpc.php?action=login','post');" style="clear:left;" >
<input type="text" name="username" class="form" style="width: 190px"/>
<input type="password" name="password" class="form" style="width: 140px"/>
<input type="hidden" name="submit" value="submit"/>
<span style="vertical-align:bottom"><input type="image" src="img/login.jpg" width="44" height="21" border="0" /></span>
</form>
<span class="links">&raquo; hai dimenticato la password?</span>
<span class="links">&raquo; registrati</span>

Ciao a tutti da Lamp! (new user )

[citrus]

Originariamente inviato da lamp
L'ho provato solo con IE7 beta ma credo vada bene.

Ho eliminato tutti gli "spacer" per una migliore leggibilità.

Nella classe etichetta, inoltre, ho aggiunto un float:left.

PS: non vedo l'id "login" nel foglio di stile...

<div class="etichetta">username</div>
<div class="etichetta">password</div>
<form id="login" name="login" action="javascript:submit('rpc.php?action=login','post');" style="clear:left;" >
<input type="text" name="username" class="form" style="width: 190px"/>
<input type="password" name="password" class="form" style="width: 140px"/>
<input type="hidden" name="submit" value="submit"/>
<span style="vertical-align:bottom"><input type="image" src="img/login.jpg" width="44" height="21" border="0" /></span>
</form>
<span class="links">&raquo; hai dimenticato la password?</span>
<span class="links">&raquo; registrati</span>

Ciao a tutti da Lamp! (new user )

grandissimo
praticamente è identico a quello che avevo fatto io..
solo che hai tolto gli spacer...
ed in effetti erano quelli a creare problemi! (l'immortacci loro).
li avevo pensati per creare degli spazi tra una riga e l'altra.
ad ex lo spacer2 è alto 2px, lo spacer5 è altro 5 px e così via...
ora però mi rimane il problema....
come faccio a creare degli spazi tra una riga e l'altra?

grazie
citrus

[citrus]

tra le altre cose ho anche tolto il doctype che mi rompeva le balle... se non lo metto i browser entrano in modalità compatibile con html 4.0 e interpretano il codice in maniera più uniforme.. altrimenti qui ogniuno fa quello che cavolo gli pare!
voi cosa ne dire? è grave se lo ometto?

qualcuno poi sa dirmi anche come fare a creare degli
"spacer" tramite css?
altrimenti mi toccherà ritornare a usare le tabelle e mi spiacerebbe

[Mich_]

Gli spaziatori si fanno con i margini.
margin-bottom: 2px;

Se togli il DOCTYPE metti i browser in condizione di interpretare a modo loro.
Se metti il DOCTYPE XHTML Strict, obblighi i browser a ragionare come il W3C (anche IE per quanto riguarda il box-model).

[citrus]

ok ho messo il doctype che mi hai consigliato tu...
però qualcosa sballa sempre porca miseria
tipo il padding...
adesso l'unico ad interpretarlo correttamente è explorer...
opera e firefox invece aumentano anche la dimensione del div..
in pratica per ottenere un etichetta di 190px con un rientro di 5px devo fare l'etichetta di 185px e un padding-left di 5px...
echeca...o!

un altra cosa è l'altezza degli input text dei form...
che devono essere bianchi, alti 22px con e un bordino nero...
opera e explorer bene...
firefox me li fa giganti!
uffi ma c'è un modo per fare quadrare tutti i browser allo stesso modo? ... o faccio prima a lasciar perdere?

[Mich_]

Mi sa che devi ripassare il box-model del W3C.
Tu stai basandoti su quello di IE, che e` diverso da quello ufficiale.

La larghezza totale di un blocco (W3C) e` data da:
margin+border+padding+width+padding+border+margin
Mentre in IE border e padding sono compresi nel width.

E` meglio programmare per i browser standard, e poi correggere per IE (tramite i commenti condizionali).