Stylování seznamů

V tomto příkladu testuji pouze CSS vlastnosti, které se k seznamům přímo nevztahují. Text neprošel finální korekturou.

Chování seznamů v IE 5

Odsazení puntíku od levého okraje je součtem margin-left u ul a li. Li má margin-left normálně nula, ul má o něco víc.

Nastavením "ul {margin-left: 0px}" se naprosto skryjí puntíky.

objeví se při "ul {margin-left: 6px}", což ale platí asi jenom pro IE5. Samozřejmě se jedná o součet u ul a li. Takže 6px je takovou magickou hranicí.

Pokud se do toho součtu zahrne i margin-left u body, je magickou hranicí 16px.

Vzdálenost puntíku od textu lze ovlivnit pomocí vlastnosti padding-left u li (nikoliv u ul)

Pak ovšem nesmí být nastaveno ul {list-style-position: inside}

Pokud se použije rámování u li, orámuje se korektně, přičemž do sebe zahrne i padding. Vyplývá z toho, že puntík se umísťuje do marginu elementu.

Zajímavé je použití odsazení prvního řádku: při použití "li {text-indent: 100px}" se správně odsadil první řádek, ale vzal puntík s sebou.

Při zapnutí rámečku kolem li se nyní puntík zobrazuje uvnitř boxu! Je to podobné jako při "list-style-position: inside", rozdíl je pouze v dalších řádcích položky. Padding se přitom chová stejně jako margin: dělá okraj vnější.

Text-indent u ul se projeví stejně jako u li.

Margin-top a margin-bottom u li (stejně tak padding-*) zobrazuje korektně

A teď něco o Netscape 4

Margin u ul zobrazuje korektně

Vcelku nejzáhadnější je rámování elementu li: Namísto zarámování obsahu položky si vytvoří nad textem obdélníček prázdna, kolem kterého vykreslí rámeček. Zajímavé je, že tento rámeček reaguje na některé věci, které obsah elementu ignoruje (například margin-left).

Při pokusu aplikovat jakékoliv margin-left na li se margin neprojevil, ale puntík zmizel. (Ten divný rámeček, jak už zmíněno, margin vzal.)

Padding-left jakékoliv hodnoty se projeví pouze nezobrazením puntíků.

Jakmile se ale nechá zobrazit ten divný rámeček, padding nezobrazení puntíků nezpůsobí.

Li {text-indent: 100px} způsobí to samé, co ul {text-indent: 100px}, totiž odsune pouze první řádek celého seznamu, místo aby šoupal s každou položkou. (Zapnutí divnorámečků tento efekt zlikviduje.)

Margin-top a margin-bottom u li ignoruje, padding-* se projeví opět pouze na tom divném jakorámečku.