Room 303

List ciąg dalszy.

Niesortowana lista jest najlogiczniejszą metodą na strukturalne przedstawienie menu serwisu, stąd często do kontrukcji nawigacji używa się właśnie odpowiednio ostylowanych <ul/>. Na przykład:

<ul>
	<li><a href="lorem">Lorem</a></li>
	<li><a href="ipsum">Ipsum</a></li>
	<li><a href="dolor">Dolor</a></li>
	<li><a href="sit/amet">Sit amet</a></li>
</ul>

ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul li
{
	display: block
	margin: 0;
	padding: 0;
}
ul li a
{
	background: #eee;
	color: #000;
	display: block;
	padding: 3px;
}
ul li a:hover
{
	background: #fff;
}

Tu pojawia się problem. Firefox (oraz inne pochodne silnika Gecko), Konqueror (i oparte na KHTML) i Opera wyświetlają wszystko prawidłowo. W IE za to każda pozycja menu ma dodatkowy zapas przestrzeni na dole. Wygląda to tak, jakby na końcu każdego odnośnika wymusić złamanie wiersza. Problem leży w tym, że IE nieprawidłowo interpretuje białe znaki pomiędzy elementami listy. Problem znika (choć kod staje się nieczytelny) po całkowitym usunięciu odstępów pomiędzy elementami <li/>:

<li>...</li><li>...</li><li>...</li>

Inne zastosowanie niesortowanych list to tak zwane okruszki (ang. breadcrumbs), czyli element nawigacji pokazujący bieżącą pozycję w serwisie (choć oryginalnie okruszki służyły pokazaniu historii oglądanych stron serwisu):

<p>Jesteś tutaj:</p>

<ul>
	<li><a href="/">Lorem</a></li>
	<li><a href="/oferta/">Oferta</a></li>
	<li><a href="/oferta/czapki/">Czapki</a></li>
	<li>Kapelusz słomiany ZX64</li>
</ul>

ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul li
{
	display: inline;
	padding: 0 15px 0 0;
}
ul li a
{
	background: url('bullet.png') no-repeat 100% 50%;
}

Tutaj objawia się problem IE w wersji 5.0 (poprawiono go w wersji 5.5, ale spora część użytkowników Windows 98 do dziś posiada wersję 5.0) - przeglądarka nie radzi sobie z paddingiem dla elementów wyświetlanych inline. Nie ma na to specjalnie rady, na szczęście przeglądarki te są na tyle marginalne, że na ogół można je pominąć. Jednym z działających obejść tego problemu jest nadanie elementom listy wyświetlania block, a następnie floatowanie ich do lewej strony, posiłkując się marginesami dla uzyskania odstępu.