Различное изображение стиля списка для каждого li

Question

У меня проблема с некоторыми ul и li ...
Я хотел бы создать неупорядоченный список с 3 li, и у каждого li есть свое изображение в стиле списка ...
Я написал этот код, но изображение не появляется ...

Вы можете мне помочь?Спасибо!

РЕДАКТИРОВАТЬ: сообщение обновляется с HTML-кодом;)

<div id="right_main">
<ul id="mainFeatures">
<li id="wishlist">Some text here...</li>
<li id="sharing">Some text here...</li>
<li id="linking">Some text here...</li>
</ul>
</div>

#right_main ul#mainFeatures {
    height:250px;
    width:350px;
    overflow:hidden;
    margin-left:25px;
}
#mainFeatures li {
    font-weight:bold;
    font-size:22px;
    font-family:"Myriad Pro", sans-serif;
    padding:5px;
}
#mainFeatures li#wishlist {
    list-style-image:url(images/wishListImage.png);
    list-style-position:outside;
}
#mainFeatures li#sharing {
    list-style-image:url(images/sharingListImage.png);
    list-style-position:outside;
}
#mainFeatures li#linking {
    list-style-image:url(images/linkingListImage.png);
    list-style-position:outside;
}

Answer 1

Скорее всего, ваши изображения были обрезаны на overflow: hidden. Я удалил это, и теперь оно работает: http://jsfiddle.net/ahwhj/

Answer 2

Использовать в качестве фона тоже можно. Пример http://jsfiddle.net/huhu/r7kSf/

Answer 3

#check li {
    background: url(message.png) no-repeat -34px 7%;
    background-origin: content-box;
    background-size: 32px;
    float: left;
}

Answer 4

Если ваш html не отображается должным образом в stackoverflow, он может содержать ошибки.Попробуйте опубликовать без формата кода.