position:fixed

[seed_squall_it]

Eheh...su questo hai ragione...IE è molto coerente negli errori che combina! In realtà, il comportamento di IE a volte sembra quello corretto perché fa "quello che uno si aspetta", mentre FF che segue gli standard, pare faccia tutto sballato.

Nel tuo caso, se dichiari un box float: left (il tuo menu) e poi un box position: relative con offset nullo (il tuo contenuto), FF si comporta nel modo corretto. E' IE che sbaglia (e in modo colossale)!

Per affiancare 2 box dovresti usare float: left su entrambi, oppure impostarne uno position: static con un margine sinistro pari alla larghezza dell'altro box, e quest'ultimo box potresti ad es. posizionarlo in modo assoluto. Il discorso è molto complesso perché ci sono tante cose di cui discutere (specie i bug di IE!), ma al limite, c'è sempre il forum, no?

Invece, riguardo a quello che ti era successo, lasciamo stare l'overflow e concentriamoci su come avevi impostato i due box. Il menu era float: left. Quindi era estratto dal flusso del documento e non condizionava la disposizione di altri box (float è una particolare proprietà di posizionamento alternativa a relative e absolute, che "spinge" un box tutto a sinistra o tutto a destra rispetto al suo contenitore). In ogni caso, ricorda che qualsiasi elemento flottante diventa implicitamente un block-level element e viene estratto dal flusso.
Poi avevi il box dei contenuti che era position: relative con offset nullo. Siccome questo box non subiva "scostamenti" rispetto alla sua posizione normale, FF te l'ha mostrato dove effettivamente si trovava, ovvero tutto a sinistra (con il box flottante del menu sovrapposto ad esso).

IE invece ha un clamoroso bug nella gestione dei box successivi ai box flottanti. Quel browser infatti ti visualizza i due box affiancati (come ti aspettavi tu) e se il box successivo al box flottante ha almeno una dimensione impostata (height o width), IE aggiunge un "margine" di 3 pixel tra i due box!

Riguardo ai box flottanti, IE è pieno di bug...senza contare tutto il resto! :rollo:

[dannie]

Originariamente inviato da seed_squall_it
Invece, riguardo a quello che ti era successo, lasciamo stare l'overflow e concentriamoci su come avevi impostato i due box. Il menu era float: left. Quindi era estratto dal flusso del documento e non condizionava la disposizione di altri box (float è una particolare proprietà di posizionamento alternativa a relative e absolute, che "spinge" un box tutto a sinistra o tutto a destra rispetto al suo contenitore). In ogni caso, ricorda che qualsiasi elemento flottante diventa implicitamente un block-level element e viene estratto dal flusso.
Poi avevi il box dei contenuti che era position: relative con offset nullo. Siccome questo box non subiva "scostamenti" rispetto alla sua posizione normale, FF te l'ha mostrato dove effettivamente si trovava, ovvero tutto a sinistra (con il box flottante del menu sovrapposto ad esso).

IE invece ha un clamoroso bug nella gestione dei box successivi ai box flottanti. Quel browser infatti ti visualizza i due box affiancati (come ti aspettavi tu) e se il box successivo al box flottante ha almeno una dimensione impostata (height o width), IE aggiunge un "margine" di 3 pixel tra i due box!

Riguardo ai box flottanti, IE è pieno di bug...senza contare tutto il resto! :rollo:

Visto che quello che mi hai spiegato non ha fatto che confermare quello che avevo ipotizzato a intuito circa la coerenza di IE, lasciamo per ora perdere IE ok?
Quindi parliamo della visualizzazione in firefox... Come anche prima, la tua spiegazione è molto chiara.... però.... e dopo questo però inizi a odiarmi vero?? Scherzi, a parte, è che sto cercando di capire se sto facendo casini io o meno, se hai ancora un po' di tempo e pazienza poi giuro che mi zittisco! ...quindi dicevo: però il mio codice -costruito secondo i tuoi preziosi consigli- comprende menu e content costruiti così:

<div id='menuSx' style='float:left; height:470px; width:160px; margin:0px; padding:0px; overflow:auto;' class='BarraTitolo2'> .... </div>

<div id='content' style='height:468px; width:837px; position:relative; border:1px solid black; padding:0px; margin:0px 0px 0px 3px !important; margin:0px; overflow:auto;'> .... </div>

e sono affiancati! Se invece tolgo la regola overflow:auto del content, si dispongono esattamente come hai descritto tu...

[seed_squall_it]

E perché dovrei odiarti? ...io odio solo IE, non chi cerca di capire come questo (assurdo) browser funziona!

Allora, premesso che impostare position: relative per il box content non serve in un caso come il tuo, ti basta togliere questa dichiarazione e vedrai che i box in FF sono affiancati con o senza l'overflow.

Invece, se position: relative ti servisse nel content per posizionare dei box assoluti al suo interno, dovresti dichiarare flota: left anche il content, così da affiancarlo forzatamente al box del menu.

Quello che ti succede togliendo l'overflow dal content quando questo è position: relative è un po' strano in effetti. In fin dei conti, content è un box successivo a un box flottante e quindi dovrebbe essere "sopra" il box flottante (perché è posizionato in modo relativo e ha z-index automaticamente maggiore), indipendentemente dalla presenza o meno di overflow...mah! Magari è un bug di FF (anche se mi pare molto improbabile...)! Non mi ero mai trovato in questa situazione sinceramente...

[dannie]

OOOKEEY! Allora, position relative mi serve proprio per il motivo che mi hai spiegato tu, cioè per mettere dentro il content degli oggetti con position:absolute, quindi non lo posso togliere. Lasciandolo, se non specifico l'overflow si comporta correttamente come mi hai spiegato, cioè sovrapponendosi, invece (chissàperchè a questo punto) aggiungendo la regola dell'overflow si affianca (buon per me, ma non è il comportamenteo corretto secondo la tua spiegazione)... ma aggiungendo anche float:left posso mettere o togliere l'overflow senza differenze di comportamento, i due div restano affiancati a dovere (...e anche in IE!) ...perciò GRAZIE!!!
PS Già che sai così tante cose, non è che hai qualche suggerimento anche per l'altro thread che ho aperto stamattina?

[seed_squall_it]

Beh, corretto o no, non mi sembra che overflow dovrebbe "interferire" con i box flottanti o posizionati...magari mi sfugge qualcosa, ma overflow è una proprietà "interna" del box che non dovrebbe modificarne il posizionamento.

Se imposti i due box con float: left ricordati di "ripulire" il float con la dichiarzione clear: left dopo i due box flottanti (puoi metterci un elemento vuoto come
e assegnargli una classe che faccia il clear).

Ho letto l'altro thread che hai postato, ma sinceramente non mi pare si possa centrare verticalmente un "box" (anche anonimo) di cui non conosci l'altezza.

PS: per box anonimi si intendono quei box "creati artificialmente dal browser" in fase di interpretazione della pagina. Se tu ad es. scrivi un testo direttamente nell'elemento body, il browser lo "tratta" come se fosse circondato da un box alto e largo quanto il testo stesso, in modo che tu possa applicargli delle regole di stile come margin, padding e border. Il box nel codice XHTML non esiste ovviamente, e per questo è detto anonimo.

[seed_squall_it]

Ah, se non ricordo male avevi impostato con un hack che utilizzava !important il margine dei box perché avevi il box dei contenuti statico e quello del menu flottante (e IE aveva il bug dei 3 pixel).

Se ora hai entrambi i box flottanti a sinistra, puoi fare a meno di quell'hack...basta che imposti il margin-right del box del menu per creare uno spazio. Mi raccomando: non impostare il margin-left del box dei contenuti, perché avendo i box flottanti a sinistra, IE incorrerebbe nel bug dei margini raddoppiati! Se imposti il margine di un box sullo stesso lato dichiarato per il float, IE raddoppia la misura di tale margine! Quindi, con box flottanti a sinistra, usa sempre margin-right sul primo box per spaziarli!

[dannie]

Originariamente inviato da seed_squall_it
Mi raccomando: non impostare il margin-left del box dei contenuti, perché avendo i box flottanti a sinistra, IE incorrerebbe nel bug dei margini raddoppiati! Se imposti il margine di un box sullo stesso lato dichiarato per il float, IE raddoppia la misura di tale margine! Quindi, con box flottanti a sinistra, usa sempre margin-right sul primo box per spaziarli!

VVoVe: uaaa....basta bachi IE, questa settimana sono diventata scema a spostare un'immagine di pochi pixel finchè un'anima buona su questo forum mi ha detto che poteva essere una versione un po' strana del baco dei 3px...

[seed_squall_it]

Ti capisco benissimo...io a volte ho perso giorni per sistemare cose da niente per colpa di IE...per questo lo odio così tanto! :

Cmq, se ti può...posso dire "consolare"? IE, di bug, ne ha almeno una trentina e spesso, dato che alcuni riguardano la medesima proprietà, ti senti con le mani legate nonostante pensi a tutte le soluzioni possibili. Sto scrivendo una guida all'XHTML e ai CSS per degli amici e le pagine dei bug di IE per ora sono ben 18! :rollo: