list-style image not displaying in IE

[Elemental]

Hey Folks, Happy Summer to all.Can someone please explain why the following works in FF but not in IE? Sorry, I don't have an online example yet.HTML

<div id="members-list"><div id="famGrp"><h4>Families and Groups</h4><img class="img-class" src="images/families-groups.jpg" alt="clipart colored outline figures of people" title="families and groups" /><ul><li>The Cohen Family - Stephen, Eva, Abby & Caleb</li></ul><p id="back2top"><a class="back2top" href="#top">top</a></div></div>

CSS

#members-list ul{float:right;width:590px;margin:0;padding:0;list-style-type:none;border: 0px solid #fff;}#members-list ul li{background: url(../images/star.jpg)no-repeat left;padding-left:25px;}

I've looked at the examples on the W3Shools site and tried that too but that didn't work for me either, as I mentioned, FF works fine but IE refuses to display it.Peace,Elemental

[wirehopper]

background: transparent url(../images/star.jpg) no-repeat left;

[Elemental]

background: transparent url(../images/star.jpg) no-repeat left;

wirehopper, Thanks for the post, much appreciated.How would "transparent" work? Please explain cause I don't understand how seeting the tranparency would work; and yes, I did try it, and no, it didn't work.Peace,Elemental

[thescientist]

why not use list-style-image?http://www.w3schools.com/css/css_list.asp

[Elemental]

why not use list-style-image?http://www.w3schools.com/css/css_list.asp

thescientist, Thanks for the comment, much appreciated.I did try that, as I noted in my original post, but that didn't work either; actually that didn't work for either IE or FF but before you go off let me explain why.I did some "testing" on a separate document and I found that neither of them, FF or IE, like the additional values that can be added after the url call when using list-style-image:

#members-list ul li{list-style-image: url(../images/star.jpg)no-repeat left;margin-left:25px;}

This doesn't work, or it didn't work for me, but when I removed the additional values:

#firstList ul li{list-style-image: url(../images/star.jpg);margin-left:25px;}

the image displayed fine on both: Peace,ElementalADDITIONAL NOTES (if anybody cares to read)IE doesn't like the background: url(); property for list elements, at least not in the way I was trying to implement it:

#members-list ul li{background: url(../images/star.jpg)no-repeat left;padding-left:25px;}

Which made no sense since I'm using the same property to call an image, within an LI, for the dropdown menu and it's working fine there, on both: (thank you cssplay)the HTML:

<ul id="topNav"><li class="li-class"><a id="programs" href="#nogo1">Our Programs</a><ul><li><a href="videoandfilm.php">Video and Film Projects</a></li></ul></li></ul>

the CSS:

#topNav li a#programs{background: url(arrow.png) no-repeat right 13px;}#topNav li a:hover#programs{background: url(arrow-hover.png) no-repeat right 13px;}

You'll notice that this example places the image within an <a href=""> element and not the actual LI itself; I'm guessing this may explain why it works within the dropdown menu example and why it didn't work the way I was trying to implement it, but I'll leave that to the pros to answer.Continuing …If I use the background property as follows:

#firstList ul li{background: url(../images/star.jpg);padding-left:25px;}

both IE and FF display the image but they also repeat it as you would expect them to; adding the no-repeat or left values, or any other value, knocks the image out of IE, not FF.FF, well I'm beginning to see the angst (to be nice) behind IE, because it doesn't matter if I use the background or the list-style-image properties, it takes them both; the only exception being you can't use the additional values with the list-style-image property, as noted above.However, after some experimenting, I'm somewhat please to note that I did find a way to use the background:url(); property for LI elements within IE, and it works with FF also; by using the long CSS notation method vs. the shortcut method, so the following worked, go figure:

#secondList ul li{background: url(../images/star.jpg);background-repeat:no-repeat;background-position:left;padding-left:25px;

First of all, as most of you know I'm still a newbie, I hope that what I noted is correct, I know that it worked for me as I've stated it but I could be wrong in my wording or use of the element and or property; this could also be common knowledge to you. If I am in anyway wrong then please let me know I'm sure I'm not the only one that wants to know.If this helps anyone, you're welcome. If anyone has any comments to make on how they made it work for them, hopefully with code examples, please note that as well.I think this is my longest post, ever.