Topic: elementi flottanti multipli. Baco CSS?

[chirale]

Prima le cose importanti:
Mozilla/5.0 (X11; U; Linux i686; it; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Sono stati segnalati problemi in Firefox riguardo all'inserimento di elementi flottanti uno di seguito all'altro? Il problema è segnalato in questa discussione su Wikipedia: http://it.wikipedia.org/wiki/Discussioni_progetto:Anime_e_manga#Nuovo_box_laterale.

I due casi sono:
http://tan1.altervista.org/ff1.JPG (Firefox 1.0.7)
e
http://tan1.altervista.org/ie3.JPG (IE 6)

I CSS per la tabella sono i medesimi, ma nel caso di firefox i "modifica" vengono spostati subito sotto la prima tabella (con float:right) mentre in IE mi segnalano che non accade (mi segnalano perché IE non lo uso da un pezzo   ).

Comunque, potete verificare questo strano comportamento in tutte le (attualmente quasi 600) voci della Wikipedia in lingua italiana che usano un certo codice per generare quelle tabelline flottanti: la lista completa è su:

link

Ho provato a risolvere il problema, ma dato che diversi browser interpretano in maniera diversa (ed IE in questo caso interpreta giusto) mi chiedevo se non potesse essere un baco nel browser.


edit Underpass: modificato il link che sballava la formattazione del post

[Underpass]

Ciao, hai già provato a guardare su BugZilla se è presente una segnalazione simile?


P.S. Ho notato solo adesso: la versione di Firefox su cui stai testando è vecchia di almeno un anno e mezzo e non più supportata. Hai provato almeno la versione 1.5.0.11?

[chirale]

In realtà la segnalazione è di un wikipediano con quella vecchia versione ed IE, ma io sperimento lo stesso problema con la 2.0.0.3.

Proverò a spulciare in bugzilla se c'è un caso simile, nel mentre se ne sapete di più dite pure. 

Mmmh, se c'è sarà da queste parti (lo segno qui così domani controllo meglio).

[flod]

Bisognerebbe anche provare a creare un test case minimo e vedere se il problema persiste

[lucasali]

le immagini d'esempio si riferiscono a due pagine diverse e quindi l'esempio è poco significativo
io le vedo così:
http://it.wikipedia.org/wiki/Angel_Heart
ff http://img149.imageshack.us/img149/4277/angelheartffow3.jpg
ie http://img218.imageshack.us/img218/7540/angelheartiepd8.jpg
validazione css

http://it.wikipedia.org/wiki/Bakuretsu_Hunter
ff http://img300.imageshack.us/img300/5134/bakuretsuhunterffft0.jpg
ie http://img90.imageshack.us/img90/8148/bakuretsuhunterielj7.jpg
validazione css

la validazione dei css è quasi disastrosa ... e per me troppo complessa per circoscrivere il problema,
concordo con flod sul creare una pagina di test in cui si mette solo il minimo indispensabile

[chirale]

Proverò a fare così. Il problema è che vi sono elementi su cui non ho alcun controllo, e credo che proprio uno di questi, il "[modifica]" fluttuante, che fa gran parte del casino. Vi terrò aggiornati.

[chirale]

Segnalo con lo stesso problema la pagina http://it.wikipedia.org/wiki/Autocensura#Censura_morale_ed_estetica.

Anche in questo caso, IE6 interpreta correttamente mentre FF2 accumula i "[modifica]" alla fine di tutte le immagini (che usano

Codice: [Seleziona]

float:right
Quindi il problema dev'essere fra questa impostazione e quella dei "[modifica]".

[chirale]

All'indirizzo
http://echowebspace.altervista.org/test/float-bug.html
trovate il test che avete richiesto. Ho riportato solo le classi utili, mantenendo il testo della voce Censura di Wikipedia, che dava quel problema ma ripulendola dagli errori XML.

Validazione: XML, CSS.

Credo che mentre IE ignora i clear:right per l'elemento "editsection" fluttuante, Firefox lo prenda in considerazione e faccia spostare tutto sotto. Il risultato è che, con N immagini una sotto l'altra, si avranno N elementi editsection allineati uno di fianco all'altro alla fine di tutte.

Dato che l'editsection è nei tag di intestazione (Hn), e il posizionamento di "editsection" è relativo e non assoluto, dovrebbe essere ignorato, giusto?

[flod]

Appunti in ordine sparso:

• le prime due classi (.floatright) non vengono usate nella pagina indicata;
• la classe tright usata per le foto non è posizionata come relativa ma solo come float, stesso discorso per editsection

Lo stesso problema è presente in Safari (motore di rendering KHTML), per cui tendo a pensare che il comportamento errato sia quello di Internet Explorer.

[chirale]

le prime due classi (.floatright) non vengono usate nella pagina indicata;

Vero, ma è usato dal primissimo esempio (quello dei fumetti). Il problema è comunque nell'uso di float e clear, questo è chiaro.

la classe tright usata per le foto non è posizionata come relativa ma solo come float, stesso discorso per editsection

Dato che il float è all'interno di una intestazione, però, IE decide di spingerlo facendolo rimanere sulla stessa riga mentre FF decide di farlo slittare fino all'ultimo posto in cui non trova un clear.

Lo stesso problema è presente in Safari (motore di rendering KHTML), per cui tendo a pensare che il comportamento errato sia quello di Internet Explorer.

Sì, ho controllato sia su Konqueror che su Opera e il risultato è il medesimo. Formalmente dovrebbe essere corretto, dato che i float trasformano in block gli elementi (che forse IE tratti gli span trasformati in block in maniera diversa?).

Se per .editsection non si può usare float, allora rimane solo il posizionamento relativo? E come fare in modo che non si sovrapponga alle immagini, che rimarranno invece flottanti?

[flod]

Sinceramente non saprei; in ogni caso, una volta stabilito che non si tratta di un problema di Firefox, direi che siamo ampiamente OT.

Ti consiglio di provare a rivolgerti ad un forum che si occupi nello specifico di questi argomenti; se non ricordo male un altro utente aveva risolto problemi simili con il forum di diodati.org

[chirale]

Mmh sì, non sono ancora pienamente convinto del comportamento dei browser in questa situazione (dovrei leggere bene le raccomandazioni W3C in merito) ma in effetti è un caso che va un po' oltre la mera interpretazione canonica dei CSS.

Grazie a tutti per la disponibilità ed i consigli.