[CSS] Problemi di visulizzazione dei contenuti su firefox

12-11-2007, 14.00.14

Salve a tutti!!

Ho un problema che fino ad oggi ho cercato di evitare di risolvere, ma non posso continuare così! ;)

Vi mostro subito il codice:

Codice HTML:

<html>
<head>
<style type="text/css">
.blocco {
border: 1px solid #000000;
background: #d5d5d5;
padding: 5;
}
.immagine {
float: left;
width: 110;
padding: 5;
}
</style>
</head>

<body>
<div class="blocco">
<div class="immagine"><img src="http://letsrock.altervista.org/thumbs.php?filename=gruppi/letsrock_gruppo_87.jpg&size=200"></div>
<div class="testo">I Black Rose nascono dalle esperienze individuali dei quattro componenti e soprattutto nascono già con una precisa identità e con un repertorio proprio: fin dal primo momento in cui Fabio (voce e chitarra solista) e Gianluigi (basso e seconda voce)...</div>
</div>
</body>
</html>

Su internet explorer non ci sono problemi.
Tutto il contenuto del div ( immagine + testo ) viene racchiuso nel riquadro principale ( blocco ).

Invece su Firefox non viene visualizzato correttamente.
Il testo è racchiuso nel blocco, ma una parte dell'immagine esce al di fuori.

In generale mi capita che quando per il div inserisco "float", il blocco che lo racchiude è come se non lo considerasse, come se cambiasse livello ( come quando si utilizza z-index )

Spero di essermi spegato bene...

Come devo modificare il codice per fare in modo che si vedi come su internet explorer?

**funcool** · 12-11-2007, 22.01.30

Alla classe "immagine" prova ad aggiungere "position: relative;".

**dreadnaut** · 12-11-2007, 22.58.31

l'immancabile problema del clearfix. Guarda in quei thread per la soluzione.

btw - da notare che quello di Firefox è il comportamento corretto, mentre IE6 sbaglia (IE7 no).

13-11-2007, 12.08.24

Originalmente inviato da dreadnaut

l'immancabile problema del clearfix. Guarda in quei thread per la soluzione.

btw - da notare che quello di Firefox è il comportamento corretto, mentre IE6 sbaglia (IE7 no).

Ciao!

Prima di tutto razie per le risposte.

Ho provato ad inserire alla fine del div contentore questo tag:

<br style="clear: both" />

ed è OK!!

Ma non ho capito bene cosa sia il clearfix e come si possa utilizzare...

Come posso evitare di inserire lo stile inline?

**dreadnaut** · 13-11-2007, 13.05.28

con il clearfix. è uno spezzone di css che metti nel tuo foglio di stile, ed ogni volta che vuoi che un "contenitore contenga tutto" (aka clearing, "pulizia") (come avviene su IE6) gli assegni quella classe. Questo per evitare di dover aggiungere il <br/> come hai fatto tu, che è peccato.

Come funziona in particolare e come usarlo è spiegato nell'articolo originale.

13-11-2007, 20.41.26

Originalmente inviato da dreadnaut

con il clearfix. è uno spezzone di css che metti nel tuo foglio di stile, ed ogni volta che vuoi che un "contenitore contenga tutto" (aka clearing, "pulizia") (come avviene su IE6) gli assegni quella classe. Questo per evitare di dover aggiungere il <br/> come hai fatto tu, che è peccato.

Come funziona in particolare e come usarlo è spiegato nell'articolo originale.

ho letto un pò vari articoli, ma da quello che ho capito potrebbe dare anche problemi di visualizzazione su altri browser diversi da firefox ed explorer, vero?

A questo punto non è meglio aggiungere un div alla fine del contenuto per non avere di questi problemi?

P.S.
ho provato il <br /> alla fine del div ma con mozilla non va...
ho quindi messo <div style="clear: both;"></div>

**dreadnaut** · 13-11-2007, 21.31.53

mmmh boh, che io sappia è fatto in modo da non dare fastidio a chi si comporta correttamente - contiene tutti gli accorgimenti per i vari safari & co. - sempre usato senza problemi. Se trovi un articolo ch eperò se ne lamenta, linka che mi interessa !

Discussione: [CSS] Problemi di visulizzazione dei contenuti su firefox

LinkBack

Strumenti discussione

Display

[CSS] Problemi di visulizzazione dei contenuti su firefox

Regole di scrittura