jenskie: liste und i.e

Hallo,
bei meiner Liste verwende als Aufzählungszeichen eine eigene Grafik. Ich muss die "list-style-position: outside" verwenden, da manche Listenelemente längere Sätze sind, die manchmal mit <br />  umgebrochen werden und dann soll ja die nächste Zeile wieder mit dem Text bündig sein.
So nun klappt dass leider in meinem I.E Version 6 nicht. Das Aufzählungzeichen erscheint und verschwindet wieder. Was kann ich tun?

http://www.laurig-coaching.de/www/test/methode.html
http://www.laurig-coaching.de/www/test/bewerbung.html

  1. Ob die Listenelemente "outside" oder "inside" angezeigt werden, ist mir eigentlich egal. Wichtig ist, dass die 2. Zeile innerhalb eines <li> nach einem Umbruch bündig ist.
    Vielen Dank. Ich hoffe Ihr könnt mir helfen bei:

    http://www.laurig-coaching.de/www/test/methode.html
    http://www.laurig-coaching.de/www/test/bewerbung.html

    1. Hallo,

      Ob die Listenelemente "outside" oder "inside" angezeigt werden, ist mir eigentlich egal. Wichtig ist, dass die 2. Zeile innerhalb eines <li> nach einem Umbruch bündig ist.

      Die unterschiedlichen Browserdarstellungen bei UL/LI erkennst Du am Besten, wenn Du mal um beide Elemente border zeichnen lässt. Du musst mit margin und padding für UL und LI experimentieren, bis es in vielen Browsern gleich aussieht. Für normale Listen mit Standardbullets habe ich mit

        
      ul { margin:0; padding:0; }  
      li { margin:0; padding:0; margin-left:2.5ex; }  
      
      

      die besten Erfahrungen gemacht.

      Für Dein Problem, nämlich eigene List-Bullet-Grafiken, habe ich allerdings schlechte Erfahrungen mit den Standardlösungen. Jeder Browser positioniert die Bullet-Grafiken in der Höhe anders. besser ist es hier meiner Meinung nach, die Grafiken als Hintergrund für die LI-Elemente zu definieren.

      Beispiel:

        
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
              "http://www.w3.org/TR/html4/strict.dtd">  
      <html>  
      <head>  
      <title>Titel</title>  
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
      <style type="text/css">  
      ul { margin:0; padding:0; width:25ex; }  
      li { margin:0; padding:0; padding-left:1.5ex; list-style-type:none; background-image:url(listen_zeichen.gif); background-repeat:no-repeat; background-position:0 0.5em; }  
      </style>  
      </head>  
      <body>  
      <ul>  
      <li>ein Testtext zum Testen</li>  
      <li>noch ein Testtext zum Testen laenger Testtext zum Testen laenger</li>  
      <li>und noch ein Testtext zum Testen noch laenger Testtext zum Testen noch laenger</li>  
      <li>letzter Testtext zum Testen noch viel laenger Testtext zum Testen noch viel laenger</li>  
      </ul>  
      </body>  
      </html>  
      
      

      viele Grüße

      Axel