Flotteurs apparaissent sur une nouvelle ligne dans IE7

Question

J'ai besoin d'aide en essayant d'obtenir des flotteurs pour afficher correctement dans IE. IE veut ajouter une nouvelle ligne après que j'essaie de le faire flotter [la flèche] vers la droite ...

Je voudrais qu'il affiche comme Firefox (à droite), où tout tient dans une ligne, mais je peux ' t semblent comprendre comment ...

Cheers.

background-image: url('/img/arrow_down.gif'); 
background-repeat: no-repeat; 
height: 8px; 
width: 15px; 
display: inline; 
float: right; 

Answer 1

L'affichage de votre balisage vous aiderait. Une cause commune de ceci est la flèche apparaissant après le texte dans le balisage. Si vous déplacez la flèche avant le texte, elle devrait apparaître dans les deux. Comme:

<span class="arrow-image"></span>This is the the text. 

Quand j'ai commencé avec la mise en page web, cela semblait vraiment bizarre pour moi, mais je fus surpris de trouver travaillé (et maintenant que je comprends float un peu mieux, il fait de moi un peu de sens).

Vous pourriez être en mesure de sortir avec ce beaucoup plus simple balisage au lieu, si:

<ul id="menu"> 
    <li>Some text</li> 
    <li>Some text</li> 
    <li>Some text</li> 
</ul> 

et CSS:

#menu > li 
{ 
    background-image: url('/img/arrow_down.gif'); 
    background-repeat: no-repeat; 
    background-position: right center; 
    padding-right:16px; /* Width of the image */ 

    /* ... */ 
} 

Answer 2

Vérifiez vos largeurs, IE ajoutera de la largeur aux divs. Supprimer la marge et le remplissage serait une bonne idée.