La puce d'un LI disparaït quand il contient une image en float:left;

Bonsoir !

Je rencontre un problème avec IE7, où la puce d'un LI (élément de liste) disparait quand il contient une image en float:left;

Voici une page que j'ai faite afin de vous illustrer le problème :
http://www.capharnaum.be/css/elements-float-dans-conteneur-li/

Dans cette liste UL, certains éléments LI contiennent une image. Dans ce cas, le texte doit commencer à droite au dessus de l'image. D'autres éléments LI ne contiennent qu'un texte sans image.

Que puis-je faire pour résoudre ce problème ?

D'avance un tout grand merci !

Pour que la puce reste visible, il faut doter l'élément li du layout (si tu connais pas le concept de haslayout sous IE, je te recommande la lecture de cette traduction par Laurent Denis), par exemple en appliquant un display: inline-block. Mais, un élément li doté de layout aura sa puce aligné en bas (comme le montre ce test réalisé par Laurent Denis). Pour y remédier, la propriété vertical-align sera du plus bel effet. À noter que le bug que tu signales s'applique aussi à IE 6.

Récapitulatif du correctif à apporter :

<!--[if lte IE 7]>
<style type="text/css">
li {
  display: inline-block;
  vertical-align: text-top;
}
</style>
<![endif]-->

Un tout tout grand merci ! Vous m'avez sorti d'un sacré arrachage de cheveux !

J'ai parlé (un peu) trop vite.

Cela règle effectivement le problème pour IE7, mais j'ai constaté que le problème se posait également pour IE8.

Si je modifie le commentaire conditionnel pour couvrir IE8 également, c'est toujours OK sous IE7, mais toutes les puces disparaissent sous IE8 !

Voici la page modifiée : http://www.capharnaum.be/css/elements-float-dans-conteneur-li/index_ie8.php

Aurais-je mal compris le principe ?