IE Disparition Bullet Bug dans DIV flottant

Question

Il ya un monde de suggestions sur les forums à ce sujet, mais aucun n'a montré aucun signe de succès pour moi pour le moment.

J'ai un div flottant qui contient des ULs conçus pour utiliser une image de balle. Tous les navigateurs compatibles affichent l'image correctement. Lorsque j'actualise la page dans IE 6, les puces apparaissent souvent mais disparaissent à nouveau lorsque la page défile. Dans IE 7, ils ne parviennent tout simplement pas à apparaître.

page est ici:

http://hiv411.org/page.php?pID=13&n=Other_STDs

CSS pertinente:

#hiv101STDSidebar UL { 
width:215px; 
} 

#hiv101STDSidebar LI { 
position:relative; /* added per some forum post, no effect*/ 
list-style-image:url(/images/layout/squareBulletBlue.gif); 
} 

Toutes les suggestions très appréciés. Il serait dommage d'avoir à réécrire ces UL en tant que tables!

Answer 1

Comme suggéré par d'autres, utiliser une image de fond au lieu d'une image de balle.

HTML

<div id="floated"> 
     <ul> 
      <li> 
       Item 
      </li> 
      <li> 
       Item 2 
      </li> 
     </ul> 
    </div> 

CSS

div#floated { 
    float: left; 
} 

ul { 
    padding: 0; 
} 

li { 
    background: transparent url(squareBulletBlue.gif) no-repeat 0 2px; 
    list-style-type: none; 
    padding-left: 1.2em; 
} 

Travaux dans IE6 et 7 pour moi, si elle ne le fait pas, alors vous avez d'autres problèmes avec votre code :)

Answer 2

Essayez de styler la puce avec l'attribut d'arrière-plan.

selector li { 
    background: transparent url(/images/layout/squareBulletBlue.gif) left center no-repeat; 
    paddding-left: 25px; 
} 

Vous pourriez avoir à réinitialiser le padding et margin sur votre sélecteur ul.

Answer 3

Ce qu'il fixe dans IE6 & 7:

#hiv101STDSidebar ul { 
    width: 215px; 
    margin: 0 0 0 0; /* resetting margin */ 
    padding: 0 0 0 40px; /* using padding to position ul */ 
} 

n'ont pas eu le temps d'enquêter correctement, mais il semble être la marge gauche héritée de la barre latérale qui est l'origine du problème. Utiliser padding sur le ul fixe le comportement bizarre dans ie6 et ie7 mais il ne joue pas bien avec les navigateurs compatibles standards, donc vous devez ajouter ce style avec votre lte ie7 css conditionnel.

Espérons que cela aide.