Dziś o listach. Listy niesortowane (<ul/>) są najczęściej wykorzystywanym typem wyliczeń w sieci, jeśli nie liczyć bulletów wstawianych jako <img/> na początku każdego akapitu (co jest naturalnie bez sensu).
Pierwszy kłopot z listami polega na tym, że każda przeglądarka w inny sposób implementuje wcięcia. Jedne robią to za pomocą atrybutu padding, inne za pomocą margin. Jedyna uniwersalna metoda, to wyzerować jeden, a określić drugi parametr:
ul.naszaLista li
{
margin: 0;
padding: 2px 2px 2px 20px;
}Druga sprawa to odległość pomiędzy bulletem, a tekstem. Teoretycznie istnieje w CSS atrybut marker-offset, ale w praktyce nie istnieje dla niego wsparcie. W związku z tym, najlepszym wyjściem jest stworzyć własny obrazek dla bulleta i zadeklarować go jako background dla elementu listy:
ul.naszaLista li
{
background: url('img/bullet.png') no-repeat 0% 50%;
margin: 0;
padding: 2px 2px 2px 20px;
}W tym wypadku lewy padding (kolejność podawania parametrów jest zdefiniowana według kierunku ruchu wskazówek zegarka - góra, prawo, dół, lewo) ustawiamy w tym przypadku na szerokość obrazka + wymaganą odległość pomiędzy obrazkiem a tekstem.
Na koniec wspomnę jeszcze, że IE ma problem z połączeniem letter-spacing i line-height. W przypadku, kiedy zostaną zadeklarowane oba, IE przestanie pokazywać co drugi znak łamania wiersza (<br/>). Wspominałem o tym w lutym, kiedy błąd został przypadkowo odkryty przez naszego klienta, który nadużywał znaczników <br/> do formatowania tekstu na stronie. Do dziś nie znaleźliśmy obejścia tego problemu, na szczęście letter-spacing jest relatywnie rzadko używany.