Float diventa insibile in IE se il suo contenitore ha sfondo ed è position:relative

[ldetomi]

Mi sono imbattuto in un fatto per me inspiegabile (a parte il fatto che riguarda IE... vabbè), provate a visualizzare il seguente link con Firefox e IE (a me il problema lo dà anche con IE8!!!)

link

Ho ridotto al massimo il codice, e come potete vedere ci sono 2 DIV annidati e quello più interno è dichiarato FLOAT. Chiedo conferma se anche a voi in Firefox il layout è regolare, ovvero con un riquadro floattante sulla sinistra (con i bordi rossi) mentre in IE non si vede!!! Ma il browser lascia comunque lo spazio per questo elemento, ma è come se avesse un visibility:hidden applicato (che ovviamente non c'è)!!!!

Ancora più incredibile... il problema sembra causato dalla presenza contemporanea delle 2 proprietà applicate al DIV contenitore:

<DIV STYLE='position:relative; background-image:url(../../immagini_comuni/content.jpg);'>

Se sono presenti tutte e 2, IE non visualizza l'elemento, se ne tolgo (o sbaglio volutamente, ad esempio il percorso dell'immagine) allora magicamente ricompare!!!!

Sapete darmi una spiegazione?

[fcaldera]

aggiungi zoom:1 al contenitore in relative

p.s. : un div in float dovrebbe avere al massimo display: inline e non block (o rischi anche il bug del raddoppio dei margini in IE6)

p.p.s.: usa un doctype strict (html4 o xhtml1.0) o html 5, altrimenti potrai facilmente incorrere in problemi dovuti al quirkmode

[ldetomi]

IE6 l'ho abolito dalla mia lista di compatibilità, anche perché uso ormai molte immagini png trasparenti, ecc. Si tratta di un sito non istituzionale, anzi direi quasi più "amatoriale" quindi in un certo senso posso permettermi questa discriminazione.

In ogni caso, conoscevo il trucchetto di zoom:1 ma non funziona, non basta a risolvere il problema.

Per il doctype, ci ho pensato che in effetti avrebbe potuto c'entrare ma pensavo che il quirks mode accadesse in "assenza" di doctype, non in presenza di uno di tipo transitional....

Fin'ora ho usato sempre questo perché sinceramente trovo ancora più comodo usare il tag CENTER per centrare ad esempio una tabella o un'immagine nella pagina; mi rendo conto che è contro le linee guida del buon sviluppatore, ma faccio prima così. In CSS dovrei se non sbaglio fare una cosa del genere, giusto?

<TABLE STYLE='margin: 0 auto;'>

ma poi ricordo che questo sistema non funziona nei vecchi IE, anche se però forse, solo quelli prima di IE6, mi confermi?

[ldetomi]

Piccola rettifica, ho riprovato zoom:1 e ora funziona.
L'avevo già provato ma forse l'ho fatto sul DIV float e non sul contenitore, boh.... Così in effetti funziona.

Ma possibile che perfino IE8 abbia bisogno di questi trucchetti???

Altra precisazione, ho provato per curiosità un doctype strict (senza zoom:1) e non risolve il problema.

[fcaldera]

Originariamente inviato da ldetomi
ho provato per curiosità un doctype strict (senza zoom:1) e non risolve il problema.

magari quello specifico no, ma previene di sicuro problemi futuri.

[ldetomi]

ok, ma mi confermi quella storia di come centrare gli oggetti nella pagina in puro css? nel post sopra ho spiegato bene come mai finora continuo a usare il transitional (tra l'altro ho appena letto un libro molto bello sui CSS, scritto da un americano, che tutto sommato consiglia l'uso del transitional, per essere più liberi nelle tecniche di sviluppo).

[fcaldera]

Originariamente inviato da ldetomi
ok, ma 1) mi confermi quella storia di come centrare gli oggetti nella pagina in puro css? nel post sopra ho spiegato bene come mai finora continuo a usare il transitional (tra l'altro ho appena letto un libro molto bello sui CSS, scritto da un americano, 2) che tutto sommato consiglia l'uso del transitional, per essere più liberi nelle tecniche di sviluppo).

1) margin : 0 auto va bene ma non basta ad IE6. Per quel browser metti anche text-align : center al padre e text-align: left al div da centrare, per riportare l'allineamento corretto (come già ribadito in decine di post reperibili con una ricerca)

2) L'uso di doctype non strict è solo un azzardo quando si lavora con IE5,6 e 7. La motivazione "più liberi nelle tecniche di sviluppo" dal mio punto di vista non vuol dire proprio niente: non c'è nulla davvero all'atto pratico che tu non possa fare con un dt. strict rispetto ad uno transitional.

Il quirkmode non si verifica in presenza di dt strict (che sia html4 o xhtml o html 5 la scelta è irrilevante), ma può attivarsi in presenza di altri tipi di dt (o in sua totale assenza).

[ldetomi]

Sì conoscevo i limiti di IE6, in fatto di margini... quindi tu consigli di sostituire:

<CENTER>
  <TABLE>
</CENTER>

con:

<TABLE STYLE='margin:0 auto;'>

giusto? Varrebbe lo stesso discorso anche per centrare un'immagine? Ok, se mi preoccupo solo dei browser moderni, sarebbe anche più sintetico, ma se volessi mantenere la compatibilità col passato, dovrei poi inserire anche il codice aggiuntivo dell'allineamento al centro che hai citato tu. Per questo in realtà finora ho usato il CENTER, per compattezza complessiva del codice, e maggiore intuitività.

Per quanto riguarda il doctype strict, il senso era, che usando il transitional, si poteva "permettersi" di usare anche qualche tag deprecato come appunto il CENTER, citato sopra.

C'è un modo per verificare con certezza se in uno specifico momento il browser sta funzionando in quirkmode (ad esempio ignorano il doctype) oppure no?