Mi az oka hogy egymás tetejére pakolja a képeket?

Egy listát csinálok ami képeket tartalmaz.

<ul id="pg">

<li>

<img src="images/kepek/kep1.jpg" alt="DSC_0660">

<p>DSC_0660</p>

</li>

<li>

<img src="images/kepek/kep2.jpg" alt="DSC_0661">

<p>DSC_0661</p>

</li>

<li>

<img src="images/kepek/kep3.jpg" alt="DSC_0662">

<p>DSC_0662</p>

</li>

<li>

<img src="images/kepek/kep4" alt="DSC_0663">

<p>DSC_0663</p>

</li>

<li>

<img src="images/kepek/kep5.jpg" alt="DSC_0664">

<p>DSC_0664</p>

</li>

</ul>

és ezeket a képeket hogy ne egymás alá dobálja CSS-el formázom.

#pg { position: relative; height: 300px;}

#pg li { position: relative; list-style: none; width: 100px; height: 100px; overflow: hidden; float: left; z-index: 9; opacity: 0.3; }

#pg li.active { opacity: 1; }

#pg li.selected { opacity: 1; z-index: 99; -moz-box-shadow: 0px 0px 10px #fff; -webkit-box-shadow: 0px 0px 10px #fff; }

#pg li img { display: block; width: 100%; }

#pg li p { color: white; margin: 10px 0; font-size: 12px; }

Egy javascript pedig lightboxot csinál a képből amire rákattintok. Ez jó lenne meg minden de a képeket egymás tetjére dobálja, így használhatatlan.

Bármit változtatok rajta az nem mutat eredményt vagy csak simán egymás alá szórja a képeket.

3 napja éjjel nappal ezzel szpok és most már kezd elszállni tőle az agyam :) Ha valaki kisegítenen nagyon megköszönném.

Igazából bármilyen tippet szívesen látok már ami segít a képeket normálisan elrendezni az oldalon (vagyis egymás után rakni) és mivel rengeteg képet kell így elhelyeznem szeretném ha ez nem járna minden kép külön CSS megcímzésével és formázgatásával/pozícionálgatásával (van egy ilyen megoldásom már de ez már a 20. kép után maga volt a rémálom. Hát még ha azt veszem hogy egy képet kicserélnék vagy bővítenék egy listát.

Tudom PHP meg minden, de ahhoz semmit nem értek.)