nicht angemeldet
Hover im IE6 funktioniert nicht
0 0 
MudGuard
0 0
Hover im IE6 funktioniert nicht
Hallo,
nachfolgend dank Eurer Hilfe im thread Text mittig neben dem Bild mein Beispiel, das ich um den Hover-Effekt erweitern wollte.
Es funktioniert in den gängigen Browsern, auch IE7 und IE8, aber nicht in IE6 und älter. Dort funktioniert die Anzeige des 2. Bildes nicht und beim Überfahren des Bildes/Textes ändert sich der Cursor nicht zur Hand. Ausserdem flackert der Cursor beim Überfahren des Objekts.
Meine Fragen:
1. Damit es in IE7 funktionierte, musste ich die Zeilen .myIlinks .....
nochmals (unverändert) unter #msie .... angeben.
Warum erkennt der IE nicht die anderen CSS-Angaben?
2. Ist da auch noch ein Hack nötig für IE6 und älter?
Hier das Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
.myIlinks .invers {
display: none;
}
.myIlinks:hover .normal {
display: none;
}
.myIlinks:hover .invers {
display: inline-block;
}
.myIlinks img
{display:inline-block; vertical-align:middle; width:48px; height:40px; border:none;}
.myIlinks span
{display:inline-block; vertical-align:middle;}
#msie .myIlinks img
{zoom:1; display:inline; vertical-align:middle; width:48px;height:40px; border:none;}
#msie .myIlinks span
{zoom:1; display:inline; vertical-align:middle;}
#msie .myIlinks .invers {
display: none;
}
#msie .myIlinks:hover .normal {
display: none;
}
#msie .myIlinks:hover .invers {
display: inline;
}
-->
</style>
</head>
<body>
<!--[if lt IE 8]><div id="msie"><![endif]-->
<p>
<a class="myIlinks" href="http://www.example.com">
<span class="normal"><img src="img1.gif" alt ="">Normalansicht</span>
<span class="invers"><img src="img2.gif" alt ="">Hoveransicht</span>
</a>
</p>
<!--[if lt IE 8]></div><![endif]-->
</body>
</html>
Betr. Doppelposting: Diese Fragen hatte ich noch im o.g. posting gestellt, aber ich denke, dass dies
1. eine ganz andere Themenstellung ist und dass
2. es niemand mehr liest, da das Problem gelöst war.
Vielen Dank für Eure Hilfe und Nachsicht
Benni
-
Arbeite lieber mit Hintergrundbildern als mit diesem seltsamen Konstrukt.
Gruß, LX
--
RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine wunderbar. (...)-
Arbeite lieber mit Hintergrundbildern als mit diesem seltsamen Konstrukt.
mit diesem Konstrukt habe ich mühsam und mit Eurer Hilfe die vertikale Ausrichtung des Textes hinbekommen.
Nach Möglichkeit möchte ich nicht nochmals ganz von vorne anfangen.
Gruß
Benni
-
-
Hi,
Es funktioniert in den gängigen Browsern, auch IE7 und IE8, aber nicht in IE6 und älter.
IE 6 ignoriert, wenn sich innerhalb eines Links etwas bei Hover ändert, solange sich am Link selbst nichts ändert.
Wobei IE 6 es bereits als Änderung betrachtet, wenn z.B. die Hintergrundfarbe sich von white auf #fff ändert oder ähnliche Nicht-Änderungen.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
Es funktioniert in den gängigen Browsern, auch IE7 und IE8, aber nicht in IE6 und älter. Dort funktioniert die Anzeige des 2. Bildes nicht
Der IE 6 ist bekannt dafür, dass er die Änderung der Eigenschaften von Elementen, die Nachfahren eines ge-hover-ten Elementes sind, nur dann umsetzt, wenn auch am ge-hover-ten Element selber eine "Änderung" stattfindet.
Füge also noch eine Regel für den :hover-Zustand des Links selber hinzu, die bspw. die Hintergrundfarbe "ändert" - "ändert" in Anführungszeichen, weil selbst bspw. ein Umformatieren von #fff auf die Lang-Schreibweise #ffffff normalerweise schon hilft.
Einige andere Eigenschaften eignen sich ebenfalls.und beim Überfahren des Bildes/Textes ändert sich der Cursor nicht zur Hand.
Dann füge noch cursor:pointer hinzu.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak. -
Hallo Ihr beiden Helfer,
obwohl Eure Erklärung trivial erscheint, habe ich sie wohl doch nicht verstanden.
Ich habe das Beispiel ergänzt um:.myIlinks:hover {
color:#000000;
}
und
<a class="myIlinks" href="http://www.example.com">
ersetzt durch
<a class="myIlinks" href="http://www.example.com" style="color:black;">Allerdings ohne Erfolg.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> <!-- .myIlinks .invers { display: none; } .myIlinks:hover .normal { display: none; } .myIlinks:hover .invers { display: inline-block; } .myIlinks img {display:inline-block; vertical-align:middle; width:48px; height:40px; border:none;} .myIlinks span {display:inline-block; vertical-align:middle;} #msie .myIlinks img {zoom:1; display:inline; vertical-align:middle; width:48px;height:40px; border:none;} #msie .myIlinks span {zoom:1; display:inline; vertical-align:middle;} #msie .myIlinks .invers { display: none; } #msie .myIlinks:hover { color:#000000; } #msie .myIlinks:hover .normal { display: none; } #msie .myIlinks:hover .invers { display: inline; } --> </style> </head> <body> <!--[if lt IE 8]><div id="msie"><![endif]--> <p> <a class="myIlinks" href="http://www.example.com" style="color:black;"> <span class="normal"><img src="img1.gif" alt ="">Normalansicht</span> <span class="invers"><img src="img2.gif" alt ="">Hoveransicht</span> </a> </p> <!--[if lt IE 8]></div><![endif]--> </body> </html>Gruß
Benni-
Hi,
obwohl Eure Erklärung trivial erscheint, habe ich sie wohl doch nicht verstanden.
Ich habe das Beispiel ergänzt um:.myIlinks:hover {
color:#000000;
}
und
<a class="myIlinks" href="http://www.example.com">
ersetzt durch
<a class="myIlinks" href="http://www.example.com" style="color:black;">Allerdings ohne Erfolg.
Warum schreibst du die Textfarbe per style-Attribut in den Link rein?
Selbst das funktioniert in meinem Test zwar, aber eigentlich war gemeint, für a:link und a:hover unterschiedliche Formatierungen anzugeben.Und hast du auf die Reihenfolge der Deklarationen geachtet?
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hi,
Und hast du auf die Reihenfolge der Deklarationen geachtet?
Autsch! Das ist auch noch relevant!?
Dann werde ich mal schauen.
Gruß
Benni -
Hi,
Du schreibstfür a:link und a:hover unterschiedliche Formatierungen
Diese existieren aber doch gar nicht in meinem Beispiel.
Ich habe sie daher ergänzt (absichtlich mit unterschiedlichen Farben) und auch die Reihenfolge (hoffentlich richtig) geändert. Aber es funktioniert nach wie vor nicht.
Wenn ich das Bild überfahre, bleibt dieses unverändert und der Text "Normalansicht" verschwindet.
Wenn ich den Text überfahre, flackert dieser bzw. wenn ich den Cursor auf ihm nicht mehr bewege verschwindet er auch.Hier das korrigierte Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> <!-- .myIlinks img {display:inline-block; vertical-align:middle; width:48px;height:40px; border:none;} .myIlinks span {display:inline-block; vertical-align:middle;} .myIlinks .invers {display: none;} .myIlinks:hover .normal {display: none;} .myIlinks:hover .invers {display: inline-block;} #msie .myIlinks img {zoom:1; display:inline; vertical-align:middle; width:48px;height:40px; border:none;} #msie .myIlinks span {zoom:1; display:inline; vertical-align:middle;} #msie a:link {color: green;} #msie a:hover {color: black;} #msie .myIlinks .invers {display: none;} #msie .myIlinks:hover .normal {display: none;} #msie .myIlinks:hover .invers {display: inline;} --> </style> </head> <body> <!--[if lt IE 8]><div id="msie"><![endif]--> <p> <a class="myIlinks" href="http://www.example.com"> <span class="normal"><img src="img1.gif" alt ="">Normalansicht</span> <span class="invers"><img src="img2.gif" alt ="">Hoveransicht</span> </a> </p> <!--[if lt IE 8]></div><![endif]--> </body> </html>-
Hi,
für a:link und a:hover unterschiedliche Formatierungen
Diese existieren aber doch gar nicht in meinem Beispiel.Na ja, sollten aber.
Ich habe sie daher ergänzt (absichtlich mit unterschiedlichen Farben) und auch die Reihenfolge (hoffentlich richtig) geändert. Aber es funktioniert nach wie vor nicht.
Stimmt, wenn ich dein Beispiel kopiere, funktioniert's da mit der Änderung der Schriftfarbe des Links beim Hovern nicht - in anderen Beispielen reicht das aber manchmal durchaus schon.
Dann probier's doch mal mit Änderung von background von #fff auf #ffffff.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hi,
Stimmt, wenn ich dein Beispiel kopiere, funktioniert's da mit der Änderung der Schriftfarbe des Links beim Hovern nicht - in anderen Beispielen reicht das aber manchmal durchaus schon.
Dann probier's doch mal mit Änderung von background von #fff auf #ffffff.
Ich bin begeistert, dass es funktioniert und gleichzeitig schockiert über diesen Effekt!
Ist dies öfter so, dass man in CSS nur über probieren weiterkommt?
Zum Glück gibt es Selfhtml, wo es meistens jemand gibt, der die Erfahrung schon gemacht hat.
Danke
Benni-
Yerf!
Ist dies öfter so, dass man in CSS nur über probieren weiterkommt?
Das ist kein Problem von CSS, sondern vom IE 6, der CSS für 3 komische Buchstaben hält...
Allerdings sind die Probleme des IE inzwischen überwiegend bekannt. Deswegen sollte man meistens über eine Google-Suche zu einer Lösung kommen. Auch hier im Archiv ist einiges zu finden.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
-
-
-