(IE5) Einrückungsproblem in <ul>
0 
Felix Riesterer
0
(IE5) Einrückungsproblem in <ul>
Hallo zusammen,
ich habe festellen müssen, dass eine ungeordnete Liste, die ich zum Anzeigen einer Navigation verwende, im IE6 (Win) zwar korrekt aussieht, im IE5 (Win) sind die Texte innerhalb der <li>'s aber leider deutlich nach rechts gerückt (obwohl padding, margin und text-indent auf 0). Hier der auf's Wesentliche reduzierte Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Navigation</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<meta name="MSSmartTagsPreventParsing" content="true">
<style type="text/css">
body {font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:11px;}
ul {list-style:none;margin:0;padding:0;width:171px;border:solid #999;border-width:0 0 1px 0;}
ul li ul {border:none;}
li {padding:0;margin:0;}
ul li {background:#999;color:#fff;font-weight:bold;text-indent:4px;line-height:19px;}
ul li ul li {text-indent:0px;background:#eee;border:solid #999;;border-width:1px 2px 1px 2px;color:#555;font-weight:normal;padding-left:2px;line-height:15px;margin-top:-1px}
ul li ul li strong {font-weight:bold;letter-spacing:-1px;}
ul li ul li.narrow {letter-spacing:-1px;}
ul li ul li a {display:block;width:100%;color:#000;text-decoration:none;margin-left:-2px;padding-left:2px;}
ul li ul li a:hover {background:#000;color:#fff;}
</style>
<body>
<h1>IE 5.0 - Problem</h1>
<ul>
<li class="chat">Kuchen
<ul>
<li><a href="apfelkuchen.html" title="Hier gibt's Apfelkuchen!">Apfelkuchen</a></li>
<li><a href="pflaumenkuchen.html" title="Hier gibt's Pflaumenkuchen!">Pflaumenkuchen</a></li>
<li><a href="birnenkuchen.html" title="Hier gibt's Birnenkuchen!">Birnenkuchen</a></li>
</ul>
</li>
<li class="chat">Torte
<ul>
<li><a href="apfeltorte.html" title="Hier gibt's Apfeltorte!">Apfeltorte</a></li>
<li><a href="pflaumentorte.html" title="Hier gibt's Pflaumentorte!">Pflaumentorte</a></li>
<li><a href="birnentorte.html" title="Hier gibt's Birnentorte!">Birnentorte</a><br>nach <br> geht's?!</li>
</ul>
</li>
</ul>
</body>
</html>
Leider konnte ich das Problem trotz vielen Rumprobierens nicht beheben. Hat jemand eine Idee, was ich falsch gemacht haben könnte bzw. wie dem Problem beizukommen ist?
P.S.: Nach einem Umbruch innerhalb des <li>'s (egal, ob per <br> oder automatisch wegen Überlänge) ist die unerwünschte Einrückung dann verschwunden - seltsam!
Danke und Gruß,
Mirko
-
Liebe(r) Mirko42,
im IE5 (Win) sind die Texte innerhalb der <li>'s aber leider deutlich nach rechts gerückt (obwohl padding, margin und text-indent auf 0).
Hast Du schon einmal list-style-position ausprobiert?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo Mirko,
Leider konnte ich das Problem trotz vielen Rumprobierens nicht beheben. Hat jemand eine Idee, was ich falsch gemacht haben könnte bzw. wie dem Problem beizukommen ist?
Ähnlich wie bei Listen Menu CSS für alle Browser scheint float zu helfen: li{float:left}
Wahrscheinlich gibt es noch andere Lösungen, hast du schon im Archiv gesucht?
Grüsse
Cyx23