Как в горизонтальном меню вместо маркеров списка вставить изображение?

#меню #html

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

Код страницы:



.menu{
    background-image: url(images/fon_menu.jpg);
    height: 50px;
}

li {
    float: left;
    list-style-image: url(images/kn_cl.png);
    font-family: sans-serif;
    font-size: 20px;
    margin: 10px 40px;
}

    

        
Главная
        
Сотрудники
        
Документы
        
Новости
        
Фотоальбом
    





Если в li пишу display: inline или inline-block, то маркеры и изображения вообще
не отображаются, исчезают.

С тем кодом, который есть сейчас, всё работает, но изображение смещает текст ссылки.
Таким образом вместо маркера получается поставить только изображение такой высоты,
какую высоту имеет текст ссылки (20 px). Если высота больше, сдвигается текст.
    

Ответы

Ответ 1

Вместо list-style-image лучше используйте обычный background. С его помощью можно
гибко настроить позицию изображения, чего не получится в случае с list-style-image
http://jsfiddle.net/8fV3X/