Baumstruktur mit CSS

Das Problem der Abstände in Gecko scheint mir irgendwie an list-style-image:url(nodex.gif); zu hängen - ohne dem treten sie jedenfalls in Firefox nicht auf

Edit:
sorry, ich hatte dein Edit nicht mehr gelesen, so weit warst du selbst ja auch schon ;)

Ich hab grad nochmal etwas getestet - dieser Bug scheint von mehreren Faktoren abzuhängen. Wenn man das Gif als list-style-image belässt, aber stattdessen für div#folderview das overflow:hidden; weglässt und für ul#filelist margin einheitlich auf 10px setzt, verschwinden die Abstände. Aber ich nehme an, dass du das overflow:hidden nicht zum Spaß einsetzt, sondern, dass es einen bestimmten Zweck erfüllt, so dass du dies auch nicht ohne weiteres unter den Tisch fallen lassen kannst?

Naja, es hat schon etwas von einem Bug, wenn Firefox die Seite nach dem Resize in deinem Sinne korrekt darstellt

Ich habs gelöst. *freu* Endlich siehts auf dem Opera aus wie im Mozilla und eiert nicht rum. Eigentlich zum Spaß habe ich probiert, die images innerhalb der <a> in der Liste mit <img> zu platzieren. Siehe da - Aktualisieren funktioniert. Sogar der Geistereinzug ist weg! Nur noch Shift+Aktualisieren bringt ihn aus dem Konzept, aber das halte ich für vernachlässigbar. Zum Test habe ich noch den Text in jedem <a> mit einem <span> eingefasst und gestyled mit

ul#filelist * a > span:before {
  content:url(nodex.gif);
}

- und, der Bug ist wieder da, einmal aktualisieren und die Liste ist futsch. Liegt also nicht nur am list-style-image direkt, sondern irgendwo tiefer dieser Anzeigefehler.

Nun, es sieht hässlich aus, wenn die Liste mit lauter img-Tags gespickt ist. Ich konnte nur mehr versuchen sie möglichst kurz zu halten. Ein transparentes gif mit Namen '0.gif' von 1x1px und css reduzieren es auf <img src="0.gif" /> - das kleinste Übel. CSS gibt die Größe und das img hat als background-image nodex eingetragen, also den normalen Listenknoten, oder node0 für die Elemente des ersten Levels.

ul#filelist li a > img {
  border:none; 
  background:url('nodex.gif') no-repeat center;
  width:7px;
  height:12px;
  margin:0;
  padding:0 0 1px 0; /*opera fix*/
}
ul#filelist > li > a > img {
  border:none; 
  background:url('node0.gif') no-repeat center;
  width:17px;
  height:17px;
  margin:0;
  padding:0 0 1px 0; /*opera fix*/
}

Das ganze hat gegenüber der list-style-image den Nachteil, dass ab der 3. Vergrößerungsstufe die Baumstruktur ober den Knoten abbricht, aber damit kann ich leben, wenns dafür keine Lösung gibt.

Hier die neue Testdatei.

Die Anwendungsbereiche einer solchen Baumstruktur sind zahlreich, deshalb ist es mir wichtig, dass sie auf allen Browsern funktioniert. IE ist zwar kein Browser, aber selbst auf dem funktioniert es mit wenigen Modifikationen. Jedoch ist mein Interesse für eine IE-Unterstützung gering, vor allem weil wichtige CSS-Selektoren fehlen. Das Ziel wäre eine Klasse, welche Arrays als Baumstruktur mit möglichst wenig Code und ohne Javascript ausgibt. Ich kann das Ergebnis auch gerne posten, wenn es jemandem hilft.

Hast Du noch einen Verbesserungsvorschlag oder eine Idee, wie in der jetzigen Form das Shift+Refresh - Problem zu lösen ist? Fixe Breiten und Höhen in den IMG-Tags der unteren Level haben es nicht gelöst.

Glückwunsch, das es jetzt (weitgehend) funktioniert :)

Danke, ich hätte sonst nicht schlafen können ;)

Bei Shift+F5 zeigt mein Firefox keinen unerwünschten Effekt - nur wenn ich das Fenster so stark stauche, dass der Inalt nicht mehr vollständig in den Container passt, und anschließend aktualisiere

Seltsam, wenn ich es im aktuellen FF auch maximiert lade, bricht der untere Ast heraus. Erst nach dem ersten mal Aktualisieren geht es. Derselbe Effekt tritt auch beim aktuellen Mozilla auf. Mit Shift+Aktualisieren lässt sich der Fehler sich immer wieder herstellen.

d.h. die Ästhetik des Quelltextes ist auch noch ein wichtiges Kriterium für dich :)

Na und ob ;) Mich stört ja schon wahnsinnig dieses src beim img, wenn ich das noch wegbekomme... vielleicht mit einem anderen Element, dem der Knoten als Background gesetzt wird?

wenn ich e ichtig verstanden habe, funktioniert das ganze im künftigen Firefox 1.5 auch korrekt mit list-style-image?

Ich habe gestern die Deer-Park Version (entspricht FF 1.6a1 installiert, dort trat der Effekt nicht auf. Die Alpha-Version ist aber noch sehr instabil, so hat er beispielsweise nie aufgehört eine Seite zu laden. Jedenfalls war beim ersten Laden der Fehler nicht sichtbar, mit Deer-Park nicht wiederherstellbar. Bugzilla ist auch voller Fehlermeldungen über falsches Rendering der Listen, ich glaube das ist bereits bekannt.

Wie gesagt, für Vorschläge das noch kürzer zu machen bin ich dankbar ;)