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 **
codice:
<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 **
codice:
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!!