nicht angemeldet
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
Gernot Back