Bei Hover Bild und Text tauschen - mit IE6
Staffi
- css
Hallo,
in einem Thread im April hatte ich erfahren, dass Hover im IE6 nur für a-tags funktioniert.
Für den IE6 habe ich daher nachfolgenden HTML-Text realisiert (wohlwissend, dass der Link nicht unterdrückt werden kann).
Das nachfolgende Beispiel funktioniert einwandfrei im IE6,
wenn ich aber als Text angebe "Text11<br>Text12" bzw. "Text21<br>Text22",
so wird "Text11<br>Text12" korrekt neben dem Bild in zwei Zeilen angezeigt.
Wenn ich das Bild oder den Text mit der Maus überfahre, kommt als Text neben dem Bild:
ext12##Text21Text22
(# ist ein undruckbares Zeichen dargestellt als kleines Quadrat)
Was mache ich oder der IE falsch?
Hier das Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Test</title>
<style type="text/css">
<!--
a#Bild {
display: block;
position: absolute;
background: url(Bild1.jpg) no-repeat;
width:100%;
height:300px;
border:0px;
}
a#Bild .normal {
display: block;
}
a#Bild .invers {
display: none;
}
a#Bild:hover {
background: url(Bild2.jpg) no-repeat;
}
a#Bild:hover .normal {
display: none;
}
a#Bild:hover .invers {
display: block;
}
-->
</style>
</head>
<body>
<h1>CSS-Test</h1>
<a id="Bild" href="">
<div class="normal" style="padding-left:410px;">
Text11 Text12
</div>
<div class="invers" style="padding-left:410px;">
Text21 Text22
</div>
</a>
</body>
</html>
Hi,
Was mache ich oder der IE falsch?
<a id="Bild" href="">
<div class="normal" style="padding-left:410px;">
a-Elemente dürfen keine div-Elemente enthalten.
cu,
Andreas
Hi,
»» Was mache ich oder der IE falsch?
»» <a id="Bild" href="">
»» <div class="normal" style="padding-left:410px;">a-Elemente dürfen keine div-Elemente enthalten.
Was könnte ich dann statt den div's verwenden?
Mit span hatte ich den gleichen Effekt.
Und warum ist die Darstellung nur falsch, wenn hover aktiviert wird?
Gruß
Staffi