Ciao a tutti, sto cercando di realizzare una gallery di foto che presenti le miniature "intabellate" nella pagina.

Nel codice html della pagina, le foto sono semplicemente inserite all'interno in una lista non ordinata in questo modo:

codice:
<div id="imPage">
 <div id="imContent">
  <ul id="pg">[*]
    [img]photos/gallery1/IMG_2163.jpg[/img]
    <span>didascalia foto IMG_2163</span>
   [*]
    [img]photos/gallery1/IMG_2164.jpg[/img]
    <span>didascalia foto IMG_2164</span>
   
   ...[/list]
 </div>
</div>
e il css relativo invece è il seguente:
codice:
#imContent {
	width: 770px;
	}

#pg {
	width: 770px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none; 
}

#pg li {
	position: relative; 
	float: left; 
	width: 144px; 
	margin:0 0 10px 10px;
	padding: 0;
	z-index: 1; 
	opacity: .5; 
}

#pg li img { 
	width: 100%;
	margin: 0;
	padding: 0;
}

#pg li span { 
	width: 100%;
	margin: 0;
	padding: 0;
	color: #000; 
	font-size: 12px;
}
Detto questo, il problema è che non riesco a capire come mai il risultato sia simile a quello mostrato nella seguente immagine:

http://yfrog.com/0iimmagine1bpj

con le immagini che "non vanno a capo" dove dovrebbero.

La cosa ancora più strana è che tale risultato cambia a seconda dell'ordine in cui inserisco le immagini nella lista html.

Sapete spiegarmene ill motivo e darmi una soluzione per risolvere?

Grazie in anticipo,
Otrebor