Float image right within li of ol, text left, works in Chrome, not IE/FF

Question

I would like to have an ordered list that has the text on the left and an image for each li within it on the right of the li. So I floated the image to the right and it puts the image correctly on the right and text on the left, but the image is 14 pixels too low in IE and FF. Chrome does it right. This appears to me to be IE and FF putting the float outside or underneath each LI instead of inside where it should be (like Chrome). If I adjust the position -14px (up) for IE and FF, it works fine for them, but then Chrome is messed up. 14px is the height of each LI which is why that trick works.

I don't want a single browser hack unless absolutely needed (ie, do the -14px offset for IE/FF and tell Chrome to ignore it).

#top25list{
       width:185px;
       cursor:n-resize;
       list-style:
       decimal inside;
       padding:0;
       margin:0
}
#top25list li{
       margin:0;
       padding:0 3px;
       background-color:#FFF;
       border-top:1px solid #990100;
       border-bottom:1px solid #990100
}
#top25list img{
       border:none;
       height:13px;
       width:13px;
       float:right
}
#top25list li:hover{
       background-color:#990100;
       color:#FFF
}

Nothing special about the li's:

<li id=##>Name <a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a></li>

See the first LI doesn't have the image for FF/IE because it's below (where it looks like it's for #2) and the #25 image is off the bottom of the list.

I want all 3 to look like the Chrome. There is some JavaScript producing the OL/LIs, and the class=removeTeam is just for jQuery actions. This list is within a jQuery sortable and I do have the list selection disabled with jQuery (.disableSelection();). I don't think this has anything to do with jQuery or JavaScript, just simple CSS.

Answer 1

It's a bug that IE and Firefox share. To work around it you must move image to be before any non-floated text in its line.

<li id=##>
   <a href="#" rel="##" class="removeTeam">
      <img src="/images/button-x.png" alt="Remove Name">
   </a> 

   Name
</li>

Answer 2

If you can't change the HTML you could try positioning instead of floats.

#top25list li{
  margin:0;
  padding:0 3px 10px 3px; /* add padding-right to make room for the image */
  background-color:#FFF;
  border-top:1px solid #990100;
  border-bottom:1px solid #990100;
  position: relative; /* for img to have position  */
}

#top25list img{
  border:none;
  height:13px;
  width:13px;
  position: absolute;
  top: 0;  
  right: 0; 
}

I haven't tested this, let me know if I'm wrong.

Answer 3

The list-style: inside is messing it up.

Below is the code that works. I moved the float to the #top25list a and moved the to before the name.

#top25list{
       width:185px;
       cursor:n-resize;
       padding:0;
       margin:0
}
#top25list li{
       margin:0;
       padding:0 3px;
       background-color:#FFF;
       border-top:1px solid #990100;
       border-bottom:1px solid #990100
}
#top25list a{float:right;}
#top25list img{
       border:none;
       height:13px;
       width:13px;
}
#top25list li:hover{
       background-color:#990100;
       color:#FFF
}

<ul id="top25list">
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
</ul>