Visualizzazione sballata in Firefox

[Lava]

Scusate il titolo un po' vago, ma non saprei come spiegare altrimenti.

Ho un layout a 2 colonne con header e footer; la colonna di navigazione <div id="navBar"> sulla sinistra non si estende fino in fondo alla pagina ma è di altezza prefissata, mentre il contenuto <div id="content"> ha un margine sinistro che permette di lasciare spazio alla colonna di navigazione, e si estende fluidamente per tutta la larghezza del browser.

Ora, dentro al div content, necessito visualizzare una lista di rettangoli nei quali vi è del testo ed una piccola immagine flottante sulla sinistra.
Ho poi aggiunto all'interno di ogni elemento di questa lista un div clearer vuoto avente proprietà clear:both che evita l'accavallarsi degli elementi uno sopra l'altro (bug di internet explorer).

Ora, meraviglia delle meraviglie, in IE si vede tutto alla perfezione, mentre in Firefox il primo elemento della lista "eredita" (non si sa perchè) l'altezza della barra di navigazione (navBar) ovvero di un div che sta completamente al di fuori e non dovrebbe centrare un cavolo.

Posto uno screenshot descrittivo x farvi vedere che il secondo elemento della lista (e via via tutti gli altri) si vedono bene, cioè hanno un'altezza determinata unicamente dall'immagine, o eventualmente dal testo di fianco, se è + lungo.

Qui c'è la parte di codice HTML che interessa e relativo CSS usato:

<div id="navBar">
...qua dentro ci sono i vari links che non interessano
</div>


<div id="content"> 
<ul class="example">
  [*]
  [img]imgURL[/img]
  

Testo testo testo testo.....</p>
  <div class="clear"></div>
  
  [*]
  [img]imgURL[/img]
  

Testo testo testo testo.....</p>
  <div class="clear"></div>
  
  [*]
  [img]imgURL[/img]
  

Testo testo testo testo.....</p>
  <div class="clear"></div>
  
  		[/list]
</div>

#content{
	padding: 10px 10px 20px 10px;
	text-align: justify;
	margin-left: 245px;
}

ul.img{
	float:left;
	padding: 10px 10px 0px 0px;
	width: 90px;
	height: 68px;
}

ul.example {
	list-style-type:none;
	margin:10px;
	padding:0px;
}

ul.example li {
    border:1px solid #8181A5;
    padding:5px 5px 4px 5px;
    margin-bottom:10px;
    height:1%; /* Fix for MSIE peekaboo bug */
}

.clear {
    clear:both;
    height:1px;
    overflow:hidden;
}

Qualcuno dei guru mi può illuminare? Grazie in anticipo a tutti quelli che proveranno a darmi un indizio...

[Lava]

Nessuno che ne abbbia una mezza idea?

UP!!!

[bagu]

dai float left anche al contenitore dove sta il box che prende la misura della barra di navigazione, dovrebbe andare.
(la prrossima volta metti la pagina online che è più facile trovare la soluzione)

paolo