dave: Baumstruktur im IE8

Hi,

ich habe eine Baumstruktur zum auf- und zuklappen.

Ich möchte dass sich diese so verhält wie sie es im aktuellem Chrome und Firefox tut. Und zwar auch im IE8.

:last-child würde ich durch eine CSS-Klasse 'is-last-child' (die es noch einzufügen gilt) ersetzen, aber der hat auch sonst noch jede Menge Darstellungsprobleme zu denen ich keine Lösung habe.

Gerne werfe ich auch das komplette HTML und CSS übern Haufen und mache es komplett anders, ich hab nur keine Idee wie.
Wichtig ist, dass die Baumstruktur erkennbar ist und die Markierung beim :hover über die ganze Breite geht.

Kann sich das mal jemand anschauen und mir helfen, dass es im IE8 wie gewünscht dargestellt wird?

~dave

  1. Moin,

    eine Alternative zu deiner befor- und after-Definition, die auf jeden Fall auch IE8-kompatibel sein sollte, ist folgendes:

    Erstell dir einen Container, ein span z.B., den du mit CSS so bearbeitest, dass er nur noch eine senkrechte gepunktete Linie darstellt. Dann machst du dir einen zweiten Container, der eine halbe Linie darstellt. Und einen letzten, dritten, Container, der eine horizontale Linie darstellt. Ich nehme an, dass du deine Liste irgendwie serverseitig generierst. In diesem Fall kommst du eh rekursiv an alle Items ran und kannst dann, je nach Position in deiner Iteration eine Kombination dieser drei Container voranstellen.

    So habe ich bereits auch eine komplette Baumstruktur hinbekommen und es war perfekt Abwärtskompatibel, weil nur CSS1-Code verwendet wird.

    Wenn noch Fragen sind: Fragen :)

    1. Hi,

      danke für deine Anregung.
      Ich sehe aber keinen Vorteil darin tatsächliche Elemente anstelle von Pseudo-Elementen zu verwenden?

      Außerdem möchte ich mein HTML eigentlich gerne "sauber" halten …

      ~dave

      1. danke für deine Anregung.
        Ich sehe aber keinen Vorteil darin tatsächliche Elemente anstelle von Pseudo-Elementen zu verwenden?

        Außerdem möchte ich mein HTML eigentlich gerne "sauber" halten …

        damit wird dein Vorhaben ziemlich unpraktisch.

  2. Kann sich das mal jemand anschauen und mir helfen, dass es im IE8 wie gewünscht dargestellt wird?

    Ich hab' da mal vor ewigen Zeiten etwas gestrickt, der ganze Mist ist eigentlich nur drin, um den IE6 zu unterstützen - es sollte sich eigentlich alles problemlos lösen lassen, ohne before/after zu verwenden

    http://suit.rebell.at/fileadmin/a-26/demo/

    Die klasse "last-child" die dort eingefügt ist, kannst du problemlos durch :last-child ersetzen

    Das einzige was erforderlich ist sind die klassen "hassub" und "expand" wenn du einen indikator für das auf/zuklappen willst.

      1. Hi,

        "Oops, an error occured!

        Reason: File "source.tar.gz" was not found (2)!"

        ~dave

        1. "Oops, an error occured!

          Reason: File "source.tar.gz" was not found (2)!"

          Asche über mein Haupt:
          http://suit.rebell.at/fileadmin/a-26/source.tar.gz

    1. Hi,

      vielen Dank für deine Lösung, einziges Problem dabei ist dass ich so beim :hover die Farbänderung nicht über die ganze Breite machen kann.

      ~dave

      1. Om nah hoo pez nyeetz, dave!

        vielen Dank für deine Lösung, einziges Problem dabei ist dass ich so beim :hover die Farbänderung nicht über die ganze Breite machen kann.

        Wer hindert dich, die li-Elemente zu hovern? Für IE6 ggf. per JS?

        Matthias

        --
        1/z ist kein Blatt Papier.

        1. vielen Dank für deine Lösung, einziges Problem dabei ist dass ich so beim :hover die Farbänderung nicht über die ganze Breite machen kann.

          Wer hindert dich, die li-Elemente zu hovern? Für IE6 ggf. per JS?

          Vermutlich die tatsache, dass die li-Elemente entsprechende Kinder haben und eingerückt sind, sprich nicht über die volle Breite gehen.

  3. Mit ein bisschen mehr position und z-index funktionierts jetzt auch im IE8.

    Danke an alle die sich das mal angeschaut hatten.