Different list style image for each li

Question

I've got a problem with some ul and li...
I'd like to create an unordered list with 3 li and each li has got a different list-style-image...
I wrote this code but the image don't appear...

Can you help me? Thanks!

EDIT: Post updated with HTML code ;)

<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;
}

Selfassured

Please post your HTML code as well. – Altruist

I tried to post it but it doesn't show properly... How can I post html code? – Selfassured

Answer 1

Most likely, your images were cut off by overflow: hidden. I've removed that and it works now: http://jsfiddle.net/ahwhj/

Inglis

Just remember too that in CSS, ID's are unique - use Classes instead of ID's, that way you can re-use the same style without breaking the rules. Read css-tricks.com/the-difference-between-id-and-class for more information – Selfforgetful

Answer 2

Use as background can be done too. Example http://jsfiddle.net/huhu/r7kSf/

Dillman

Answer 3

If your html doesn't show properly in stackoverflow, it may contain errors. Try posting without the code format.

Fullblooded

Answer 4

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

Bercy

Please add more comments about the solution you are suggesting. – Neoma