Оформление маркера в ul списках

Этот пост являеться некоторым напоминанием для меня на будующее, так как я не всегда вспоминаю про оформления списков в своих проектах, стандартные маркеры у UL списков не всегда вписываются в дизайн сайта и порой на фоне красивого дизайна выглядят пугающе(пример из реальной жизни, вот такие вот косяки есть на моем сайте ):

Я не изменил оформление списка стоящее по умолчанию, и вот что получилось в итоге. Это нужно быстренько исправить, и я покажу вам 2 способа как сделать это.

Оформление списка. Способ первый

CSS без проблем может помочь изменить внешний вид списка, и для этого даже есть специальное свойство под названием list-style-image, в его значении нужно указать ссылку на нужное изображение маркера (примерно так — url(some_image.gif)). CSS для оформления списка:

ul {
margin:0 0 0 30px;
padding:0;
list-style-position: outside; //фикс для IE
}
ul li{
font:normal 11px/14px Verdana, Geneva, sans-serif;
text-transform:uppercase;
list-style-image: url(ul_marker.png); //маркер размером 4x5px
}

HTML код я приводить не буду, так как это просто небольшое дерево из UL LI элементов.

Всё сделано точно в соответствии со спецификацией, но как всегда на деле получилось не то что ожидалось.

Однажды я столкнулся с этой проблемой, и вместо того чтобы искать решение я начал эксперементировать с размерами изображения маркера, отступами, применять хаки для отдельных браузеров. Но есть более простой путь вставки маркера в списки.

Оформление списка. Способ второй

Когда я понял что нужно использовать именно его, я стукнул себя по голове, мол, как я не догадался раньше. А заключается этот способ в использовании CSS свойствbackground и background-position. То есть идея заключается в том, чтобы отображать не маркер в списке, а фоновое изображение у пунктов списка. CSS код:

ul {
margin:0 0 0 30px;
padding:0;
list-style-position: outside;
}
ul li{
padding:0 0 0 10px; // добавляем отступ слева
list-style:none; // отменяем отображение маркера стоящего по умолчанию
background:url(ul_marker.png) no-repeat 0 5px;
// указываем путь и положение фоновой картинки в пункте списка
font:normal 11px/14px Verdana, Geneva, sans-serif;
text-transform:uppercase;
}

Теперь маркер отображается во всех браузерах почти одинаково(как всегда подвёл IE6…), с погрешностью в 1px(наверное стоило сделать маркер размерами 5x5px, а не 4x5px), но по сравнению с предыдущим способом виден значительный прогресс!

Ещё можно повозиться с JavaScript, но это совсем другая история… Удачи вам в оформлении списков!