[css] problema interpretazione crossbrowser

[NoWhere]

Salve! sono Troy McClure, forse vi ricorderete di me per documentari come "odia IE", "IE ti ama ma si fa odiare" e come non ricordare "IE aumenta la tua cirrosi epatica ma ti regala anche la crisi nervosa!!"...
.
lavorando sulla grafica-layout dal mio sito, NoWhere, mi tocca fare alcune provole con IE per vedere i risultati di quanto lavorato... e... voilà: IE interpreta a modo suo un settaggio banalissima di colore sfondo dato ad u DIV del layout e così facendo si vede una cachiera!! ù_ù

per capire di cosa parlo, basta vedere l'homepage qui, prima con FF e poi con IE

la struttura é sintetizzata, così -->

<div header> css: background-color: #000000
<div container> css: background-color: #000000
-<div col sx> css: background-color: #000000
-<div centrale> css: background-color: #000000
-<div col dx> css: background-color: #000000
<div footer> css: background-color: #000000

ora, notando che é anche una inutile ripetizione specificare il colore-sfondo anche agli interni div colonne e centrale; IE proprio non legge l'impostazione del colore-sfondo del contenitore!!
parentesi a parte che ne IE ne FF allungano il contenitore per quanto si dovrebbe estendere tenendo conto del DIV interno più lungo.. magari se sapete spiegarmi cosa erro ...

[makpaolo]

che mal di testa .... comunque prova a sostituire <br style="clear: both" /> con un div oppure ancora meglio il clear:both mettilo come prima voce per il div footer


edit: ho visto che nel css è presente il clear:both per il footer, che ti serve anche nel <br> ?


edit 2
dato che è tutto nero ... anziche #333333 nel Body mettici #000000 e certamente risolvi ...

[NoWhere]

il clear:both messo per il tag BR serve come doppia mandata di sicurezza, visto che quello nel footer non lo prendeva...
domanda: mi dici di toglierlo o metterlo solo nel footer per risolvere il problema dell'allungamento container? [che rettifico, credo che non-funzioni con IE]

ora provo a fare come dici, tolgo il br e lascio solo il clear settato via css nel DIV-FOOTER

[dreadnaut]

uhm, ho un dejà vù di questa cosa, boh. Non è che IE non vuole dare il colore di sfondo, è che il contenitore non c'è. Siccome contiene solo elementi float, cioè fuori dal normale flusso di allineamento, la sua altezza sarà 0px!

Direi che ti serve l'immancabile .clearfix (che ormai tengo salvato in un file, tanto lo uso per ogni sito che faccio...)

[NoWhere]

interessante quell'articolo, ache se datato 2005.. lo leggerò con interesse!!

comunque, grazie al suggerimento di mak, cioè togliere quel <br style="clear:both;" /> che stava dopo la chiusura del <div centrale> e prima della chiusura del <div container> e lasciando il clear:both settato nel <div footer> credo che ho risolto il problema con IE!!
qualcun altro può darmi conferma? grassie!! ^__^

[makpaolo]

con IE è ok ... dovrebbe andare a posto anche la lunghezza della zona centrale dato che il footer si allinea alla colonna più lunga (centrale compresa).

[NoWhere]

bene.. temo che però adesso non sia ok per firefox!! x___X'

provo a capire quell'articolo in inglese del super-clear... magari se dreadnaut l'ha già testato e potrebbe indicarmi la via... ^__^'

EDIT: per farlo notare meglio ho aggiunto delle scritte ed eliminato il colore-sfondo alle tre colonne contenute nel container!!

[dreadnaut]

Il concetto del clearfix è lo stesso del clear both, si si! solo che lo assegni all'oggetto stesso e non a quello successivo, così non hai problemi se inserisci qualcosa in mezzo o cambi l'ordine.

Riguardo al fatto che sia datato... IE6 è uscito il 27 Agosto 2001, l'engine non è mai stata aggiornata per corregere i bug di allineamento, e pensa quanti ancora lo usano!! (grazie a MS che richiede xp-sp2 per IE7...)


la via è semplice: aggiungi quelle righe al tuo css, e poi dai class="clearfix" ai contenitori di roba float, che invece di rimanere piccoli, si "allungheranno" tanto quanto il contenuto più lungo

[NoWhere]

ho editato il mio post precedente!
a parte questo, noto che la soluzione di mak va bene, ma solo se la parte più lunga é il DIV-CENTRALE, se, come nel mio cosa attuale, il DIV più lungo é uno laterale non funziona più con FF - con IE ok!! = (

può dipendere dal fatto che nel codice i div sono scritti in questo ordine ->
div sx; div dx; div centrale
??

@Dread, nel mio caso specifico dovrei inserire questo codice
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
dove?

[dreadnaut]

l'ordine non dovrebbe importare (mettili in sequenza in modo che abbiano senso anche senza css). Quel codice va buttato da qualche parte nel tuo file css, dove esattamente non importa

[NoWhere]

l'ordine non dovrebbe importare (mettili in sequenza in modo che abbiano senso anche senza css). Quel codice va buttato da qualche parte nel tuo file css, dove esattamente non importa

no scusa, sono stato precipitoso e impreciso..
dove devo inseirre la classe, in quale div? in tutti i div? non credo,
attualmente ho impostato per ogni div un ID, devo accorpare quel codice css agli attuali esistenti ID?
questo intendevo!! ^^

[dreadnaut]

anch'io avevo editato qualche post sopra auto-cito!

la via è semplice: aggiungi quelle righe al tuo css, e poi dai class="clearfix" ai contenitori di roba float, che invece di rimanere piccoli, si "allungheranno" tanto quanto il contenuto più lungo

quindi direi solo a #container; magari anche a #centrale se intendi metterci delle immagini che float-ano a destra o a sinistra, o qualcosa di simile

[NoWhere]

oochèi, ho risolto!!
dopo ore a non capire come utilizzare quel fix -_-'... illuminazione!!
ho richiamato la classe clearfix e l'ho aggiunta al DIV-CONTAINER
graziassai Dreadnaut!! ^__^

topic risolto, spero risulti utile ad altri!! *_*

[funcool]

La pagina che hai linkato io la vedo male sia con Firefox 2.0.0.6 (la parte centrale copre un po' la colonna di destra, credo perché il banner pubblicitario è troppo largo) che Internet Explorer 7 (la parte comincia appena finiscono le due colonne laterali ma rimane in centro).

[NoWhere]

@funcool; questo forse perchè hai una risoluzione-monitor a 1024..
non é un problema che persisterà perchè, come ho scritto nel primo post, stò "lavorando sulla grafica-layout dal mio sito"
comunque grazie della segnalazione!!