Autore Topic: FF2 e FF3, differenze di rendering (Letto 2548 volte)

Francesco Sblendorio · « **il:** 21 Agosto 2008 09:16:34 »

Salve,
ho notato, in questa pagina:

http://fpazienza.netsons.org/Videogallery/Videogallery

...delle differenze di rendering di Firefox 3 rispetto a Firefox 2, dove il risultato in Firefox 2 è nettamente migliore, e secondo me quello corretto. Ecco come compaiono in questi screenshot:

Screenshot in Firefox 2
Screenshot in Firefox 3

In pratica, in FF3 i vari blocchi di testo (che altro non sono che dei div con proprietà "float: left") risultano "stretti", come se fosse stata indicata una property "width" che in realtà non è impostata.

Qualcuno conosce il motivo di questo strano comportamento?

Grazie,
Francesco.

P.S.
Solo per cronaca, aggiungo:
Questo problema non si presenta con IE7, IE6, Opera.
Si presenta invece con Safari e Konqueror.

Godai71 · « **Risposta #1 il:** 21 Agosto 2008 09:23:17 »

Non posso dirti se dipenda da questo, ma ci sono alcuni errori nel codice della pagina.

W3C Validator

Se dipendesse da questo, si spioegherebbe perché con Safari si abbia lo stesso problema.

Francesco Sblendorio · « **Risposta #2 il:** 21 Agosto 2008 09:38:03 »

Grazie per la segnalazione.
Ho risolto gli errori segnalati:

W3C Validator

...ma il risultato non è cambiato

flod · « **Risposta #3 il:** 21 Agosto 2008 13:32:30 »

Dovresti provare a isolare il problema, togliendo tutto quello che c'è attorno. Così com'è è quasi impossibile capirci qualcosa (ho contato qualcosa come 8 fogli di stile).

Tenderei a considerare più affidabile il comportamento di Firefox 3 rispetto a quello di Firefox 2, anche in considerazione del rendering di Safari.

indigo · « **Risposta #4 il:** 21 Agosto 2008 13:47:41 »

flod ha sicuramente ragione, i CSS sono molto incasinati (li hai fatti te o li hai presi già fatti?)
prova a usare l'estensione Web Developer che contiene molte funzionalità utili, come la modifica in tempo reale di CSS e HTML, o un'ispezione agevole degli elementi e dei selettori CSS relativi..

Francesco Sblendorio · « **Risposta #5 il:** 21 Agosto 2008 14:47:30 »

Allora... ho semplificato la singola pagina e isolato i css strettamente necessari.

Ecco gli screenshot:
Firefox 2
Firefox 3

Ecco la URL di test: http://fsblendorio.netsons.org/test/Videogallery.htm

Non sono però riuscito ad isolare il problema. Dalla versione semplificata è per voi più semplice intravedere qualche indizio?

flod · « **Risposta #6 il:** 21 Agosto 2008 15:35:31 »

Siamo molto lontani da un caso minimo

Esempio

Codice: [Seleziona]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Francesco Pazienza - Videogallery - Videogallery</title>	
    <style>		
		.lfloat { float:left; margin-right:0.5em; }
		.rfloat { float:right; margin-left:0.5em; }
		p { margin-top:0px; margin-bottom:0px; }
		img { border:0px; }
	</style>	
</head>

<body>

		<div class="lfloat"> 
			 <a class="lfloat" href="http://fpazienza.netsons.org/Videogallery/ManonIntermezzo"><img src="Videogallery.htm_files/ist_manon_int.jpg" alt="" title=""></a>
			 <p><strong>SERATA PUCCINI</strong><br/>
				Concerto per il 150^ anniversario<br/>
				della nascita di Giacomo Puccini<br/>
				<strong>Manon Lescaut</strong> - <em>Intermezzo</em><br/>
				Orchestra da Camera "V. Bellezza"<br/>
				direttore <em>Francesco Pazienza</em></p>
		</div>

</body>
</html>

Secondo me il problema consiste nell'assegnare il float:left al div che contiene il link e il paragrafo: in pratica il browser non è in grado di calcolare la larghezza da assegnare all'elemento. Se provi ad eliminare il class="lfloat" sul div esterno, vedrai che gli a capo vengono rispettati correttamente.

A questo punto direi che siamo oltre le competenze di questo forum, per cui ti conviene chiedere aiuto su forum specifici per css o web-design (diodati, html.it, ecc. ecc.)

Francesco Sblendorio · « **Risposta #7 il:** 21 Agosto 2008 22:58:11 »

Ciao a tutti,
ho semplificato tutto il semplificabile. I "nuovi" screenshot sono qui (sempre lo stesso URL):

Con Firefox 2
Con Firefox 3

Il problema permane (le didascalie in FF3 vengono troncate e mandate a capo nonostante ci sia parecchio spazio disponibile sulla sinistra della pagina, mentre in FF2 va tutto bene così come deve andare). Non c'è traccia di "width:" nei CSS relativamente ai <div> presenti.
Ora però un occhio esperto potrebbe cogliere subito un'anomalia. Qualcuno mi può aiutare?

Grazie ancora.

indigo · « **Risposta #8 il:** 21 Agosto 2008 23:21:32 »

ma stai facendo delle prove online?
perché mi cambia "sotto gli occhi"..

comunque, non hai proprio ridotto all'osso, hai lasciato un monte di roba HTML e CSS.
Io ti dico la mia, ma poi ha ragione flod che ti ha suggerito di rivolgerti a siti specializzati:

hai messo l'immagine in un div ed in uno div+span che hanno la stessa classe (lfloat), per giunta inutili tutti e due (questi ultimi due).
io farei così (se non ricordo male è consentito - sono un po' arrugginito):
levi div e span che si chiama lfloat, includi l'immagine nel paragrafo e dai "float: left" all'immagine" che così si amalgama al testo. Poi agisci sui div contenitore che si chiama "lfloat" degli articoletti.

L'errore (in senso lato) secondo me è che hai tanto codice inutile in eccesso, e poi dai la stessa classe a degli elementi che la gradirebbero diversa..forse devi un po' razionalizzare il codice.
Naturalmente, ripeto, trattasi di opinione personale di uno un po' arrugginito..

Francesco Sblendorio · « **Risposta #9 il:** 21 Agosto 2008 23:25:49 »

Citazione da: flod - 21 Agosto 2008 15:35:31

Secondo me il problema consiste nell'assegnare il float:left al div che contiene il link e il paragrafo

Quel "float:left" mi serve per poter avere l'effetto "due colonne", lo metto all'inizio di ciascuna "colonna". Il "float:left" interno serve per scrivere la didascalia accanto l'immagine.

Citazione da: flod - 21 Agosto 2008 15:35:31

in pratica il browser non è in grado di calcolare la larghezza da assegnare all'elemento.

Strano, perché FF2 ci riesce...

Citazione da: flod - 21 Agosto 2008 15:35:31

Se provi ad eliminare il class="lfloat" sul div esterno, vedrai che gli a capo vengono rispettati correttamente.

Se elimino il "lfloat" su div esterno, la seconda "colonna" partirà dove finisce la prima, invece che "riprendere da sopra".

Francesco Sblendorio · « **Risposta #10 il:** 21 Agosto 2008 23:30:22 »

Citazione da: indigo - 21 Agosto 2008 23:21:32

ma stai facendo delle prove online?
perché mi cambia "sotto gli occhi"..

Sì... sorry... sto cercando di ridurre all'osso.

Citazione da: indigo - 21 Agosto 2008 23:21:32

L'errore (in senso lato) secondo me è che hai tanto codice inutile in eccesso, e poi dai la stessa classe a degli elementi che la gradirebbero diversa..forse devi un po' razionalizzare il codice.

E' vero, c'è tanto codice in eccesso, ma la pagina (quella "vera") è prodotta da un CMS, e non ho il controllo completo della situazione, ho cercato quindi di ridurre al minimo, ma senza eliminare il "lavoro" che fa il CMS.

Mi sono rivolto anche ad HTML.it. Continuo a scrivere anche qui perché siete davvero... efficienti!

miki64 · « **Risposta #11 il:** 22 Agosto 2008 04:58:18 »

Citazione da: Francesco Sblendorio - 21 Agosto 2008 23:30:22

Mi sono rivolto anche ad HTML.it. Continuo a scrivere anche qui perché siete davvero... efficienti!

Ok, ok... però non esagerare troppo, caro (presumo) conterraneo, ok?

Siamo abbondantemente Off Topic....

Ciao.

Francesco Sblendorio · « **Risposta #12 il:** 22 Agosto 2008 06:47:17 »

Citazione da: miki64 - 22 Agosto 2008 04:58:18

Ok, ok... però non esagerare troppo, caro (presumo) conterraneo, ok?
Siamo abbondantemente Off Topic....

Non mi pare di essere off-topic, forse "siti non funzionanti" è un tantino troppo, ma dai risultati quello che vedo è che FF3 non interpreta correttamente una pagina fatta in quel modo.

P.S. Sono di Bitonto

klades · « **Risposta #13 il:** 27 Agosto 2008 10:17:18 »

Non so dirti se è più corretta l'interpretazione di FF3 o FF2, però credo che così potresti ottenere una soluzione:

Codice: [Seleziona]

<div id="wikitext">
     <div><span class="lfloat">
             <a class="wikilink" href="http://fpazienza.netsons.org/Videogallery/VespriSicilianiInverno">
             <img src="Videogallery_files/ist_vespri.jpg" alt="" title=""></a></span>
          </div>
         <div class="lfloat"> 
          <p>
            <strong>Teatro <em>T. TRAETTA</em> </strong><br>
            Giuseppe Verdi - Titolo dell'opera <strong>I Vespri Siciliani</strong> <em>(Inverno) Prova1</em><br>
            Orchestra da Camera "Vincenzo  Bellezza"<br>dirige l'orchestra il maestro <em>Nomexxxxxx Cognomeyyyyy</em>
            <br clear="all">
          </p>
        </div>
        <p><br clear="all"></p>
      </div>

Forse varrebbe la pena di aprire un bug su https://bugzilla.mozilla.org/ per chiarire se dipende da un bug o no.

Autore Topic: FF2 e FF3, differenze di rendering (Letto 2548 volte)

Francesco Sblendorio

FF2 e FF3, differenze di rendering

Godai71

Re: FF2 e FF3, differenze di rendering

Francesco Sblendorio

Re: FF2 e FF3, differenze di rendering

flod

Re: FF2 e FF3, differenze di rendering

indigo

Re: FF2 e FF3, differenze di rendering

Francesco Sblendorio

Re: FF2 e FF3, differenze di rendering

flod

Re: FF2 e FF3, differenze di rendering

Francesco Sblendorio

Re: FF2 e FF3, differenze di rendering

indigo

Re: FF2 e FF3, differenze di rendering

Francesco Sblendorio

Re: FF2 e FF3, differenze di rendering

Francesco Sblendorio

Re: FF2 e FF3, differenze di rendering

miki64

Re: FF2 e FF3, differenze di rendering

Francesco Sblendorio

Re: FF2 e FF3, differenze di rendering

klades

Re: FF2 e FF3, differenze di rendering