nicht angemeldet
Hover im IE
Ich versuche gerade ein kleines Menu zu basteln.
Wenn ich auf einen Link gehe soll die dahinterliegende Grafik wechseln.
Das ganz ohne mouseover nur via hover.
Bisher sieht das so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css" media="screen">
<!--
#hmenu li a { color: #808080; text-decoration: none; }
#hmenu li a img { margin-left: 76px; width: 66px; height: 66px; display: inline; }
#hmenu li a:hover img { display: none }
#hmenu li a span img {display: none }
#hmenu li a:hover span img { margin-left: 76px; width: 66px; height: 66px; display: inline; }
-->
</style>
</head>
<body bgcolor="#ffffff">
<div id="hmenu">
<ul>
<li>
<a href="#">link1
<img src="http://www.decoramik.at/bilder/katalog/1030.jpg">
<span><img src="http://www.decoramik.at/bilder/katalog/1032.jpg"></span>
</a>
<li>
<a href="#">link2
<img src="http://www.decoramik.at/bilder/katalog/1031.jpg">
<span><img src="http://www.decoramik.at/bilder/katalog/1033.jpg"></span>
</a>
<li>
<a href="#">link3
<img src="http://www.decoramik.at/bilder/katalog/1034.jpg">
<span><img src="http://www.decoramik.at/bilder/katalog/1030.jpg"></span>
</a>
</ul>
</div>
</body>
</html>
Der Code läuft bei Firefox auch einwandfrei. Beim IE hingegen sehe ich immer nur die erste Grafik. Die zweite taucht beim hovern nicht auf.
Ich habe das ganze auch schon mit visibility probiert ... kein Erfolg.
Was mache ich falsch?
-
hi,
Der Code läuft bei Firefox auch einwandfrei. Beim IE hingegen sehe ich immer nur die erste Grafik. Die zweite taucht beim hovern nicht auf.
</archiv/2007/1/t143759/#m933849>
</archiv/2006/2/t123938/#m798123>gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo,
erstmal vielen Dank für die Antworten.
@wahsaga
simple hover eigenschaft ändern bringt es!
firefox ist soweit sehr schick
ie - neue frage:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css" media="screen">
<!--#hmenu li a { text-decoration: none; background-color: #ffffff }
#hmenu li a img { vertical-align: middle; margin-left: 76px; border: 0px; width: 66px; height: 66px }
#hmenu li a img.popup { display: none; }
#hmenu li a:hover img.nopop { display: none; }
#hmenu li a:hover img.popup { display: inline; }
#hmenu li a:hover {background-color: #fff; }-->
</style></head>
<body background-color: #fff;>
<div id="hmenu">
<ul>
<li>
<a href="#">Link
<img class="nopop" src="http://www.decoramik.at/bilder/katalog/1030.jpg" />
<img class="popup" src="http://www.decoramik.at/bilder/katalog/1032.jpg" />
</a>
</li><li>
<a href="#">Link
<img class="nopop" src="http://www.decoramik.at/bilder/katalog/1030.jpg" />
<img class="popup" src="http://www.decoramik.at/bilder/katalog/1032.jpg" />
</a>
</li></ul>
</div></body>
</html>
Wieso springt das class="popup" Bild beim Hovern im IE ein paar pixel nach rechts?? Und Bonusfrage: Kann ich das verhindern? Wenn ja, wie?
Gruß Loco
hi,
Der Code läuft bei Firefox auch einwandfrei. Beim IE hingegen sehe ich immer nur die erste Grafik. Die zweite taucht beim hovern nicht auf.
</archiv/2007/1/t143759/#m933849>
</archiv/2006/2/t123938/#m798123>gruß,
wahsaga -
btw:
#hmenu li a:hover img.popup { display: inline; _margin-left: 72px; }
geht natürlich, würde ich aber ungern verwenden.
gibt es eine andere lösung?
hi,
Der Code läuft bei Firefox auch einwandfrei. Beim IE hingegen sehe ich immer nur die erste Grafik. Die zweite taucht beim hovern nicht auf.
</archiv/2007/1/t143759/#m933849>
</archiv/2006/2/t123938/#m798123>gruß,
wahsaga
-
-
Hi loco!
Was mache ich falsch?
Du hast einen völlig falschen Ansatz.
Dein HTML ist überladen.
Statt<li>
<a href="#">link1
<img src="http://www.decoramik.at/bilder/katalog/1030.jpg">
<span><img src="http://www.decoramik.at/bilder/katalog/1032.jpg"></span>
</a>wäre
<li> <a href="#">link1</a> </li>besser.
Beachte außerdem: "Es ist zwar nach HTML-Standard erlaubt, das abschließende </li>-Tag wegzulassen, doch davon ist abzuraten." [Listen]Formatiere die Links nun mit CSS. Einige Stichworte: display, background, hover, width, height.
Wenn du noch Fragen hast, dann kannst du die natürlich vertrauensvoll hier stellen. ;-)
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:) -
Hallo!
<body bgcolor="#ffffff">
Wenn du schon so toll mit CSS arbeitest, dann mach das doch auch noch gleich :)
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_color
ciao, ww
--
Schäuble:
"Wir können alles. Außer Rechtsstaat."