CSS Help: floating an image inside a list item hides icon

I have an image in a list item I need floated. Everything looks fin开发者_StackOverflowe in FF/6+. Webkit and IE, however, show the list icon on top of the image. When I try floating the list item itself, the icon simply vanishes. Is there a CSS way around this issue? I tried wrapping the content in a span, and still no solution. I've removed some of the text in order to lighten the code here.

<ul class="leftList">
<ul>
    <li>Pillow menu to customize your night's sleep</li>
    <li>Complimentary bathroom amenities</li>
    <li><span class="special_needs_list_item"><a rel="tooltip nofollow" title="Tooltip - Lorem ipsum"><img src="http://teamsite-prod.rccl.com:8030/DOT/img/global/special_needs.png" alt=""></a> Some srooms in this category are wheelchair-accessible.</span></li>
</ul>
</ul>


#ccStateroomFeatures ul {
    float: left;
    width: 320px;
    margin-left: 15px;
    font-size: 12px;
}
#ccStateroomFeatures ul li {
    margin-bottom: 5px;
}
#ccStateroomFeatures .leftList {
    width: 490px;
    float: left;
}

#ccStateroomFeatures .leftList ul,
#ccStateroomFeatures .rightList ul {
    float: none;
    margin-left: 15px;
    width: auto;
}
#ccStateroomFeatures .leftList ul .special_needs_list_item {
    margin:0 0 20px -15px;
    padding-left:15px;

}
#ccStateroomFeatures .leftList ul .special_needs_list_item img {
    float:left;
    margin:3px 5px 0 15px;
    overflow:hidden;
    width:13px;
}

I'm not sure I understand what you're trying to do. Are you trying to have the image supplied be used instead of the list icon?

If so, you'll want to use list-style-type:none to deal with that. Then play around with the margins to get it to line up like you want.