list-style-image - Probleme mit IE6/IE7

[Sven]

Hallo,

ich habe ein Navigations-Menü mit Hilfe des <ul>-Tags gestaltet, und dabei Verschachtelungen benutzt:

<ul id="menu">  
  <li>  
    Pflanzen  
    <ul id="pflanzen">  
      <li>für den Garten</li>  
      <li>für Beet & Balkon</li>  
      <li>usw.</li>  
    </ul>  
  </li>  
  <li>  
    Zubehör  
    <ul id="zubehoer">  
      <li>Pflanzgefäße</li>  
      <li>usw.</li>  
    </ul>  
  </li>  
</ul>

Jetzt wollte ich eigene Aufzählungszeichen für die Menüpunkte der obersten Ebene verwenden (also für "Pflanzen", "Zubehör").

#menu {  
	margin:0 auto;  
	margin-right:12px;  
	padding:0;  
	width:auto;  
	height:100%;  
	float:left;  
	list-style-image:url(resources/gfx/menu_list.jpg);  
}  
  
#menu #pflanzen, #menu #zubehoer, #menu #ueberuns {  
	list-style:none;  
}

Im Firefox klappts, im IE 8, Safari, Opera ebenfalls. Die IE7 und IE6 (ebenso der IE8 im "Kompatibilitätsmodus", der wohl mit dem IE7 weitgehend übereinstimmt) machen jedoch folgendes: Nicht die Punkte "Pflanzen" und "Zubehör" haben das Aufzählungszeichen, sondern deren jeweilige Unterpunkte.

Die Seite ist hier gespeichert: Testseite

Kann mir jemand verraten, wie ich das umgehen könnte? Wenn es semantisch noch was zu verbessern gibt, freu ich mich natürlich auch über Hinweise ;)

Grüße
Sven

[Beat]

Im Firefox klappts, im IE 8, Safari, Opera ebenfalls. Die IE7 und IE6 (ebenso der IE8 im "Kompatibilitätsmodus", der wohl mit dem IE7 weitgehend übereinstimmt) machen jedoch folgendes: Nicht die Punkte "Pflanzen" und "Zubehör" haben das Aufzählungszeichen, sondern deren jeweilige Unterpunkte.

Die Seite ist hier gespeichert: Testseite

Kann mir jemand verraten, wie ich das umgehen könnte? Wenn es semantisch noch was zu verbessern gibt, freu ich mich natürlich auch über Hinweise ;)

Vollkommen aus dem Bauch:
Versuche mal eher mit
    #yourid > li{}
die Listenpunkte statt die Listen global zu formatieren.
PS: Ich sehe auch keine Normalisierung von margin/padding bezüglich li

mfg Beat

[Sven]

Vollkommen aus dem Bauch:
Versuche mal eher mit
    #yourid > li{}
die Listenpunkte statt die Listen global zu formatieren.

Hallo,

Danke, das bringt immerhin schonmal einen Fortschritt: Die jeweiligen Unterpunkte haben jetzt kein grafisches Aufzählungszeichen mehr. Jetzt bleibt aber noch das Problem, dass die Aufzählungen der ersten Ebene (Pflanzen, Zubehör, ...) in den alten IEs auch kein Aufzählungszeichen haben, obwohl sie eines haben sollen (im Firefox stimmt es nach wie vor).

Testseite

Grüße
Sven

[Auge]

Hallo

... Jetzt bleibt aber noch das Problem, dass die Aufzählungen der ersten Ebene (Pflanzen, Zubehör, ...) in den alten IEs auch kein Aufzählungszeichen haben, obwohl sie eines haben sollen (im Firefox stimmt es nach wie vor).

Testseite

Wenn ich mich recht erinnere, hatten alte IE-Versionen gelegentlich Probleme bei der Pfadauflösung in CSS-Dateien, was ja typischerweise Pfade zu (Hintergrund)Bildern betrifft. Der Pfad zu deinem Bild ist "resources/gfx/menu_list.jpg" unterhalb der Document Root. Gebe ihn mal in der CSS-Datei versuchsweise als "/resources/gfx/menu_list.jpg" an. Das ist die <http://de.selfhtml.org/html/allgemein/referenzieren.htm#absolut@title=absolute Pfadangabe innerhalb der Domain>.

Ob das die Lösung ist, kann ich allerdings auch nicht (mehr mit Gewissheit) sagen, da ich hier keinen IE verfügbar habe. Ich bevorzuge diese Schreibweise aber, da sie domainweit in allen Unterverzeichnissen eindeutug ist und ich damit Problemen bei der Referenzierungen (auch bei Links) aus dem Weg gehe (es gibt kein "vergessen einer Verzeichnisebene in Pfadangaben" mehr).

Tschö, Auge

[Sven]

Hallo,

Wenn ich mich recht erinnere, hatten alte IE-Versionen gelegentlich Probleme bei der Pfadauflösung in CSS-Dateien, was ja typischerweise Pfade zu (Hintergrund)Bildern betrifft. Der Pfad zu deinem Bild ist "resources/gfx/menu_list.jpg" unterhalb der Document Root. Gebe ihn mal in der CSS-Datei versuchsweise als "/resources/gfx/menu_list.jpg" an. Das ist die <http://de.selfhtml.org/html/allgemein/referenzieren.htm#absolut@title=absolute Pfadangabe innerhalb der Domain>.

Das hab ich eben getestet - bewirkt hat es leider nichts. Aber davon mal abgesehen, was ist das für ein blöder Fehler? Was für ein stümperhaftes Beta-Team muss man haben, dass so ein Fehler nicht erkannt wird und sich über Versionen hinweg hält? Unfassbar...

Ob das die Lösung ist, kann ich allerdings auch nicht (mehr mit Gewissheit) sagen, da ich hier keinen IE verfügbar habe. Ich bevorzuge diese Schreibweise aber, da sie domainweit in allen Unterverzeichnissen eindeutug ist und ich damit Problemen bei der Referenzierungen (auch bei Links) aus dem Weg gehe (es gibt kein "vergessen einer Verzeichnisebene in Pfadangaben" mehr).

Sollte ich mir auch angewöhnen. Aber gebracht hat es hier leider nichts, daher hab ich jetzt list-style auf "none" gesetzt und es mit einem Background-image gemacht. Mit padding links den Einzug vergrößert und es wird überall vernünftig angezeigt.

Testseite

Dennoch natürlich vielen Dank!

Grüße
Sven

[ChrisB]

Hi,

Versuche mal eher mit
     #yourid > li{}
die Listenpunkte statt die Listen global zu formatieren.

Danke, das bringt immerhin schonmal einen Fortschritt: Die jeweiligen Unterpunkte haben jetzt kein grafisches Aufzählungszeichen mehr. Jetzt bleibt aber noch das Problem, dass die Aufzählungen der ersten Ebene (Pflanzen, Zubehör, ...) in den alten IEs auch kein Aufzählungszeichen haben, obwohl sie eines haben sollen (im Firefox stimmt es nach wie vor).

Natürlich, ältere IE verstehen den Selektor > noch nicht.

Für die kannst du bspw. den Nachfahrenselektor nutzen, um den LI auf der ersten Ebene Aufzählungszeichen zu verpassen, und dann in einer weiteren Regel den weiter unten liegenden LI wiederum keines.

MfG ChrisB