Zur Navigation

Baumstruktur mit CSS

1 C)-(iLL@

Hallo,

ich stecke mal wieder in einem CSS-Loch und komme nicht raus. Bitte helft mir ;)

Das Problem betrifft nur Opera/Gecko-basierte Browser, nix IE.

Mit einer normalen UL sollte es doch problemlos möglich sein, eine dezente Baumstruktur zu konstruieren.

Dachte ich bislang auch, aber dann traten sonderbare Effekte ein.

1. Wenn ich besagte Liste in ein Div mit prozentualer Höhe packe, erscheinen bereits ersten Laden sehr seltsame Abstände zwischen den Listenelementen, die ich mir nicht erklären kann. Besagte Abstände verschwinden auch, wenn das Fenster gestaucht/gestreckt wird, problematisch wird es, wenn die Liste den unteren Rand des divs überschreitet (overflow:hidden). Selbst eine fixe Höhe löst das Problem nicht, im Gegenteil. Ist das div zu niedrig, so verschwinden die ungewünschten Abstände (oder Umbrüche?) gar nicht mehr.

2. Der Abstand der Links der Listenelemente der Tiefe 0 (die mit dem Kästchen) ist bei Opera und Geckos unterschiedich. Während Opera den Text in diesen Listenelementen wie gewollt keinen Abstand macht, ist bei Gecko-Browsern ein Einzug von ca. 10px zu sehen. Korrigiere ich den mittels CSS weg, überlagert der Text auf Opera. Irgendwie zum Mäusemelken. Wie bekomme ich das ohne Browserweiche hin, ist das überhaupt möglich?

Ich habe gelesen, dass es für die CSS3 Pseudo-Klasse last-child noch keine Unterstützung bei Opera gibt. Ich habe das mittels einer zwar unschönen aber notwendigen Klasse 'lc' gelöst, PHP muss dies dann eben im Algorhitmus setzen. Gäbe es hierfür eine "pure-css"-Workaround, der die Klasse überflüssig macht?

Das Sorgenkind befindet sich hier.

Für Tips dankbar,
Rudy


Edit: Ich konnte das Problem des Umbruchs eingrenzen. Wenn im Block
ul#filelist li {
  list-style:circle inside; 
}
steht, also kein gif als list-style angegeben wird, ist der Effekt nicht da. Es ist aber keine Rede dass das gif dort für die Baumstruktur gebraucht wird. :( Frustrierend.

05.09.2005 19:23 | geändert: 05.09.2005 19:56

2 Jörg Kruse

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

05.09.2005 20:21 | geändert: 05.09.2005 20:22

3 C)-(iLL@

guten abend jörg,

ja, etwas konnte ich es eingrenzen, aber leider nicht lösen. Inzwischen habe ich auch die Pseudoklassen :before versucht, anstatt dem gif als List-style, das Ergebnis ist dasselbe. Jetzt bin ich mit meinem Latein am Ende ;)

05.09.2005 20:29

4 Jörg Kruse

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?

05.09.2005 21:44

5 C)-(iLL@

Danke fürs Tüfteln, ich hab auch einiges versucht, leider ohne große Ergebnisse.
Aber ich nehme an, dass du das overflow:hidden nicht zum Spaß einsetzt, sondern, dass es einen bestimmten Zweck erfüllt
Ja, den dass es nicht in die Divs darunter fließt ;)

Du nennst es "Bug"? Also ist das nicht mein Fehler? Wäre ja mal was neues ;)

05.09.2005 22:08

6 Jörg Kruse

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

05.09.2005 22:49 | geändert: 05.09.2005 22:49

7 C)-(iLL@

Ja, das ist echt entnervend. Kennst Du vielleicht einen anderen Weg, eine Baumstruktur in einem Div zu erzeugen, um diesen Bug zu umgehen?

Edit: Hm, ich überlege ob ich dem Bug überhaupt Beachtung schenken soll. Immerhin funktioniert es mit der Deer-Park Version (derzeit Alpha2) schon viel besser.

05.09.2005 23:35 | geändert: 06.09.2005 01:19

8 C)-(iLL@

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.

06.09.2005 03:11

9 Jörg Kruse

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

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

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.

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

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

06.09.2005 11:32

10 C)-(iLL@

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

06.09.2005 11:48