WebDesign by mts

Startseite » Webdesign Tutorial » CSS » bei der Liste im Menü fehlt beim ersten Punkt der Rand unten – aber nur im IE

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

in CSS, von mts

Der IE zeigt den Border nicht an, da fehlt ein Listenpunkt im IE wieso. Was kann ich dagegen tun?

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.

“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

in Browser
border-bottom ist zu sehen

im IE
border-bottom fehlt bei Home

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.

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>

Basis Know-how CSS
Internetmarketing

• CSS Tipp: Trennstriche in der Navigation mittels Border
• da eine Box zum Aufklappen - dort auch eine - JS benutzerfreundlich für Mensch und Maschine - nützliche Ressourcen
• Bilder und der Internet Explorer

Top

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