Hallo

Habe ich in meinem Forum auch mal getan und komme zu einer weiteren anderen Darstellung.

Mein Forum, Tabellenansicht:

- Die erste Einrückung erfolgt ohne gepunktete Line (wie ich es mit ul.reply ul auch erwarten würde) (linke Box).
- Die gepunktete Linie ist vor dem ersten Häkchen zu sehen (Box rechts oben).
- Die gepunktete Linie ist hinter jedem letzten Häkchen zu sehen (Box rechts unten).

Ja. Ich habe noch ein paar andere Einstellungen zur Darstellung/Einrückung des Threadbaumes aus der Standard-CSS überführt, die aber wohl nichts mit dem Problem zu tun haben

Da ich die nicht kenne, kann ich natürlich auch nichts darüber sagen. Die Entwicklerwerkzeuge deines Browsers zeigen dir aber, welche CSS-Eigenschaft an welchem Element aktiv ist oder eventuell überschrieben wurde. Zudem kannst du die Eigenschaften einzeln aus- und einschalten. Im Firefox erreichst du sie mit aktiviertem klassischen Menü über Extras=>Web-Entwickler=>Inspektor, ansonsten über das Hamburger-Menü=>Web-Entwickler=>Inspektor oder [STRG]+[Umschalt]+[C]. Im Chrome heißen sie "Entwicklerwerkzeuge", andere Browser kann ich aktuell nicht prüfen. In den meisten Browsern sind die Entwickerwerkzeuge generell mit [F11] aufrufbar, wenn ich mich nicht irre.

Ich habe jedenfalls eine funktionierende Lösung für mein Forum gefunden, indem ich den Quelltext in Alfies Forum geprüft habe. Er war es, der die Verbindungslinien in die kleine Welt von MLF eingeführt hat, woraufhin ich sie für MLF1 und später Alex für MLF2 übernommen haben.

Der Trick besteht darin, die Einrückung nicht mit margin sondern mit padding zu realisieren.

Mein alter CSS-Code:

ul.reply, ul.deep-reply, ul.very-deep-reply {
 margin: 0 0 0 0.75em;
 margin: 0 0 0 0.75rem;
 padding: 0;
 list-style-type:none;
 max-width:100%;
}
ul.reply ul {
 background: url(images/thread_connecting_line.png) repeat-y left center;
}
ul.reply li:last-child > ul {
 background: none;
}

Mein neuer CSS-Code:

ul.reply, ul.deep-reply, ul.very-deep-reply {
 margin:0;
 padding: 0 0 0 0.75em;
 padding: 0 0 0 0.75rem;
 list-style-type:none;
 max-width:100%;
}
/* die Angaben zu ul.reply ul und ul.reply li:last-child > ul ändern sich nicht */

Zudem habe ich für mein Forum testweise ein border-left statt des Hintergrundbildes eingesetzt, wie es Alfie damals auch schon vorschlug und selbst so implementierte. Beim zoomen am Desktop-Browser scheint die Breitenangabe von 4px für die Border zum verkleinert dargestellten SVG-Bild für den Pfeil, dessen Körper in Originalgröße 24px breit ist, zu passen.

Dafür, dass das immer und überall so ist, übernehme ich aber keine Gewährleistung. Die gepunktete Linie des PNG-Bildes wirkte auf mich jedenfalls einen Ticken zu schmal für den Pfeil.

ul.reply ul {
 border-left: 4px dotted #bfc1be;
}
ul.reply li:last-child > ul {
 border: none;
}

Das Ganze noch einmal im Vivaldi bei einer Vergrößerung der Seite auf 250%. Der Vivaldi verwendet die Chromium-Engine, womit das im Chrome identisch aussehen sollte.

Wie oben, bezogen auf die Entwicklerwerkzeuge, schon geschrieben, kann ich keine weiteren Tests mit anderen Browsern durchführen. Das Ergebnis kann sich aber meiner Meinung nach sehen lassen [edit]und es funktioniert sowohl in der Thread- als auch in der Tabellen-Ansicht[/edit].

Tschö, Auge