Robert Allerstorfer: list-items ohne block

Hi,

ich versuche, folgenden style mit *validem* HTML 4.01 (Transitional) zu coden:

Hier ist normaler Text
* das ist ein list-item ohne vorherigen zeilenumbruch
Hier geht normaler Text weiter ohne vorherigen zeilenumbruch

Das kann folgendermaßen realisiert werden:

<div>Hier ist normaler Text
<li style="list-style:disc inside;">das ist ein list-item ohne vorherigen zeilenumbruch</li>
Hier geht normaler Text weiter ohne vorherigen zeilenumbruch
</div>

Da schreit aber der HTML validator, da der LI tag nicht als kind von UL oder OL auftritt, sondern alleine. Kommt seine mutter hinzu, legt sie jedoch einen schützenden block um all ihre kinder (LI tags) in form von einem einleitenden und abschließenden zeilenumbruch.

Genau das ist aber unerwünscht. Als valide HTML alternative habe ich statt dem illegalen muterlosen LI tag folgendes gefunden:

<div style="display:list-item; list-style-type:square; list-style-position:inside;">das ist ein list-item ohne vorherigen zeilenumbruch</div>

Funktioniert auch wunderbar, allerdings nur unter Mozilla 5 ("Netscape 6") und Opera 5 (!). Der IE 5.5 macht kein bullet davor und der 4er Netscape bricht gleich überall um, wo er nur kann. Kennt jemand eine valide lösung, mit der auch IE und NS4 zurechtkommt?

Danke!

rob.

  1. Hallo rob,

    hilft Dir das folgende Beispiel weiter?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <title>list</title>
    <style type="text/css">
    <!--
    UL { display:inline; }
    LI { list-style:disc inside; }
    -->
    </style>
    </head>
    <body>
    <div>Hier ist normaler Text
    <ul><li>das ist ein list-item ohne vorherigen zeilenumbruch</li>
        <li>das ist ein list-item ohne vorherigen zeilenumbruch</li></ul>
    Hier geht normaler Text weiter ohne vorherigen zeilenumbruch
    </div>
    </body>
    </html>

    Ist allerdings HTML 4.01 Strict und im Netscape gibt es noch eine
    Leerzeile wegzuretuschieren.

    MfG, Stefan

    1. Hallo,

      hilft Dir das folgende Beispiel weiter?

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html>
      <head>
      <title>list</title>
      <style type="text/css">
      <!--
      UL { display:inline; }
      LI { list-style:disc inside; }
      -->
      </style>
      </head>
      <body>
      <div>Hier ist normaler Text
      <ul><li>das ist ein list-item ohne vorherigen zeilenumbruch</li>
          <li>das ist ein list-item ohne vorherigen zeilenumbruch</li></ul>
      Hier geht normaler Text weiter ohne vorherigen zeilenumbruch
      </div>
      </body>
      </html>

      Ist allerdings HTML 4.01 Strict und im Netscape gibt es noch eine
      Leerzeile wegzuretuschieren.

      MfG, Stefan

      danke für deine variante. Allerdings funktioniert diese nur mehr bei einem (anstatt vorher bei 2) der genannten browser, und zwar nur beim IE. Mozilla 5 macht nach dem letzten item ein br, Opera nach jedem, Netscape 4 - und das ist wirklich scheuslich - nach jedem bullet (!). Bin also noch weiter auf der suche nach einer besseren lösung.

      mfg,

      rob.

      1. Hallo nochmal,

        Allerdings funktioniert diese nur mehr bei einem (anstatt vorher bei 2) der genannten browser, und zwar nur beim IE. Mozilla 5 macht nach dem letzten item ein br, Opera nach jedem, Netscape 4 - und das ist wirklich scheuslich - nach jedem bullet (!).

        also bei mir (Windows ME mit MSIE 5.5 SP1, Opera 5.12, Mozilla 0.9.2,
        Netscape 4.77 und Netscape 6.1 PR1) sieht es in allen Browsern nahe-
        zu gleich aus:

        Hier ist normaler Text
        • das ist ein list-item ohne vorherigen zeilenumbruch
        • das ist ein list-item ohne vorherigen zeilenumbruch
        Hier geht normaler Text weiter ohne vorherigen zeilenumbruch

        Nur im NC 4.77 entsteht direkt unter der Liste eine Leerzeile.

        Sehr eigenartig, vielleicht kannst Du mal Deine Variante irgendwo
        online stellen und hier den URL posten.

        MfG, Stefan

        1. Hallo Stefan,

          also bei mir (Windows ME mit MSIE 5.5 SP1, Opera 5.12, Mozilla 0.9.2,
          Netscape 4.77 und Netscape 6.1 PR1) sieht es in allen Browsern nahe-
          zu gleich aus:

          Hier ist normaler Text
          • das ist ein list-item ohne vorherigen zeilenumbruch
          • das ist ein list-item ohne vorherigen zeilenumbruch
          Hier geht normaler Text weiter ohne vorherigen zeilenumbruch

          Nur im NC 4.77 entsteht direkt unter der Liste eine Leerzeile.

          Danke für deine mühe, dein code funktioniert in der tat gut! Dachte nicht, dass

          <ul>
              <li>das ist ein list-item ohne vorherigen zeilenumbruch</li>
              <li>das ist ein list-item ohne vorherigen zeilenumbruch</li></ul>

          und

          <ul>
              <li>das ist ein list-item ohne vorherigen zeilenumbruch</li>
              <li>das ist ein list-item ohne vorherigen zeilenumbruch</li>
          </ul>

          einen unterschied macht. Ich habe nämlich letztere variante genommen, um den source besser lesbar zu machen, aber das hat doch tatsächlich die leerzeile nach dem letzten li in Mozilla 5 verursacht. Und die häßlichen zeilenumbrüche nach jedem bullet, die Netscape 4 gemacht hat, wurden durch ein zusätzliches 'display:list-item;' in der style definition für LI verursacht, welches ich vergessen hatte zu entfernen. Nachdem es weg war, zeigt auch der Netscape 4 ein akzeptables resultat. Sein schönheitsfehler ist nur die leerzeile danach und, dass 'inside' nicht greift. Opera macht aber nach wie vor einen größerne zeilenabstand nach jedem list-item, aber mit dem kann ich leben. Ich werde also doch die von dir vorgeschlagene variante wählen.

          lg,

          rob.