nicht angemeldet
Problem des IE mit verschachtelten Listen
Hallo,
ich hab ein Problem, das nur beim IE auftaucht, bei Opera und Mozialla funzt es.. Ich hab keine Ahnung woran es liegt, vielleicht hat ja von euch jemand einen Tipp?
html:
Code:
<ul id="menu1">
<li><a href="#">Home</a></li>
<li><a href="#">Leistungen</a></li>
<li id='menuAktiv' ><a href="#">Unternehmen</a></li>
<ul id="menu2">
<li><a href="#">Kompetenzen</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Partner</a></li>
</ul>
<li ><a href="">Referenzen</a></li>
<li ><a href="">Kontakt</a></li>
</ul>
Die Liste selbst wird korrekt dargestellt. Das Problem ist der id-Selektor "menuAktiv". Dieser soll diesem Listenelement einen border-bottom hinzufügen. Bei der 2. Menüebene klappt das auch bei allen Browsern. Nur bei der 1. Ebene setzt der IE den Border nicht unter das einzelne entsprechende Listenelement sondern - sofern vorhanden- unter das letzte Element der nachfolgenden untergeordnete Liste. (also in dem obigen Beispiel wird der Rahmen nicht bei Unternehmen gesetzt sondern unter Partner)
und hier nun der css-code:
Code:
#menu1 { /* Abstand des ganzen nach links */
margin:0px;
padding-left:10px;
}
#menu1 a{
font-family:Verdana, Helvetica,sans-serif;
font-size:1.00em;
font-weight:normal;
color:#FF9933;
text-Decoration: none;
}
ul#menu1 li{
list-style-type: none;
margin-top:15px;
line-height: 1.5em;
padding-left:1px;
}
#menu2 {
margin:0px;
padding-left:15px;
}
#menu2 a{
font-family:Verdana, Helvetica,sans-serif;
font-size:0.85em;
font-weight:normal;
color:#FF9933;
text-Decoration: none;
}
ul#menu2 li{
list-style-type: none;
margin-top: 10px;
padding-left:1px;
line-height: 1.3em;
}
li#menuAktiv {
border-bottom:1px solid #FF9933;
weiß jemand woran das liegt?
-
Hi,
ich hab ein Problem, das nur beim IE auftaucht,
selbst dem IE kannst Du keinen Vorwurf machen, wenn er auf invaliden Code nicht so reagiert, wie Du es Dir wünschst.
vielleicht hat ja von euch jemand einen Tipp?
Den gleichen wie immer: Validiere _zuerst_ Deine Codes.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Hallo,
ich hab ein Problem, das nur beim IE auftaucht, bei Opera und Mozialla funzt es.. Ich hab keine Ahnung woran es liegt, vielleicht hat ja von euch jemand einen Tipp?ist das was du erreichen wolltest? (Siehe den angepassten Code unten)
Die ungeordnete Liste innerhalb der ausgeführten Liste darf nicht einfach so sthen. Die musst du auch innerhalb einer Liste einfügen, sonst weißt der IE nicht was erdamit anfangen soll.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenannt</title>
<style>#menu1 { /* Abstand des ganzen nach links */
margin:0px;
padding-left:10px;
}#menu1 a{
font-family:Verdana, Helvetica,sans-serif;
font-size:1.00em;
font-weight:normal;
color:#FF9933;
text-Decoration: none;}
ul#menu1 li{
list-style-type: none;
margin-top:15px;
line-height: 1.5em;
padding-left:1px;}
#menu2 {
margin:0px;
padding-left:15px;
}
#menu2 a{
font-family:Verdana, Helvetica,sans-serif;
font-size:0.85em;
font-weight:normal;
color:#FF9933;
text-Decoration: none;}
ul#menu2 li{
list-style-type: none;
margin-top: 10px;
padding-left:1px;
line-height: 1.3em;
}li#menuAktiv {
border-bottom:1px solid #FF9933;
}</style>
</head><body>
<ul id="menu1">
<li><a href="#">Home</a></li>
<li><a href="#">Leistungen</a></li>
<li id="menuAktiv"><a href="#">Unternehmen</a></li>
<li style="margin-top:-20px; padding-top:0;"> <!-- das ist die neue Liste mit den neuen CSS-Angaben. Für die musst du eine Klassen oben defenieren anstelle von den Inline-Style die ich hier habe -->
<ul id="menu2">
<li><a href="#">Kompetenzen</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Partner</a></li>
</ul>
</li> <!-- hier geht die neu Liste zu -->
<li><a href="">Referenzen</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</body>
</html>Gruß
Messmar-
Hallo Messmar,
den Fehler im HTML-Code hatte ich völlig übersehen, war so fixiert auf die CSS .. Wenn ich den Fehler gleich entdeckt hätte, wäre es leichter gewesen. Wie auch immer, ich hab dann heute nacht schon eine Lösung gefunden, nachdem ich den Fehler behoben hatte. Aber ich werde mir deine Lösung auch nochmal anschauen, vom Ergebnis her ist es das, was ich wollte. Deine Lösung scheint eleganter zu sein. Danke!
Grüße
Alisha
-