Firefox e float - Forum Per Webmaster

**HaccaH** · #1 (**permalink**) 10-07-2007, 17.09.48

Come fate se Firefox decide di leggere a modo suo il float?
Io volevo realizzare questa semplice tabella con i div (gli style sono lunghi perchè gli ho copiati direttamente dal css)

codice:

<!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>Documento senza titolo</title>
</head>
<body>
</body>
<div style="width:440px; position:relative; background-color:#666666; margin:20px 0px; padding-left:135px; padding-right:155px">
 <h3 style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:15px; text-align:center;
margin:0px">ciaO</h3>
 <div style="width:46%; height:100px; padding:2%; margin:10px 0px; float:left; background-color:#0000FF"></div>
 <div style="width:46%; height:100px; padding:2%; margin:10px 0px; float:right; background-color:#00FFFF"></div>
 <h4 style="font-family:Times New Roman; font-size:20px; font-variant:small-caps; color:#0000FF; width:100%;
display:block; margin:0px; margin-bottom:5px; padding:5px 0px; border-bottom:1px solid #000000; border-top:1px solid #000000;
background-color:#00FF00">novità</h4>
</div>
</html>

In teoria (e con explorer) dovrebbe venire la scritta in alto, sotto 2 rettangoli vicini e sotto ancora un rettangolino.
Perchè con Firefox il rettangolino sotto parte da sotto la scritta e non sotto i 2 rettangoli?? Se poi metto il float anche all'ultimo rettangolino allora fa finire esattamente il div centrale sotto la prima scritta, come se il resto non fosse presente...
Perchè???

**EmmeBar** · #2 (**permalink**) 10-07-2007, 18.02.21

hai usato il tag html per mettere il codice, avresti dovuto usare il tag code è per quello che non riuscivi ad impaginare.

Con gli stili il problema non è tanto firefox, che li interpreta correttamente, quanto ie che fa come gli pare, ora siccome tutti usano IE bisogna trovare il modo di accontentarli.

Devi giocare con i parametri per potere visulaizzare bene in tutti i browser.

Provo a vedere cosa potrebbe essere che non va e poi ti faccio sapere.

**HaccaH** · #3 (**permalink**) 10-07-2007, 18.22.33

Quote:

Originariamente inviata da EmmeBar

hai usato il tag html per mettere il codice, avresti dovuto usare il tag code è per quello che non riuscivi ad impaginare.

Come?? e allora a che serve quel tag???

Quote:

Originariamente inviata da EmmeBar

Con gli stili il problema non è tanto firefox, che li interpreta correttamente, quanto ie che fa come gli pare, ora siccome tutti usano IE bisogna trovare il modo di accontentarli.

Devi giocare con i parametri per potere visulaizzare bene in tutti i browser.

Provo a vedere cosa potrebbe essere che non va e poi ti faccio sapere.

Grazie per l'aiuto. Ma comunque in questo caso mi sa che quello che legge male è firefox. In fondo, io gli dico semplicemente che al posto di mettere 4 rettangoli uno sotto l'altro, come avviene normalmente per i div, i due di centro li deve mettere sulla stessa linea. E per farglielo capire uso il float. Ma esiste forse un altro parametro che serve a fare questo??

**EmmeBar** · #4 (**permalink**) 10-07-2007, 18.31.36

ecco, ho modificato il tuo codice che aveva qualche errore, adesso con FF e safari mi pare vada bene, prova a controllare con IE (che non ce l'ho adesso sul Mac.

codice:

<!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>Documento senza titolo</title>
<style type="text/css">
<!--
.pippo {width:440px; 
		position:relative; 
		background-color:#666666; 
		margin:20px 0px; padding-left:135px; 
		padding-right:155px;
		}
 h3 {
 		font-family:Verdana, Arial, Helvetica, sans-serif; 
		font-size:15px; text-align:center;
		margin:0px;
		}
		
.pappo {width:46%; 
		height:100px; 
		padding:2%;
		margin:10px 0px; 
		float:left; 
		background-color:#0000FF;
		}
.pappone {	width:46%;
			 height:100px; padding:2%; 
			 margin:10px 0px; 
			 float:right; 
			 background-color:#00FFFF;
			 }	
h4        {	font-family:Times New Roman; 
			font-size:20px; 
			font-variant:small-caps; 
			color:#0000FF; width:100%;
			//display:block; 
			margin:0px; 
			margin-bottom:5px; 
			padding:5px 0px; 
			border-bottom:1px solid #000000; 
			border-top:1px solid #000000;
			background-color:#00FF00 ;}		 		
-->
</style>
</head>
<body>

<div class="pippo"><h3>ciaO</h3>
 <div class="pappo"></div>
 <div class="pappone"></div>
 <h4>novità</h4>
</div></body>
</html>

**HaccaH** · #5 (**permalink**) 10-07-2007, 19.15.25

Scusate, ma l'ultima versione di Firefox (io non lo uso più molto) è la 2.0.0.4??

No, perchè il codice che mi hai dato lo visualizza esattamente come il mio, ovvero con l'h4 di sfondo verde che mi parte sotto il ciaO, e quindi parte sopra i rettangoli (pappo e pappone per intenderci).

A sto punto mi si è rimbambito il browser...

**EmmeBar** · #6 (**permalink**) 10-07-2007, 19.34.24

Dunque io ho la versione 2.0.0.4 per MAC, non so a che punto stanno con quella per windows.

ora non so bene se ho capito quello che vuoi ottenere, ti posto unoo screenshot così ci capiamo meglio, questo è quello che vedo io sia con FF che con safari, con IE non lo so che non ce l'ho sottomano adesso.

**massy** · #7 (**permalink**) 10-07-2007, 20.19.29

Se ho capito che ti serve, metti clear:left; in h4

Se non ho capito perché non carichi da qualche parte un'immagine con ciò che ti serve?

Ciao

**HaccaH** · #8 (**permalink**) 10-07-2007, 20.54.54

Quote:

Originariamente inviata da massy

Se ho capito che ti serve, metti clear:left; in h4

esatto!!!! Così mi viene la stessa visualizzazione di explorer anche su firefox!!!

Ma clear non serviva per il testo???

Grazie mille!!

**massy** · #9 (**permalink**) 10-07-2007, 21.53.30

Quote:

esatto!!!!

Perfetto

Quote:

Ma clear non serviva per il testo???

Clear serve a *bloccare* il floating dei blocchi in linea di massima.

**HaccaH** · #10 (**permalink**) 13-08-2007, 20.39.29

Sul posizionamento dei blocchi ora non ho problemi, ma ne ora mi son venuti se uso i margini.
Ovvero, i blocchi dopo i float non fanno riferimento ai blocchi floattati per i margini, quindi non si spostano.

codice:

<body>
<div align="center">
<div style="background-color:#FF0000; width:760px; height:100px; border-bottom:1px solid #FFFFFF"></div>
<div style="width:760px; background-color:#FFFFCC; display:block; position:relative; margin:10px 0px">
<div style="background-color:#00FF33; width:600px; height:400px; float:left; border-right:1px solid #FFFFFF">ccc</div>
<div style="background-color:#000000; width:159px; height:400px; float:left">cfvaws</div>
</div>
<div style="background-color:#FF0000; width:760px; height:100px; clear:left; border-top:1px solid #FFFFFF">CIAO</div>
</div>
<br /><div style="z-index:3" class="smallfont" align="center">SEO by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0 RC8</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-55635-2";
urchinTracker();
</script>
<br /><div style="z-index:3" class="smallfont" align="center">SEO by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0 RC8</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-55635-2";
urchinTracker();
</script>
<br /><div style="z-index:3" class="smallfont" align="center">SEO by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0 RC8</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-55635-2";
urchinTracker();
</script>
</body>

L'effetto che volevo ottenere era più o meno questo, come fa explorer

P.S.: come si fa a ridurre l'immagine a icona???

Strumenti della discussione
Visualizza la versione stampabile Invia questa pagina tramite email
Modalità di visualizzazione
Modalità lineare Passa al modo ibrido Passa alla modalità elencata