nicht angemeldet
Wie kann ich verschachtelte Listen in IE 6.x und Firefox gleich darstellen?
0 
Gernot Back
0
Wie kann ich verschachtelte Listen in IE 6.x und Firefox gleich darstellen?
Hallo zusammen,
ich habe mir mit verschachtelten unordered lists eine Navigation über drei Ebenen hinweg aufgebaut und diese mit CSS gestaltet.
Das XHTML ist validiert und auch das CSS findet bei automatischen Tests keine Beanstandung. Firefox stellt die Navigation so dar wie ich es will (und auch denke das es richtig ist) und IE 6.x leider nicht.
Der Darstellungsfehler in IE zeigt sich folgendermaßen:
Die vertikalen Abstände der Links stimmen innerhalb eines <ul></ul> Blocks. Öffne ich dann eine weitere Ebene, stimmen die vertikalen Abstände der Links innerhalb dieser Liste auch, aber die ganze, geschachtelte Liste ist um einen bestimmten vertikalen Abstand nach unten gerückt.
Für mich sieht das so aus, als ob das öffnende <li> vor dem zweiten oder dritten <ul> da noch mit reinspielt. Um Seiteneffekte auszuschließen habe ich meine Navigation in einer separaten XHTML isoliert. Das Problem besteht immer noch und ich habe keine Ahnung woran ich jetzt 'drehen' könnte, damit ich das in den Griff kriege.
Hier ist meine Beispieldatei:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>Leistungen</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
a {text-decoration:none; }
a:link {color:#000000; }
a:visited {color:#000000; }
a:hover {color:#A87128; }
a:active {color:#A87128; }
a:focus {color:#A87128; }
body {margin:0px; padding:0px; font-family:Verdana,sans-serif; font-size: 100.01%; }
div {width:245px; height:100%; font-size:70%; line-height:170%; }
ul {margin:0px; padding:0px; list-style-type:none; background-color:#DCBC75; }
ul li {font-weight:bold; border-top:1px solid #EEDEC8; }
ul li a {display:block; width:100%; }
ul li ul li {border:none; background-color:#E9D6AA}
ul li ul li a {font-weight:normal; width:90%; padding-left:10%; }
ul li ul li ul li {list-style:none; background-color:#F3EEE4}
ul li ul li ul li a {width:80%; padding-left:20%; }
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">Ebene 1</a></li>
<li>
<ul>
<li><a href="#">Ebene 2</a></li>
<li><a href="#">Ebene 2</a></li>
<li><a href="#">Ebene 2</a></li>
<li>
<ul>
<li><a href="#">Ebene 3</a></li>
<li><a href="#">Ebene 3</a></li>
<li><a href="#">Ebene 3</a></li>
</ul>
</li>
<li><a href="#">Ebene 2</a></li>
<li><a href="#">Ebene 2</a></li>
<li><a href="#">Ebene 2</a></li>
<li><a href="#">Ebene 2</a></li>
</ul>
</li>
<li><a href="#">Ebene 1</a></li>
<li><a href="#">Ebene 1</a></li>
<li><a href="#">Ebene 1</a></li>
<li><a href="#">Ebene 1</a></li>
<li><a href="#">Ebene 1</a></li>
</ul>
</div>
</body>
</html>
Ich sage schon mal vielen Dank!
Patrick
-
Hallo Patrick,
Der Darstellungsfehler in IE zeigt sich folgendermaßen:
Die vertikalen Abstände der Links stimmen innerhalb eines <ul></ul> Blocks. Öffne ich dann eine weitere Ebene, stimmen die vertikalen Abstände der Links innerhalb dieser Liste auch, aber die ganze, geschachtelte Liste ist um einen bestimmten vertikalen Abstand nach unten gerückt.Für mich sieht das so aus, als ob das öffnende <li> vor dem zweiten oder dritten <ul> da noch mit reinspielt.
Richtig, entferne die leeren List-Items:
<ul>
<li><a href="#">Ebene 1</a></li>hier^^^^^
<li>
hier^^^^^
<ul>
<li><a href="#">Ebene 2</a></li>
<li><a href="#">Ebene 2</a></li>
<li><a href="#">Ebene 2</a></li>hier^^^^^
<li>
hier^^^^^
<ul>
<li><a href="#">Ebene 3</a></li>...
Die Liste der zweiten Ebene ist doch komplett Element eines List-Items der ersten Ebene, die der dritten Ebene Element eines solchen der zweiten usw.
Gruß Gernot
-
Hallo Gernot,
»» »» Der Darstellungsfehler in IE zeigt sich folgendermaßen:
»» »» Die vertikalen Abstände der Links stimmen innerhalb eines <ul></ul> Blocks. Öffne ich dann eine weitere Ebene, stimmen die vertikalen Abstände der Links innerhalb dieser Liste auch, aber die ganze, geschachtelte Liste ist um einen bestimmten vertikalen Abstand nach unten gerückt.
»»
»» »» Für mich sieht das so aus, als ob das öffnende <li> vor dem zweiten oder dritten <ul> da noch mit reinspielt.
»»
»» Richtig, entferne die leeren List-Items:
»»
»»
»» »» <ul>
»» »» <li><a href="#">Ebene 1</a></li>
»» hier^^^^^
»» »» <li>
»» hier^^^^^Anfangs hatte ich das auch so, aber der XHTML Validator hat sich immer beschwert, das dies so ungültiges XHTML sei.
Spinnt der Validator oder komme ich nicht umhin, "invalid XHTML strict" hinzunehmen wenn ich das will?
»» Die Liste der zweiten Ebene ist doch komplett Element eines List-Items der ersten Ebene, die der dritten Ebene Element eines solchen der zweiten usw.
Ja, dachte ich auch... :(
Gruß,
p@rick
-
Hallo Patrick,
<ul>
<li><a href="#">Ebene 1</a></li>
hier^^^^^
<li>
hier^^^^^Anfangs hatte ich das auch so, aber der XHTML Validator hat sich immer beschwert, das dies so ungültiges XHTML sei.
Bei mir ging das nach entfernen der mit hier^^^^^ markierten Teile mit Ausnahme eines META-Tags, bei dem du den schließenden / vergessen hattest glatt durch.
Komischerweise hat der CSS-Validator dann über eine Sache gemeckert, die ihn meines Erachtens gar nichts angeht:
[http://jigsaw.w3.org/css-validator/]
Line: 8
Parse error - Unrecognized : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de"> <head> <title>Leistungen</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css"/> <style type="text/css"> a {text-decoration:none; }Gruß Gernot
-
Hallo Gernot,
<ul>
<li><a href="#">Ebene 1</a></li>
hier^^^^^ARGH...
<li>
hier^^^^^
Bei mir ging das nach entfernen der mit hier^^^^^ markierten Teile mit Ausnahme eines META-Tags, bei dem du den schließenden / vergessen hattest glatt durch.Du hast recht. Ich hatte nicht genau hingesehen.
Danke!
p@rick
-
-
-