nicht angemeldet
IE macht Lücken in Liste
0 
Auge
0 0 0
IE macht Lücken in Liste
Hallo,
ich habe eine Listennavigation mit CSS formatiert. Leider ist die Darstellung im Internet Explorer falsch. Es sind verschieden große Lücken in den li-Elementen. Beim hovern wird das Problem deutlicher. Ich habe mich schon nach einer Lösung informiert, jedoch klappt das Entfernen der Zeilenumbrüche nicht.
Hier der HMTL-CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="navibox">
<h5>Navigation</h5>
<ul class="navi">
<li><span> <a href="index.php?section=x" id="ueberuns">Über uns</a></span>
<ul class="submenue">
<li><a href="index.php?section=a" id="asdfsdf">asdfsdf</a></li>
<li><a href="index.php?section=b" id="asdfsdf">asdfsdf</a></li>
<li><a href="index.php?section=c" id="asdfsdf">asdfsdf</a></li>
<li><a href="index.php?section=d" id="asdfsdf">asdfsdf</a>
</ul>
</li>
<li><span> <a href="index.php?section=e" id="asdfsdf">asdfsdf</a></span>
<ul class="submenue">
<li><a href="index.php?section=f" id="asdfsdf">asdfsdf</a></li>
</ul>
</li>
<li><span> <a href="index.php?section=g" id="asdfsdf"> asdfsdf </a></span></li>
<li><span> <a href="index.php?section=h" id="asdfsdf">asdfsdf</a></span>
<ul class="submenue">
<li><a href="index.php?section=i" id="asdfsdf">asdfsdf</a></li>
<li><a href="index.php?section=j" id="asdfsdf">asdfsdft</a></li>
<li><a href="index.php?section=k" id="asdfsdf">asdfsdf</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
der CSS-Code:
html,body {
margin:0;
padding:0;
}
#navibox {
width: 170px;
background: url(images/navibg.jpg) #B7CAD5;
}
h5 {
height: 15px;
margin:0;
padding:0;
padding-left: 3px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;
color: #ffffff;
line-height: 15px;
background: #6E95AA;
}
ul.navi, ul.submenue {
margin:0;
padding:0;
list-style-type:none;
}
ul.navi li {
margin:0;
padding:0;
border-top: 1px solid #ffffff;
}
.navi span {
padding-left: 5px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
}
ul.navi span a:link {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
ul.navi span a:visited {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
ul.navi span a:hover {
text-decoration: underline;
}
ul.submenue li {
margin:0;
padding:0;
height: 14px;
border-top: 1px solid #ffffff;
}
ul.submenue li a:link {
padding-left: 25px;
display:block;
height:14px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-decoration: none;
}
ul.submenue li a:visited {
padding-left: 25px;
display:block;
height:14px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-decoration: none;
}
ul.submenue li a:hover {
background-color: red;
}
-
Hallo
ich habe eine Listennavigation mit CSS formatiert. Leider ist die Darstellung im Internet Explorer falsch. Es sind verschieden große Lücken in den li-Elementen. Beim hovern wird das Problem deutlicher. Ich habe mich schon nach einer Lösung informiert, jedoch klappt das Entfernen der Zeilenumbrüche nicht.
Wieso klappt das nicht?
<!-- entweder --> <ul><li><a href="#">bla</a></li><li><a href="#">blubb</a></li></ul> <!-- oder --> <ul><!-- --><li><a href="#">bla</a></li><!-- --><li><a href="#">blubb</a></li><!-- --></ul>Hat bei mir jedenfalls bisher immer geklappt, auch wenn es bisweilen unübersichtlich wirkt.
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1-
Also bei mir klappt es trotzdem nicht. Hast du es denn bei dir getestet ?
Hallo
ich habe eine Listennavigation mit CSS formatiert. Leider ist die Darstellung im Internet Explorer falsch. Es sind verschieden große Lücken in den li-Elementen. Beim hovern wird das Problem deutlicher. Ich habe mich schon nach einer Lösung informiert, jedoch klappt das Entfernen der Zeilenumbrüche nicht.
Wieso klappt das nicht?
<!-- entweder -->
<ul><li><a href="#">bla</a></li><li><a href="#">blubb</a></li></ul>
<!-- oder -->
<ul><!--
--><li><a href="#">bla</a></li><!--
--><li><a href="#">blubb</a></li><!--
--></ul>> > Hat bei mir jedenfalls bisher immer geklappt, auch wenn es bisweilen unübersichtlich wirkt. > > Tschö, Auge >
-
-
Privit!
Das Problem kenne ich. Versuch mal folgendes:
Setze überall bei solchen Listenpunkten:<li><a href="index.php?section=f" id="asdfsdf">asdfsdf</a></li>
ein Leerzeichen vor »</a></li>«. Ich weiß, das klingt zum Schreien absurd, aber bei mir hat es mal geholfen. ;-)
Viele Grüße vom Længlich
-
ich tippe mal blind:
Da du in CSS keinen margin für <ul> und <li> definierst, sind die halt unterschiedlich.
Immer nach <ul> würde ich die Lücke vermuten.
Kalle
-
Hallo Franzmann
google mal nach whitespace bug
Ich hatte das problem auch und bei mir hat ein
li { /*Hack fuer den whitespace bug*/ float:left; clear:left; }geholfen (über conditional comments speziell nur für den IE eingebunden)
Leider finde ich die Seite nicht mehr, wo das vorgeschlagen wurde...
Ist auch ziemlich krass, dass so ein "Schwachsinn" hilft, aber bei mir war es so.Liebe Grüße mbr