Sönke: Netscape verliert CSS in dreifach verschachtelten «ul»'s

Hallo ihr alle!

Man soll es ja kaum glauben, aber jetzt habe ich doch glatt auch mal ein Problem
mit Netscape (4.72).

Und zwar wollte ich eine dreifach "verschachtelte" unordered list erstellen. Also z.B. in einer Form wie...

<ul>
  <li>Text<li>
  <ul>
    <li>Text<li>
    <ul>
      <li>Text<li>
    </ul>
  </ul>
</ul>

Damit die inneren beiden <ul>'s nicht so weit eingerückt werden, habe
ich sie mit style="position:relative; left:-18px;" etwas nach links
verschoben. So weit so gut. Wende ich das ganze auch nur auf eine nur zweifach verschachtelte
Konstruktion an, gibt es auch keine Schwierigkeiten. Sobald ich aber
die dritte Ebene mit einfüge, berücksichtigt Netscape im ganzen
Dokument (also sowohl vor, als auch nach der Liste) keine meiner
externen CSS-Angaben mehr. Äußerst Spaßig!

Kennt jemand von Euch dafür vielleicht eine Lösung?

Der genaue Quelltext lautet...

<ul style="margin-bottom:8px;">
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><span class="SST"><a href="#P1">Frage:</a>
       Ein Göpelschauer - was ist das eigentlich?</span></font></li>
  <ul style="margin-bottom:8px; position:relative; left:-18px;">
    <li><font face="Arial, Helvetica, sans-serif" size="-1"><span class="SST"><a href="#P2">Zur
         Erinnerung - eine fachkundliche Auffrischung</a>.</span></font></li>
    <ul style="margin-bottom:8px; position:relative; left:-18px;">
       <li><font face="Arial, Helvetica, sans-serif" size="-1"><span class="SST"><a href="#P2">Der
            Balken auf zwei Stützen.</a>.</span></font></li>
       <li><font face="Arial, Helvetica, sans-serif" size="-1"><span class="SST"><a href="#P3">Das
            Sprengwerk</a>.</span></font></li>
       <li><font face="Arial, Helvetica, sans-serif" size="-1"><span class="SST"><a href="#P4">Das
            Hängewerk</a>.</span></font></li>
    </ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><span class="SST"><a href="#P5">Der
       Göpelschauer</a></span></font> </li>
  </ul>
<li><font face="Arial, Helvetica, sans-serif" size="-1"><span class="SST"><a href="#P6">Antwort
     schreiben.</a></span></font></li>
</ul>

Und falls es sich jemand live ansehen möchte hier noch die URL:
http://home.germany.net/100-465659/artikel/fragen/goepel/index.htm

Dank schon mal an alle im Voraus.

MfG,
Sönke

  1. Moin,

    ich habe hier "nur" einen Netsi 4.7, der verschluckt sich aber nicht - nachdem:

    Ich denke es lag daran, dass in deiner Verschachtelten Liste 2 <li> fehlten. Für solche Sachen ist übrigens html-tidy ein nützliches Werkzeug  http://www.w3.org/People/Raggett/tidy/.

    Hier das Ergebnis eines Checks durchs Tidy, der zugleich auch dein css ein wenig aufgeräumt hat:

    <style type="text/css">
    ul.c3 {margin-bottom:8px;}
    li.c2 {list-style: none}
    ul.c1 {margin-bottom:8px; position:relative; left:-18px;}
    </style>
    </head>

    <body>
      <ul class="c3">
       <li><span class="SST"><a href="#P1">Frage:</a> Ein Göpelschauer - was ist das eigentlich?</span></li>

    <li class="c2">
        <ul class="c1">
         <li><span class="SST"><a href="#P2">Zur Erinnerung - eine fachkundliche Auffrischung</a>.</span></li>

    <li class="c2">
          <ul class="c1">
           <li><span class="SST"><a href="#P2">Der Balken auf zwei Stützen.</a>.</span></li>

    <li><span class="SST"><a href="#P3">Das Sprengwerk</a>.</span></li>

    <li><span class="SST"><a href="#P4">Das Hängewerk</a>.</span></li>
          </ul>
         </li>

    <li><span class="SST"><a href="#P5">Der Göpelschauer</a></span></li>
        </ul>
       </li>

    <li><span class="SST"><a href="#P6">Antwort schreiben.</a></span></li>
      </ul>

    Viele Grüße

    Swen

  2. Hallo!

    Man soll es ja kaum glauben, aber jetzt habe ich doch glatt auch mal ein Problem
    mit Netscape (4.72).

    Den kann man nciht nehmen: der ist leider ein Meisterwerk was bugs betrifft. Mit NS4.6 sieht die Seite (bis auf die Pfeile vor den Links) wie im IE aus.

    ich sie mit style="position:relative; left:-18px;" etwas nach links verschoben.

    »»

    Würde ich an deiner Stell nicht machen: NS hat mit position:relative ein problem: du kannst es auch überprüfen:
    fahre mit der Maus über den Link "Das Hängewerk" das wort 'Das' ist nur zum Teil anklickbar, dafür kannst du hinter dem Link noch auf 'nichts' klicken.
    Sprich, unter NS bleibt der Inhalt (beim position:relative) an der Stelle wo es ohne pos:rel stehen würde: verschoben wird nur "quasi".

    <ul style="margin-bottom:8px;">

    NS mag nicht sehr gern inline-Style Angaben. Irgendwann gibt er es auf. Ist immer halt leider eine Frage das Testens was nun geht.

    Grüße
    Thomas

  3. Hi, Thomas, hi Swen!

    Danke Euch beiden. Hab dank Eurer Hilfe eine funktionierende Version hinbekommen.

    Tschüss,
      Sönke