Testování podpory vlastností display: list-item a list-style-type: decimal
(zaměřeno na podporu v IE6, IE7, IE8, Firefox 3, Opera 9 a Safari 3)
Klasifikační vlastnost display nastavuje či předefinovává druh elementu a způsob jeho zobrazení.
Tato vlastnost přistupuje k tvorbě CSS stylů trochu odlišným způsobem,
místo přiřazení konkrétní vlastnosti totiž třídí elementy do předem specifikovaných kategorií,
hlavní využití se nabízí především při tvorbě vlastních elementů např. v jazyce XML.
Hodnota block vloží za prvek odřádkování, hodnota inline odřádkování zruší, hodnota none
prvek dokonce vůbec nezobrazí a hodnota
list-item by měla přidat na začátek prvku symbol odrážky (podobně jako HTML element <ul>). Toto funguje
ve všech testovaných prohlížečích celkem dobře, pouze v Internet Exploreru a Safari je symbol odrážky úplně
(v ostatních prohlížečích částečně) schován za levým okrajem
stránky, zobrazí se až tehdy, když nastavíme u prvku s odrážkou levý okraj na minimálně 20px.
<span style="display: list-item">Nápis s odrážkou bez levého okraje</span>
Nápis s odrážkou bez levého okraje (odrážka není v Exploreru a Safari vidět vůbec, v ostatních prohlížečích částečně)
<span style="display: list-item; margin-left:20px">Nápis s odrážkou s nastaveným levým okrajem</span>
Nápis s odrážkou s nastaveným levým okrajem
Pokud ale k předchozí deklaraci přidáme vlastnost list-style-type: decimal, aby se zobrazil seznam číslovaný,
je v každém prohlížeči zobrazení odlišné - správné je v Opeře, Safari a Exploreru 8 (počítají se již předchozí dvě položky, takže se zobrazí
číslo 3), ve Firefoxu je nelogicky zobrazena 0 a v Exploreru 7 dokonce číslo 33 (počítá se nesmyslně každý řádek předchozího textu)!
<span style="display: list-item; margin-left:30px; list-style-type: decimal">Nápis s číslem</span>
Nápis s číslem
Podobně to je i např. s hodnotou lower-alpha (měla by zobrazit číslování a, b, c, atd.),
v Opeře, Safari a Exploreru 8 je správně d, ve Firefoxu opět 0 a v Exploreru 7 už dokonce nestačila abeceda, 43. řádek se zobrazil jako ar.
<span style="display: list-item; margin-left:30px; list-style-type: lower-alpha">Nápis s písmenem</span>
Nápis s písmenem
pepe © 2007