[XHTML - CSS] Compatibilità IE vs FIREFOX

[fabiosh75]

Ciao a tutti,
ho un problema con dei DIV con Firefox, il problema è che il DIV interno esce e si sovrappone al DIV esterno, allegao immagine per chiarire meglio il problema.

il codice HTML è il seguente:

<div id="content_sx">
  <div class="barra"></div>
  <div id="canali">		
  </div> 
</div>

il codice CSS è il seguente:

#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;
}

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

#canali {
       float: left; 
       margin: 5px 0px 5px 0px;
       padding: 5px 0px 5px 0px;
       border: 1px solid;
       border-color: #000;
       background: #F4F4F4;
       color: #000;
       width: 482px;
}

il problema come potete notare dall'immagine allegata non si presenta in IE... dove sbaglio? Nel codice HTML o nel CSS? :master: