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

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

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

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

{
    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, но это совсем другая история... Удачи вам в оформлении списков!