[XHTML - CSS] Problema DIV FIREFOXvsIE

[fabiosh75]

Ciao a tutti,
eccomi di nuovo per un problema di IEvsFIREFOX!
Per rendere meglio l'idea date un'occhiata all'immagine allegata è meglio di una descrizione!

Il codice XHTML è il seguente:

	<div id="content_sx">
		<div class="barra"><h3>TITOLO BARRA 1</h3></div>
        
		<div id="canali">		
			<div class="colonna">

[img]images/foto1.jpg[/img]</p>

DESCRIZIONE 1</p></div>
			
			<div class="colonna">

[img]images/foto2.jpg[/img]</p>

DESCRIZIONE 2</p></div>
			
			<div class="colonna">

[img]images/foto3.jpg[/img]</p>

DESCRIZIONE 3</p></div>
			
		</div> 
		
	</div>

Il codice CSS è il seguente:

.barra {
	background-color: #A52A2A;
	width: 100%;
	DISPLAY: BLOCK;
}

#content_sx {
	margin-left: 27px;
	width: 485px; 
	padding-left: 3px;
	padding-right: 3px;
	background: #F8F7EF;
   	border: 1px dashed #B2B2B2;
	border-width: 1px 1px;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#canali {
	margin-top: 5px;
	margin-right: 0px; 
	margin-bottom: 5px !important; /* SOLO PER FIREFOX */
	margin-bottom: 5px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 0px; 
	padding-bottom: 10px !important; /* SOLO PER FIREFOX */
	padding-bottom: 5px;
	padding-left: 0px;  
	border: 1px solid;
	border-color: #000;
	background: #F4F4F4;
	color: #000;
	font: 10px verdana,sans-serif;
	width: 482px;
}

.colonna {
	float: left;
	width: 125px;
	text-align: center;
	padding: 3px 7px 0px 7px;
	margin-left: 6px;
	border: dotted 1px;
}

A cosa può essere dovuto questo effetto "strano" in FIREFOX? Forse è dovuto ad un'interpretazione sbagliata da parte mia di WIDTH? Però se si non mi risulta (forse sbaglio qualcosa nel contare gli elementi...) :master:

[fabiosh75]

Uhmmm ecco l'immagine allegata

[gordian]

Anch'io tempo fa avevo aperto un thread per un problemino analogo con delle immagini
http://forum.html.it/forum/showthrea...hreadid=935007

Ma non sono riuscito a risolvere il problema

[edy72]

l'interpretazione giusta dovrebbe essere quella di Firefox (anche se quella di I.E. è più comoda): gli elementi float non determinano l'altezza del loro contenitore a meno che anche questo non sia float.

Nel tuo caso i vari .colonna sono float e quindi non determinano l'altezza di #canali, che viene determinata solo dai suoi valori di padding top e bottom.

Per ovviare a questa situazione dovresti:
- rendere float anche #canali (ma a questo punto potrebbe ripresentarsi il problema con il suo elemento contenitore cioé #content_sx), oppure;
- assegnare un'altezza prestabilita a #canali se ti è possibile farlo;

in ogni caso, in bocca al lupo!!

[fabiosh75]

Si ho notato che inserendo l'altezza in #canali andava tutto ok, solo che mi rimane scomoda in quanto l'altezza delle immagini non doveva essere bloccata... :master:
si lo so IE interpreta "bene" ma in modo sbagliato...

una domanda: io sto cercando di adattare il layout a IE e FIREFOX (x FIREFOX in particolare sto usando il parametro proprietario !important) per quali altri browser dovrei dare un occhio di riguardo?

Purtroppo mi sto rendendo conto (forse sbaglio io) che non è proprio vero che lo stesso codice è ok per tutti... perchè se davvero si usa codice standard IE scoppia!

grazie per la risposta... forse conviene bloccare le immagini

[COMANDANTE SPACE]

Originariamente inviato da fabiosh75


una domanda: io sto cercando di adattare il layout a IE e FIREFOX (x FIREFOX in particolare sto usando il parametro proprietario !important) per quali altri browser dovrei dare un occhio di riguardo?

Purtroppo mi sto rendendo conto (forse sbaglio io) che non è proprio vero che lo stesso codice è ok per tutti... perchè se davvero si usa codice standard IE scoppia!

!important non è un parametro proprietario, è al contrario una dichiarazione standard ( http://www.w3.org/TR/REC-CSS2/cascad...mportant-rules ).
Internet Explorer6 è programmato male e non la sa interpretare.
Il prossimo Internet Explorer 7 si spera di si.

[Cerebro]

Avevo un problema simile in questi giorni e l'ho risolto aggiungendo come ultimo div, nel tuo caso prima della chiusura dell content_sx, una cosa del genere:

<div style="clear:both;height:0px;font-size:0px"></div>

Serve in presenza di elementi float ad allungare il contenitore fino all'altezza massima dei float stessi precedenti.