Problema di compatibilità con Mozilla Firefox

[cleverboy]

Salve a tutti.
Dopo il restyling del sito mi sono appassionato alla tecnica dei CSS, che già conoscevo, ma che ho deciso di approfondire.

Ho un problema! Ho creato una pagina con dei falsi tab, che fanno da titolo alle varie sezioni, ma ha dei problemi a girare sotto Mozilla Firefox, mentre su IExplorer va benissimo.
Vi scrivo le parti del codice responsabili del fattaccio:

** HTML **

<div id="container">
	<div id="menu">Photogallery</div>
	<div id="foto">
		<dl>
			<dt>[img]image1.jpg[/img]</dt>
			<dd>Pic 1</dd>
		</dl>
		<dl>
			<dt>[img]image2.jpg[/img]</dt>
			<dd>Pic 2</dd>
		</dl>
		<dl>
			<dt>[img]image3.jpg[/img]</dt>
			<dd>Pic 3</dd>
		</dl>
		<dl>
			<dt>[img]image4.jpg[/img]</dt>
			<dd>Pic 4</dd>
		</dl>
	</div>
</div>

** CSS **

div#container{
	width:760px;
	margin:25px auto;
	
}

div#menu{
	background:#3399CC;
	color:#fff;
	float:left;
	width:160px;
	position:relative;
	top:+1;
	left:+1;
	border-top:1px solid #06c;
	border-left:1px solid #06c;
	border-right:1px solid #06c;
	margin:0px;
}

div#foto{
	background:#FFF;
	width:100%;
	margin:0px 1px 2px 1px;
	border:1px solid #06c;
	text-align:left;
	padding:10px 50px;
	clear:both;
}

div#foto dl{
		float:left;
		width: 150px;
		height: 160px; 
		margin:5px 5px;
		background:url(clicca.gif) no-repeat;
		background-position:bottom;
		text-align:center;
		color: #000;
		border:1px solid #06c;
}

div#foto dt{ 
	padding: 10px 0;
}

div#foto dd{
	margin: 10px 5px 5px 5px;
	padding: 0 5px 0 5px;
}

div#foto dt img{
	margin:auto;
	border:2px dotted #c0c0c0;
}

e il risultato è tristemente questo:



Vi sono grato della collaborazione. Se non mi fossi spiegato, chiedete pure!!

[cleverboy]

Dimenticavo una cosa importante.
Nella pagina compaiono altre sezioni simili ma con solo testo all'interno. Quelle funzionano!

Per completezza vi metto anche il codice delle sezioni di testo:

** HTML **

<div id="container">
	<div id="menu">Descrizione</div>
	<div id="contenuto">Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
		<center>[img]../../Desktop/100_0101/bronzo/bronzo1.jpg[/img]</center>
	</div>
</div>

** CSS **

div#contenuto{
	clear:both;
	background:#FFF;
	width:760px;
	margin:0px 1px 2px 1px;
	border:1px solid #06c;
	text-align:left;
	padding:7px 10px;
}

div#contenuto img{
	display:block;
	margin:10px;
	border:none;

}

Spero che da questo capiate dove sta l'arcano!!

[cleverboy]

Cercando e ricercando ho trovato una mezza soluzione.
Se imposto un'altezza fissa al DIV che contiene le foto l'effetto è migliore, ma rimane il fatto che la larghezza non me la considera!! o meglio...

div#foto{
   background:#FFF;

   width:760px;
   height:180px;

   margin:0px 1px 2px 1px;
   border:1px solid #06c;
   text-align:left;
   clear:both;
}

Se il codice CSS è quello riportato sopra, le immagini rientrano graficamente nel DIV, ma in Mozilla Firefox la larghezza del contenitore della galleria (foto, appunto) risulta inferiore agli altri.
Impossibile adattarla manualmente, perché altrimenti si allarga troppo in Internet Explorer...

[seed_squall_it]

Ci sono molti errori nel CSS...le proprietà top e left accettano un offset (scostamento) che deve essere impostato con un'unità di misura (di solito si usano i pixel). Scrivere top: +1; left: +1 non ha nessun senso. Se imposti le immagini (img) come elementi block-level con display: block, prova anche ad azzerarne i padding e i margin (non dovrebbero averne, ma con IE non si sa mai...). Poi hai usato position: relative sul box #menu e hai specificato anche un offset, quindi ricordati che questo box viene estratto dal flusso del documento. La sua presenza non influenza più la disposizione degli altri box che contiene. E' Firefox che interpreta la pagina nel modo corretto, non IE!

[The knight]

Prova ad impostare "foto" con float