problema con float e Opera

[E.L.]

Salve a tutti. Ho un grosso problema per un layout che sto cercando di
realizzare.
In sostanza si tratta di un box contenitore centrato correttamente che
contiene vari box al suo interno.
Il box del contenuto vero e proprio ha una lunghezza definita e l'overflow è
su auto. All'interno di questo ho piazzato altri 3 box ciascuno contenente
una foto e una descrizione. Alla foto ho impostato un float a sinistra.
Segue poi un ulteriore box con una barra di navigazione.

Lasciamo perdere il fatto che devo aver commesso altri errori e che ho
trovato almeno altre tre possibili soluzioni per la creazione di un layout
simile; diciamo però che con gli IE tutto ok, con Mozilla lo stesso (almeno
all'inizio, adesso ci ho un po' pasticciato).

I problemi sorgono con Opera che adotta uno strano comportamento: l'immagine
con il float, come dire, non esaurisce il suo effetto una volta che è
seguita da un testo, ma continua ad essere presente, per Opera, nel layout.
Così il contenuto dell'ultimo box si sposta a destra sulla base delle
dimensioni dell'immagine stessa.

Non ci avete capito niente? Neanche io!
Vi posto un link con l'esempio così capite meglio, provate prima con Ie o
Mozilla e poi con Opera, se potete...
http://prove.lexiconline.it/test/esempio.htm

Grazie

[Jerry Masslo]

che opera? noto altre differenze ma non quella che dici se puoi allegare uno screenshoot colle differenze si capirebbe meglio

[E.L.]

Con Explorer tutto ok!



Con Opera la barra di navigazione si sposta seguendo il testo flottante a lato dell'immagine di ciascun box e non capisco perchè e poi il box contenitore si allunga sulla base del box in overflow. Questo prolema si manifesta in pratica solo se è presente l'overflow, senza è tutto normale o se tolgo tutte le immagini tranne la prima che è visibile in default. Ho provato sia con Opera 7.23 che con l'ultima versione disponibile, mi pare la 7.54.

Ti è chiaro adesso?

[Jerry Masslo]

ricordo che tempo fa qualcuno ha postato un problema simile al tuo che non ricordo come è andato a finire a ogni modo smanettando ho trovato questo:

intanto al div .box non devi dare un height ma caso mai un un min-height perché ie legge height come min-height ma gli altri browser no e allora devi fare:


.box {min-height:80px;
height:auto!important;
height:150px
}

la discrepanza in px è dovuta ai problemi col box-model di ie che non somma padding e border come dovrebbe mentre gli altri sì (la misura è approssimativa perché non ho fatto i conti ma sembra andare bene)

poi l'immagine col testo la infili dentro un paragrafo che quindi sarà annidato dentro .box

cioè :

<div class="box">

<img .... />testo che era direttamente dentro .box</p></div>


ciò risolve gran parte dei problemi con opera e rimane uno spazio in più dentro l'overflow:auto alla fine con opera che va via se prima di chiuderlo metti un <div style="clear:both"></div> o fai una classe e gliela assegni


a questo punto dovrebbe essere tutto a posto ma passando col mouse su uno dei link in basso su opera ricompare tutto lo spazio che si è fatto tanta fatica a togliere!!!

quindi prendi il blocco coi link e lo esci da tutto il resto in questo modo i link diventano innocui anche con opera e ti rimane di riformattare quei link in modo che si centrino come il resto.

spero di essermi fatto capire

[E.L.]

spero di essermi fatto capire

Sembra di sì, grazie stasera provo. Mi sono proprio dimenticato del discorso di min-height, e sì che ci sono passato parecchie volte

Grazie ancora ti faccio sapere.

[E.L.]

Non va! Procediamo per punti...

intanto al div .box non devi dare un height ma caso mai un un min-height perché ie legge height come min-height ma gli altri browser no e allora devi fare:

.box {min-height:80px;
height:auto!important;
height:150px
}

Allora, adesso mi è chiaro il perchè non ho usato min-height: la quantità di testo da inserire in ciascun box non sarà mai superiore all'altezza dell'immagine contenuta nel box e quindi, adesso non ricordo il ragionamento, comunque ero giunto alla conclusione che bastasse un height. In ogni caso io l'ho inserito come hai detto, ma le misure mi sembravano sbagliate e le ho modificate, ma non credo sia questo l'errore

poi l'immagine col testo la infili dentro un paragrafo che quindi sarà annidato dentro .box

cioè :

<div class="box">

<img .... />testo che era direttamente dentro .box</p></div>

Fatto ma sono al punto di partenza. Onestamente, posso ovviamente aver sbagliato qualcosa ma non c'è alcuna differenza.

ciò risolve gran parte dei problemi con opera e rimane uno spazio in più dentro l'overflow:auto alla fine con opera che va via se prima di chiuderlo metti un <div style="clear:both"></div> o fai una classe e gliela assegni

Fatto e qui effettivamente riesco ad eliminare lo spazio dentro al div che contiene i box ma non l'allargamento del div che contiene tutto.

a questo punto dovrebbe essere tutto a posto ma passando col mouse su uno dei link in basso su opera ricompare tutto lo spazio che si è fatto tanta fatica a togliere!!!
quindi prendi il blocco coi link e lo esci da tutto il resto in questo modo i link diventano innocui anche con opera e ti rimane di riformattare quei link in modo che si centrino come il resto.

Io onestamente non ho notato il problema che dici, cmq ho apportato la modifica e la barra fuori sembra non considerare più il float sopra, quindi ok.

Come puoi vedere anche tu (il link è quello del primo post) rimane il problema dell'allungamento del blocco contenitore oltre la misura dichiarata. Ripeto forse ho sbagliato qualcose nel fare quello che hai detto, ma ho provato e riprovato e non riesco a capire che cosa!

[Jerry Masslo]

è come immaginavo dovrò aver dimenticato qualcosa così la cosa più semplice è che ti metto online la pagina che mi pare ricordare aver visto giusta anche con opera così puoi vedere tu che lo hai presente meglio il tuo codice le modifiche che ho fatto


per quanto riguarda l'height colle immagini in pixel il tuo discorso torna ma non con il testo che in realà potrà essere visualizzato a varie grandezze in vari dispositivi e non è conveniente non le supporti per un semplice min-height

prima ti metto online la pagina e poi ti do qui il link

http://www.mondoquarto.org/Volanti/EL.html

dovrebbe più o meno andare ho cambiato anche altre cose perché visto che dovevo riaprirlo almeno faccio qualche cosa così ti aggiustato i nuovi bordi perché ora il menù sotto è fuori il vecchio annidamento e pure altro mi pare ah ora i link sono centrati pure su ie e non mi ricordo altro di aver fatto e rimane con opera un eccesso di altezza della pagina anche se con solo sfondo ma sopratutto la soluzione non è conveniente perché occupa senza usarlo tanto spazio che potrebbe essere utile invece per far vedere e se qualcosa deve rimanere fisso per comodità di averlo a portata di mano sempre meglio che apra pannelli caso mai in modo da non occupare spazio se non usati

il li te lo dato dovrebbe essere tutto a posto

[E.L.]

Grazie sei molto gentile. Adesso però (ore 11.15) il server in cui ha posto la pagina è irraggiungibile, poi riprovo più tardi; mi è venuta un'altra idea per risolvere il problema, voglio provarle tutte.
Può essere utile per il futuro...

[Jerry Masslo]

sì stamattina il server è down, ci stanno ancora lavorando

[E.L.]

Originariamente inviato da Jerry Masslo
sì stamattina il server è down, ci stanno ancora lavorando

Adesso mi da errore 404 prima non riuscivo a visualizzare nulla, aspetto, anche se comincio ad essere ansioso, sono bloccato da tre giorni, ho trovato varie soluzioni, ma, ormai, è una questione di principio, voglio capire come aggirare il bug di Opera