Con Firefox, risultati diversi (peggiori) usando doctype "strict"

[ldetomi]

Provate a confrontare queste 2 pagine di prova in FIREFOX.

L'intenzione è quella di dare una cornice all'immagine e al tempo stesso dare l'effetto ombra sfalsata. L'unica differenza tra le 2 pagine è il DOCTYPE. L'effetto corretto si ottiene solo con il doctype TRANSITIONAL mente con quello STRICT, viene aggiunto in Firefox, in IE invece incredibilmente è identico, un padding maggiorato nella parte bassa, con il risultato che l'ombra non è più sfalsata allo stesso modo tra sotto e destra.

Versione Transitional

Versione Strict

[Prill]

Ciao, nel primo esempio nessun browser lavora in accordo con gli standard perché manca la seconda parte del doctype, quella che contiene l'indirizzo della dtd di riferimento, e in entrambi i casi Explorer lavora in quirks mode perché è necessario che il Doctype vada sulla prima riga, senza righe vuote e righe con commenti in apertura. Inserendo correttamente il Doctype, che si tratti di html Strict o Transitional, i due browser sembrano comportarsi allo stesso modo

[ldetomi]

Dunque, ho aggiornato i 2 files secondo le tue indicazioni (correggendo il doctype e stando attento che non ci fossero righe vuote al di sopra), risultato:

* IE effettivamente ora lavora correttamente con entrambe le pagine (a questo proposito volevo chiederti come faccio a verificare se un browser sta lavorano in quirksmode oppure intepreta correttamente il doctype?)

* Firefox invece non sistema il bug di layout! come avevo accennato sopra, le 2 pagine, se noti hanno la parte bassa dell'ombra di grandezza diversa, in pratica è come se lo spostamento verso l'altro del div più interno (imposto con top:-5px) venisse raddoppiato in presenza di un doctype strict...

Succede anche a te?

P.S.: il doctype transitional non completo, l'avevo presto proprio da un esempio presente sul sito di html.it e in più... passava la validazione w3c.

[Prill]

Dunque con lo strict vedo con Firefox l'ombra leggermente più ampia (nell'altro esempio invece mi sembra che coincidano perfettamente le visualizzazioni dei due browser), perché succede al momento non so dirti.

volevo chiederti come faccio a verificare se un browser sta lavorano in quirksmode oppure intepreta correttamente il doctype?

la strada più veloce, scarica la web developer toolbar per Firefox (che fra gli altri strumenti ha anche la segnalazione della modalità in cui il browser sta lavorando, per verificare anche errori nel codice ti consiglierei anche un altro componente aggiuntivo che è Html Validator, così mentre testi con Firefox vedi anche direttamente gli errori in una pagina)

[ldetomi]

Ti confermo che l'anomalia con Firefox è esattamente quella che dici tu. In pratica è come se "raddoppiasse" lo spostamento verticale (ma non quello orizzontale.... strano, queste sono cose tipiche di IE, non di Firefox ).

ho già la toolbar di cui parli, ma quella mi consente solo di vedere se Firefox lavora in quirkmode, non cosa fa IE...

[simotenax]

devi dargli display:block all'immagine

[ldetomi]

Hai perfettamente ragione, così funziona!!!!

Per caso, hai idea del perché tale dichiarazione è necessaria SOLO per Firefox e SOLO in presenza di doctype Strict? Certo che c'è da impazzire a star dietro a queste "stronzate" dei browser (una volta solo IE le faceva.....)

[simotenax]

che accada solo su firefox evidentemente è dovuto al fatto che questo browser interpreta il DTD in modo diverso (in questo caso); il DTD strict come da definizione è diverso dagli altri quindi è normale che a diversi DTD corrispondano comportamenti differenti del browser.. C'è chi gioca su questo fatto, su html.it c'era un articolo sul doctype switch addirittura..