Fehlerhafter 1 Pixel Abstand im IE bei Liste
0 
Dieter Raber
0 0 Dieter Raber
0
Fehlerhafter 1 Pixel Abstand im IE bei Liste
Hallo Forum,
Ich habe eine Navigation per CSS formatiert. Dabei taucht ein Fehler auf. Im IE wird nach jedem "li" Element ein Pixel Abstand eingefügt, der da nicht hin soll (der grüne Hintergrund scheint durch). Im FF sieht das Ganze korrekt aus. Kann mir jemand erklären, wo dieser Pixel herkommt, und wie ich ihn beseitigen kann?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>1 Pixel</title>
<style type="text/css">
<!--
#navigationsliste{
background-color:#00FF00;
}
ul{
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}
#navigationsliste ul {
margin: 0;
padding: 0;
width: 150px;
list-style: none;
background-color: #FBF6E7;
display:none;
}
#navigationsliste a {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
color:#434193;
text-decoration: none;
border-bottom: 1px solid #E44236;
padding: 8px 20px 8px 0;
width: 130px;
text-align: right;
background-color: #FBF6E7;
}
#navigationsliste a:hover {
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<ul id="navigationsliste">
<li><a href="de/4/index.html">Das Unternehmen</a></li>
<li><a href="de/5/index.html">Betreutes Wohnen Seniorenwohnungen</a></li>
<li><a href="de/6/index.html">Häusliche Pflege</a></li>
<li><a href="de/7/index.html">Hausnotruf</a></li>
<li><a href="de/8/index.html">Service & Infos</a></li>
<li><a href="de/9/index.html">Aktuelles</a></li>
<li><a href="de/10/index.html">Jobbörse</a></li>
</ul>
</body>
</html>
vielen Dank!
Gruß,
Dwarf
-
Hallo action,
<li><a href="de/7/index.html">Hausnotruf</a></li>
Fuege vor dem schliessenden </a> ein Leerzeichen ein, also
<li><a href="de/7/index.html">Hausnotruf </a></li>Gruß,
Dieter
-
Hallo Dieter,
ich habe deinen Ratschlag angewandt, aber der Fehler besteht nach wie vor .. oder habe ich doch was falsch gemacht .. ? Habe IE 6. Hier der neue Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>1 Pixel</title>
<style type="text/css">
<!--
#navigationsliste{
background-color:#00FF00;
}
ul{
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}
#navigationsliste ul {
margin: 0;
padding: 0;
width: 150px;
list-style: none;
background-color: #FBF6E7;
display:none;
}
#navigationsliste a {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
color:#434193;
text-decoration: none;
border-bottom: 1px solid #E44236;
padding: 8px 20px 8px 0;
width: 130px;
text-align: right;
background-color: #FBF6E7;
}
#navigationsliste a:hover {
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<ul id="navigationsliste">
<li><a href="de/4/index.html">Das Unternehmen </a></li>
<li><a href="de/5/index.html">Betreutes Wohnen Seniorenwohnungen </a></li>
<li><a href="de/6/index.html">Häusliche Pflege </a></li>
<li><a href="de/7/index.html">Hausnotruf </a></li>
<li><a href="de/8/index.html">Service & Infos </a></li>
<li><a href="de/9/index.html">Aktuelles </a></li>
<li><a href="de/10/index.html">Jobbörse </a></li>
</ul>
</body>
</html>Gruß,
Sascha-
Hallo action,
Du bist mit deinem Stylesheet etwas durcheinander geraten, vermute ich mal, genauer gesagt mit den Eigenschaften von ul
das ist die Liste zum ersten:
#navigationsliste{
background-color:#00FF00;
}das zum zweiten:
ul{
margin: 0;
padding: 0;
}das hier eine Liste unterhalb der Navigation, du wolltest aber anscheinend ul#navigationsliste {}
#navigationsliste ul {
[...]
display:none; <-- das war wohl eher eine Verzweifelungstat
}Zusammengefasst und korrigiert ist deine Liste jetzt:
ul#navigationsliste {
margin: 0;
padding: 0;
width: 150px;
list-style: none;
background-color:#00FF00;
}Sie hat jetzt auch eine feste Breite, die du bei a { display:block } demnach nicht mehr brauchen wirst, Aus a {} wird demnach:
#navigationsliste a {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
color:#434193;
text-decoration: none;
border-bottom: 1px solid #E44236;
padding: 8px 20px 8px 0;
text-align: right;
background-color: #FBF6E7;
}Und dann klappt's auch mit der Nachbarin ;-)
Gruß,
Dieter
-
Hallo Dieter!
Vielen Dank, dass sieht doch sehr gut aus! Ich werde mir dein CSS nochmal genau anschauen um nachzuvollziehen, was genau ich da durcheinander gebracht habe.
display:none; <-- das war wohl eher eine Verzweifelungstat
Hups, das war noch drin? *hust* War in der Tat ein Akt der Verzweiflung ^^
Gruß,
Sascha
-
-
Hallo Sascha,
eine Möglichkeit beim IE Listen nachzubessern ist float, z.B.:
ul li a{float:left} li{clear:left}Andere elegantere Möglichkeiten könnten sich durch Grössen- und
Abstandsangaben oder auch line-height usw. ergeben, denn bei den
floatenden Links ist die Listenhöhe bzw. der grüne Hintergrund etwas
kurz geraten...Grüsse
Cyx23
-
-