CSS: Listenzeichen im Internet Explorer bei ul, li

Problem: Eine HTML-Liste mit <ul> und <li> soll auf dem Bildschirm mit Listenzeichen angezeigt werden, also zum Beispiel einem schwarzen Listenpunkt vor jedem Listenelement, und das natürlich in jedem Browser. Gute Browser wie der Firefox zeigen die Listenpunkte immer an, unabhängig von den CSS-Angaben für margin und padding, und solange man nicht den CSS-Befehl list-style:none notiert hat. Beim Internet Explorer (IE) von Microsoft kann es hingegen vorkommen, dass die Listenzeichen auch ohne list-style:none verschwinden.

Dies passiert im IE in aller Regel bei der Angabe der CSS-Eigenschaft padding:0 im ul-Tag. Listenzeichen außerhalb des gelben Bereiches werden beim folgenden Beispiel im IE (normalerweise) nicht angezeigt. Diese Liste verwendet in ul als style:

  • padding:0;
  • margin:1em 3em;
  • background-color:#FFCC00;
  • sowie eine im Elternelement voreingestellte Zeilenhöhe

Wenn man die Liste um 3em nach rechts einrücken möchte und dies mit CSS-Eigenschaft padding realisiert, dann gehorcht auch der IE. Diese Liste verwendet in ul als style:

  • padding:1em 3em;
  • margin:0;
  • background-color:#CCCCFF;
  • sowie eine im Elternelement voreingestellte Zeilenhöhe

Quintessenz: Wenn man mit HTML-Listen arbeitet, und Listenzeichen sollen auch im IE erscheinen, dann verwendet man für Abstände in CSS besser die Eigenschaft padding anstatt margin.

www.danielhagen.de -> Internet & PC -> IE-Bug bei ul, li