nicht angemeldet
Kurioses hover-Problem bei float/clear
Liebes Forum!
Ich habe ein ul-Liste gemacht, weiter unten ist der Code (hier aufs Problem reduziert). Wenn man mit dem IE6 über das li-Element "Akkus" hovert, dann springt dieses Element um eine Fingerbreite nach oben! Das Problem tritt weder beim aktuellen Opera noch beim Mozilla auf. Ich knabbere an dem Problem schon 2 Tage >> Hilfe!
Beste Grüße
Viennamade
<style type="text/css">
<!--
ul.list{list-style-type:none; }
ul.list li a{display:block;width:140px; }
ul.list a:link{ border:1px solid #d5e7ec;}
ul.list a:visited{border:1px solid #d5e7ec;}
ul.list a:hover{border:1px solid #008996;}
ul.list a:active{border:1px solid #d5e7ec;}
-->
</style>
</head>
<body>
<ul class="list">
<li><a href="start.html">Home</a>
<ul style="list-style-type:none; padding-left:0px">
<li><a href="#">Produkte</a>
<ul>
<li><a href="#">Batterien</a>
<ul>
<li style="float:left;display:inline; "><a href="#">Knopfzellen</a></li>
</ul></li>
<li style="margin-top:20px;padding-top:20px;clear:left;"><a href="#">Akkus</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
-
Hallo,
Ich habe ein ul-Liste gemacht, weiter unten ist der Code (hier aufs Problem reduziert). Wenn man mit dem IE6 über das li-Element "Akkus" hovert, dann springt dieses Element um eine Fingerbreite nach oben!
Wenn ich deinen Code ausprobiere (IE 6.0.28xx), passiert bei mir der Fehler nicht.
Grüße
Thomas-
Hallo,
Wenn ich deinen Code ausprobiere (IE 6.0.28xx), passiert bei mir der Fehler nicht.
Ich hab auch diese Version (IE 6.0.2800.1106). Na, da bekommt das Wort "Kurios" im Betreff noch mehr Bedeutung.
Danke fürs ausprobieren.
Viennamade-
Hallo,
Poste doch mal einen Link zu deiner Seite hier. Vieleicht können wir dir dann helfen.
Grüße
<img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">--
"Of course it does not work, but look how fast it is!"-
Poste doch mal einen Link zu deiner Seite hier.
http://www.haan.at/pc/sitemap.html
Das springende Listenelement heißt "Sonderoptik".Vieleicht können wir dir dann helfen.
Ja bitte!
Viennamade-
Hallo.
Das springende Listenelement heißt "Sonderoptik".
Nomen est omen ;-)
MfG, at
-
-
-
-
-
Ich habe ein ul-Liste gemacht, weiter unten ist der Code (hier aufs Problem reduziert). Wenn man mit dem IE6 über das li-Element "Akkus" hovert, dann springt dieses Element um eine Fingerbreite nach oben!
Häufig hilft es in solchen Fällen, ans Ende der Seite einen div mit clear:both zu setzen.
-
Hallo,
Häufig hilft es in solchen Fällen, ans Ende der Seite einen div mit clear:both zu setzen.
Nein leider, hilft nix :-(
Viennamade
-
-
Hallo,
Ich habe ein ul-Liste gemacht, weiter unten ist der Code (hier aufs Problem reduziert). Wenn man mit dem IE6 über das li-Element "Akkus" hovert, dann springt dieses Element um eine Fingerbreite nach oben! Das Problem tritt weder beim aktuellen Opera noch beim Mozilla auf. Ich knabbere an dem Problem schon 2 Tage >> Hilfe!
Beste Grüße
Viennamade<li style="float:left;display:inline; "><a href="#">Knopfzellen</a></li>
Warum float:left; _und_ display:inline;?
</ul></li>
<li style="margin-top:20px;padding-top:20px;clear:left;"><a href="#">Akkus</a>Margin und padding im LI-Element - Das sieht fast jeder Browser anders.
Probier mal so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Waren</title>
<style type="text/css">
<!--
ul.list {list-style-type:none; }
ul.list a {display:block;width:140px; }
ul.list a:link {border:1px solid #d5e7ec;}
ul.list a:visited {border:1px solid #d5e7ec;}
ul.list a:hover {border:1px solid #008996;}
ul.list a:active {border:1px solid #d5e7ec;}
-->
</style></head>
<body>
<ul class="list">
<li><a href="start.html">Home</a>
<ul style="list-style-type:none; padding-left:0px">
<li><a href="#">Produkte</a>
<ul>
<li style="clear:left;"><a href="#">Batterien</a>
<ul style="list-style-type:none;">
<li style="float:left;"><a href="#">Knopfzellen</a></li>
<li style="float:left;"><a href="#">R6</a></li>
<li style="float:left; margin-bottom:10px;"><a href="#">letzte Batterie</a></li>
</ul>
</li>
<li style="clear:left;"><a href="#">noch'n Artikel</a>
<ul style="list-style-type:none;">
<li style="float:left; margin-bottom:10px;"><a href="#">Test</a></li>
</ul>
</li>
<li style="clear:left;"><a href="#">Akkus</a>
<ul style="list-style-type:none;">
<li style="float:left;"><a href="#">Blei</a></li>
<li style="float:left;"><a href="#">NiCd</a></li>
<li style="float:left;"><a href="#">9V-Block</a></li>
<li style="float:left; margin-bottom:10px;"><a href="#">letzter Akku</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>viele Grüße
Axel
-
hi
[...]
<li><a href="#">Produkte</a>
^^^^^
<ul>
<li style="clear:left;"><a href="#">Batterien</a>^^^^^
<ul style="list-style-type:none;">
<li style="float:left;"><a href="#">Knopfzellen</a></li>
<li style="float:left;"><a href="#">R6</a></li>
<li style="float:left; margin-bottom:10px;"><a href="#">letzte Batterie</a></li>
</ul>
</li>^^^^^
[...]öhm ...
sollten nicht listenelemente geschlossen werden, bevor weitere elemente (<ul>) eingefügt werden?[...]
<li><a href="#">Produkte</a></li>
^^^^^
<ul>
<li style="clear:left;"><a href="#">Batterien</a></li>^^^^^
<ul style="list-style-type:none;">
<li style="float:left;"><a href="#">Knopfzellen</a></li>
<li style="float:left;"><a href="#">R6</a></li>
<li style="float:left; margin-bottom:10px;"><a href="#">letzte Batterie</a></li>
</ul>[...]
grüsse, raik
-
Hallo,
öhm ...
sollten nicht listenelemente geschlossen werden, bevor weitere elemente (<ul>) eingefügt werden?Nein, das Folgende:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Listen</title>
</head>
<body>
<ul>
<li>Listenpunkt 1</li>
<ul>
<li>Unterlistenpunkt 1.1</li>
<li>Unterlistenpunkt 1.2</li>
</ul>
<li>Listenpunkt 2</li>
<ul>
<li>Unterlistenpunkt 2.1</li>
<li>Unterlistenpunkt 2.2</li>
</ul>
</ul>
</body>
</html>ist _falsch_. Im UL-Element dürfen _nur_ LI-Elemente, _nichts_ anderes, stehen.
http://www.w3.org/TR/html4/struct/lists.html#h-10.2Folgendes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Listen</title>
</head>
<body>
<ul>
<!--Start LI-->
<li>Listenpunkt 1
<ul>
<li>Unterlistenpunkt 1.1</li>
<li>Unterlistenpunkt 1.2</li>
</ul>
</li>
<!--Ende LI-->
<!--Start LI-->
<li>Listenpunkt 2
<ul>
<li>Unterlistenpunkt 2.1</li>
<li>Unterlistenpunkt 2.2</li>
</ul>
</li>
<!--Ende LI-->
</ul>
</body>
</html>ist korrekt, weil die UL-Elemente hier im LI-Element stehen. Dort dürfen sie stehen.
viele Grüße
Axel
-
Hi,
sollten nicht listenelemente geschlossen werden, bevor weitere elemente (<ul>) eingefügt werden?
li darf ul enthalten.
Und es soll hier ja die komplette Liste im li (in dem zufällig auch noch ein a drinsteht) enthalten sein.<li><a href="#">Produkte</a></li>
^^^^^
<ul>ul darf aber nicht ul enthalten, sondern nur li.
Du machst also aus einem korrektem Code einen falschen.cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/ -
hallo raik,
öhm ...
sollten nicht listenelemente geschlossen werden, bevor weitere elemente (<ul>) eingefügt werden?Nein, nicht bei verschachtelten Listen, siehe 2. Beispiel unter http://www.selfhtml.net/html/text/listen.htm#aufzaehlung.
Grüße
Viennamade
-
-
-
Hi,
<li style="float:left;display:inline; "><a href="#">Knopfzellen</a></li>
display:inline wird sowieso ignoriert bei float:left. http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float
Ein float:left/right-Element MUSS eine explizite Breite haben. http://www.w3.org/TR/REC-CSS2/visuren.html#floatscu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/ -
Hallo!
1. Funktionierts (juhuu!), 2. Danke.... <a href="#">Akkus</a>
Entsprechend dem Posting von MudGuard habe ich obigem Element eine fixe Breite verpaßt.
Besten Dank
Viennamade