Float image juste dans li de l'ol, texte à gauche, fonctionne dans Chrome, pas IE/FF

Question

Je voudrais avoir une liste ordonnée qui a le texte sur la gauche et une image pour chaque li à l'intérieur sur la droite de la li. J'ai donc fait flotter l'image vers la droite et elle met l'image correctement sur la droite et le texte sur la gauche, mais l'image est 14 pixels trop bas dans IE et FF. Chrome le fait bien. Cela me semble être IE et FF mettant le flotteur à l'extérieur ou en dessous de chaque LI au lieu de l'intérieur où il devrait être (comme Chrome). Si j'ajuste la position -14px (haut) pour IE et FF, ça marche bien pour eux, mais alors Chrome est foiré. 14px est la hauteur de chaque LI, c'est pourquoi cette astuce fonctionne.

Je ne veux pas un piratage de navigateur à moins que ce ne soit absolument nécessaire (par exemple, faire le décalage de -14px pour IE/FF et dire à Chrome de l'ignorer).

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

Rien de spécial les années li:

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

Voir la première LI n'a pas l'image pour FF/IE parce qu'il est ci-dessous (où il semble que ce soit pour # 2) et le # L'image est au bas de la liste.

Je veux que les 3 ressemblent au Chrome. Il y a du JavaScript qui produit les OL/LI, et le class=removeTeam est juste pour les actions jQuery. Cette liste est dans un jQuery triable et j'ai la sélection de liste désactivée avec jQuery (.disableSelection();). Je ne pense pas que cela a quelque chose à voir avec jQuery ou JavaScript, juste CSS simple.

Answer 1

C'est un bug que partagent IE et Firefox. Pour contourner ce problème, vous devez déplacer l'image avant tout texte non flottant dans sa ligne.

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

    Name 
</li> 

Answer 2

Si vous ne pouvez pas modifier le code HTML, vous pouvez essayer de le positionner à la place des éléments flottants.

 

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

Je n'ai pas testé cela, laissez-moi savoir si je me trompe.

Answer 3

Le style de liste: inside est en train de tout gâcher.

Voici le code qui fonctionne. J'ai déplacé le flotteur vers le # top25list un et déplacé le à avant le nom.

#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>