IE Disappearing Bullet Fehler in Floated DIV

Question

Es gibt eine Welt von Vorschlägen in Foren zu diesem Thema, aber keine haben irgendwelche Anzeichen von Erfolg für mich noch gezeigt.

Ich habe ein floated div, das ULs enthält, die so gestaltet sind, dass sie ein Kugelbild verwenden. Alle kompatiblen Browser zeigen das Bild in Ordnung. Wenn ich die Seite in IE 6 aktualisiere, werden die Aufzählungszeichen häufig angezeigt, verschwinden jedoch wieder, wenn die Seite gescrollt wird. In IE 7 werden sie einfach nicht angezeigt. hier

Seite ist:

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

Relevante CSS:

#hiv101STDSidebar UL { 
width:215px; 
} 

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

Irgendwelche Vorschläge sehr geschätzt. Es wäre eine Schande, diese ULs als Tabellen neu schreiben zu müssen!

Answer 1

Verwenden Sie wie von anderen vorgeschlagen ein Hintergrundbild anstelle eines Aufzählungszeichens.

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

Arbeiten in IE6 und 7 für mich, wenn es nicht tut, dann haben Sie andere Probleme mit Ihrem Code bekommen :)

Answer 2

Versuchen Sie, das Aufzählungszeichen mit dem Hintergrundattribut zu formatieren.

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

Sie könnten die padding und margin auf Ihrem ul Selektor zurücksetzen.

Answer 3

Dies behebt es in IE6 & 7:

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

hatte noch keine Zeit, um richtig zu untersuchen, aber es scheint, der geerbte linke Rand der Seitenleiste zu sein, die das Problem verursacht. Die Verwendung von Padding auf der ul behebt das seltsame Verhalten in ie6 und ie7, aber es funktioniert nicht mit standardkonformen Browsern, daher müssen Sie diesen Stil mit Ihrer bedingten lte ie7 css hinzufügen.

Hoffe, das hilft.