[CSS]Dziwnie mi się lista układa Opcje

[AboutMe]

Siemandero,

Weźcie odpalcie w swojej przeglądarce ten kod i powiedzcie czemu ta lista tak dziwnie się układa

[HTML] pobierz, plaintext 
<style type="text/css">
#subcategories {width:590px;}
br.clear {clear: both;line-height: 0;font-size: 0;height: 0}
ul.inline_list { list-style-type: none; margin-top: 10px; }
ul.inline_list li { float: left; text-align: center; margin-bottom: 40px; margin-left: 20px; width:87px; border:1px solid #000000; }
ul.inline_list li img { display: block; padding:2px; border:1px solid #b3b3b3; }
</style>
 
 
<div id="subcategories">
		<ul class="inline_list">
					<li>
				<a href="66-bat-house" title="Bat House">
											<img height="80px" width="80px" src="bat-house.jpg" alt="" />
 
									</a>
				<br />
				<a href="66-bat-house">Bat House</a>
			</li>
					<li>
				<a href="56-canopies" title="Canopies">
											<img height="80px" width="80px" src="canopies.jpg" alt="" />
									</a>
 
				<br />
				<a href="56-canopies">Canopies</a>
			</li>
					<li>
				<a href="68-electric-snow-thrower" title="Electric Snow Thrower">
											<img height="80px" width="80px" src="electric-snow-thrower.jpg" alt="" />
									</a>
				<br />
 
				<a href="68-electric-snow-thrower">Electric Snow Thrower</a>
			</li>
					<li>
				<a href="59-mailboxes" title="Mailboxes">
											<img height="80px" width="80px" src="mailboxes.jpg" alt="" />
									</a>
				<br />
				<a href="59-mailboxes">Mailboxes</a>
 
			</li>
					<li>
				<a href="65-mosquito-control" title="Mosquito Control">
											<img height="80px" width="80px" src="mosquito-control.jpg" alt="" />
									</a>
				<br />
				<a href="65-mosquito-control">Mosquito Control</a>
			</li>
 
					<li>
				<a href="57-samplex-fireplaces" title="samplex Fireplaces">
											<img height="80px" width="80px" src="samplex-fireplaces.jpg" alt="" />
									</a>
				<br />
				<a href="57-samplex-fireplaces">samplex Fireplaces</a>
			</li>
					<li>
 
				<a href="54-samplex-furniture" title="samplex Furniture">
											<img height="80px" width="80px" src="samplex-furniture.jpg" alt="" />
									</a>
				<br />
				<a href="54-samplex-furniture">samplex Furniture</a>
			</li>
					<li>
				<a href="60-samplex-kitchen-grills-barbecues" title="samplex Kitchen, Grills  Barbecues">
 
											<img height="80px" width="80px" src="samplex-kitchen-grills-barbecues.jpg" alt="" />
									</a>
				<br />
				<a href="60-samplex-kitchen-grills-barbecues">samplex Kitchen, Grills Barbecues</a>
			</li>
					<li>
				<a href="58-samplex-pest-control" title="samplex Pest Control">
 
											<img height="80px" width="80px" src="samplex-pest-control.jpg" alt="" />
									</a>
				<br />
				<a href="58-samplex-pest-control">samplex Pest Control</a>
			</li>
					<li>
				<a href="69-samplex-shower" title="samplex Shower">
											<img height="80px" width="80px" src="samplex-shower.jpg" alt="" />
 
									</a>
				<br />
				<a href="69-samplex-shower">samplex Shower</a>
			</li>
					<li>
				<a href="67-samplex-sports" title="samplex Sports">
											<img height="80px" width="80px" src="samplex-sports.jpg" alt="" />
									</a>
 
				<br />
				<a href="67-samplex-sports">samplex Sports</a>
			</li>
					<li>
				<a href="63-picnic" title="Picnic">
											<img height="80px" width="80px" src="picnic.jpg" alt="" />
									</a>
				<br />
 
				<a href="63-picnic">Picnic</a>
			</li>
					<li>
				<a href="55-screenhouses" title="Screenhouses">
											<img height="80px" width="80px" src="screenhouses.jpg" alt="" />
									</a>
				<br />
				<a href="55-screenhouses">Screenhouses</a>
 
			</li>
					<li>
				<a href="61-swimming-pool" title="Swimming Pool">
											<img height="80px" width="80px" src="swimming-pool.jpg" alt="" />
									</a>
				<br />
				<a href="61-swimming-pool">Swimming Pool</a>
			</li>
 
					<li>
				<a href="64-water-guard-doormat" title="Water Guard Doormat">
											<img height="80px" width="80px" src="water-guard-doormat.jpg" alt="" />
									</a>
				<br />
				<a href="64-water-guard-doormat">Water Guard Doormat</a>
			</li>
					<li>
 
				<a href="62-wind-spinners" title="Wind Spinners">
											<img height="80px" width="80px" src="wind-spinners.jpg" alt="" />
									</a>
				<br />
				<a href="62-wind-spinners">Wind Spinners</a>
			</li>
				</ul>
		<br class="clear"/>
 
</div>
[HTML] pobierz, plaintext 

Ten post edytował AboutMe 3.09.2010, 13:50:25

[Damonsson]

Zrobisz mi herbatkę i będziemy kwita

Rozwiązanie numer 1: Skróć nazwy

Rozwiązanie numer 2: Dodawaj do każdego co szóstego <li> "clear: both". By nie robić tego manualnie z pomocą przyjdzie pewnie JS.

Rozwiązanie numer 3: Zmień wysokość każdego <li> na stałą, zaiste ładniej będą wyglądać wszystkie o tej samej wysokości, niż o różnych jak będziesz miał opis 100 znakowy.