bei der Liste im Menü fehlt beim ersten Punkt der Rand unten – aber nur im IE

Listen als Gestaltungsmöglichkeit für Menüs sind sehr beliebt. Viele meinen so eine Liste sei ja ganz einfach. Funktioniere immer und was ist denn schon dabei. Prinzipiell Ja. Gäbe es da nicht einen Browser, der mit dem Betriebssystem „I love bluescreen“ ausgeliefert wird und immer noch sehr verbreitet ist.

Der IE mag Listen keine Frage. Gut er stellt die Abstände anders dar als Browser. Er hat Probleme mit dem jeweils ersten Listenpunkt, aber er mag und kann Listen. :zwinker:

„Wieso zeigt der IE keinen ersten Listenpunkt an “ wurde als Frage hier in diesem Forum gestellt. Mein Workaround für diesen IE Listenpunkt border-bottom Bug 😉

hier stimmen die border
hier stimmen die border
border fehlt
border fehlt


Das nachfolgende CSS ist nicht von mir und steht so wie es ist auch nicht zur Diskussion. Es gibt zig Möglichkeiten diese Liste zu gestalten und es wurde eben jene gewählt. Mir geht es hier nur darum den IE Bug border-bottom aufzuzeigen und ein mögliches Workaround, das diesen behebt.

Das CSS für dieses Menü sah so aus:


a:link.menu, a:visited.menu, a:hover.menu{
   display:block;
  border-bottom:1px solid #000000;
   font-family:arial, sans-serif;
   text-decoration:none;
   font-size:12px;
   font-variant: small-caps;
   text-align:left;
   padding-top:6px;
   padding-bottom:6px;
   white-space:nowrap;
   z-index:101;
   }
.li{display:inline;
   margin-left:0;
   margin-right:0;
   padding-left:0;
   border-left:0;}
a:link.menu{
	padding-left:6px;
	color:#ffffff;	
	}
a:visited.menu{
	padding-left:6px;
	color:#ffffff;
	}
a:hover.menu{
	padding-left:7px;
	color:#000000;
	background-color:#888888;
	}

Hier das dazugehörige HTML:

<div id="buttons">
<ul class="ul">
<li class="li"><a href="/" class="menu" title="Home">Home</a></li>
<li class="li">Test</li>
<li class="li">Test1</li>
<li class="li">Test2</li>
<li class="li">Test3</li>
<li class="li">Test4</li>
</ul>
</div>

Ich habe diesen Fehler schon ewigst beobachtet und umgeh dies meist indem ich nicht die „a“ mit border-bottom versehe, sondern die „li“. Hier ist es eben so, dass die „a“ gestaltet wurden und dass der Bug – „ich IE zeige bei einem Listenpunkt den ersten ohne border-bottom an“ da ist.

Beginn der „Menüsanierung“, damit nachher auch alle die Dachsanierung finden. :zwinker:

Die Lösung, die ich fand heißt *float*.

Floate ich die a nach links zeigt der IE border-bottom auch beim 1. Listenpunkt an.

Allerdings sind dann die border-bottoms logischerweise nur so breit wie das Wort lang ist. Daher gebe ich dann den „a“ eine Breite mit.

Das float hebe ich mit der class bei den li wieder auf und damit lebt jeder Browser und schon kann auch der IE Listenpunkte mit border-bottom anzeigen.

Für jedes andere Workaround bin ich dankbar und gerne führe ich es auf oder verlinke ich es.

Die geänderte CSS sieht dann so aus.


a:link.menu, a:visited.menu, a:hover.menu{
   display:block;float:left;width:99%;
   border-bottom:1px solid #000000;
   font-family:arial, sans-serif;
   text-decoration:none;
   font-size:12px;
   font-variant: small-caps;
   text-align:left;
   padding-top:6px;
   padding-bottom:6px;
   white-space:nowrap;
   z-index:101;
   }
.li{clear:left;
   display:inline;
   margin-left:0;
   margin-right:0;
   padding-left:0;
   border-left:0;}
a:link.menu{
	padding-left:6px;
	color:#ffffff;	
	}
a:visited.menu{
	padding-left:6px;
	color:#ffffff;
	}
a:hover.menu{
	padding-left:7px;
	color:#000000;
	background-color:#888888;
	}

Bei Listen hat der IE außerdem die Eigenschaft die Zeilenumbrüche und Abstände im Quelltext als „auszuführende“ Abstände zu interpretieren. Das Ergebnis sind meist irr hohe Abstände zwischen den Listenpunkten und nichts greift:

Umgehen kann man dies indem man einfach absolut keinen Platz bei den Listenpunkten läßt. Etwa so:

<div id="buttons">
<ul class="ul">
<li class="li"><a href="/" class="menu" title="Home">Home</a>
</li><li class="li">Test
</li><li class="li">Test1
</li><li class="li">Test2
</li><li class="li">Test3
</li><li class="li">Test4
</li></ul>
</div>

ohne IE wäre das Leben viel zu einfach, meint sehr, sehr ernst mts

Ebenfalls informativ und lesenswert

2 Kommentare zu “bei der Liste im Menü fehlt beim ersten Punkt der Rand unten – aber nur im IE

  1. Webagentur

    Wirklich schöner Artikel. Aber was bedeutet in CSS das white-space?

    edit von mts
    typo3-agentur.typo3-fanworld.de

  2. mts

    Hi Webagentur,

    eine Webagentur zumindest marketingtechnisch zu vertreten und dann eine der Basics von CSS zu erfragen finde ich sehr mutig: :zwinker:

    Hier die Erklärung für white-space:

    Textumbruch: white-space

    Diese Eigenschaft gibt es seit Version CSS 1

    Durch white-space wird bestimmt, wie im Quelltext enthaltene Zeilenumbrüche und Leerzeichen im Browser dargestellt werden. Die Werte »normal«, »pre« und »nowrap« gibt es seit CSS 1, …

    lg