li tag image customization

I have an unordered list whose list items are going to be populated by a data list, which is bound to a list of alerts that have different priorities.

Markup:

 <ul>
   <asp:DataList ID="Alerts" runat="server">
     <ItemTemplate>
       <li class="al开发者_StackOverflow中文版ert<%# Eval("Priority") %>"><%# Eval("Message")%></li>
     </ItemTemplate>
   </asp:DataList>
 </ul>

CSS:

.alert1, .alert2
{
  list-style-image: url(/Content/Image/alert1.png)
}
.alert3
{
  list-style-image: url(/Content/Image/alert3.png)
}
.alert4
{
  list-style-image: url(/Content/Image/alert4.png)
}

What I want is to specify want .png is to be used for the bullet of each item in the list, depending on the priority of the alert. It really seems like there should be a way to do this, but it's just not working for me.

Thoughts?

im surprised this works:

 <li class="alert<%# Eval("Priority") %>"><%# Eval("Message")%></li>

it should be:

 <li class='alert<%# Eval("Priority") %>'><%# Eval("Message")%></li>

Otherwise it looks ok.

try to close the quote for the class attribute of ul

Without quote: http://jsbin.com/uwixu3

With quote: http://jsbin.com/uwixu3/2

I figured it out! The path to the image was incorrect... Doh! Thanks for all your input! :D Apparently, if this is the case, then the list defaults to bullets.