HOVER bei IE 6?!

[Philipp R.]

Hallo!

Vielleicht hat ja irgendjemand eine IDEE zu dem kleinen Problemchen?
Bei dem IE 6 wird das "Hovern" über die drei großen Bilder irgendwie nicht so richtig dargestellt! www.renerig.de/atiw

Danke Schonmal
   Philipp

[D.R.]

Hallo,

Vielleicht hat ja irgendjemand eine IDEE zu dem kleinen Problemchen?
Bei dem IE 6 wird das "Hovern" über die drei großen Bilder irgendwie nicht so richtig dargestellt! www.renerig.de/atiw

Der IE <= 6 kann die Pseudoklasse „hover“ nur auf „a“-Elemente mit „href“-Attribut anwenden. Du müsstest ihm also entweder per JavaScript auf die Sprünge helfen, oder ihn ignorieren. Der IE7 hat damit jedenfalls keine Probleme mehr, und die Browser kommen schon seit langem damit klar.

mfg. Daniel

[Der Martin]

Hallo Daniel,

Der IE <= 6 kann die Pseudoklasse „hover“ nur auf „a“-Elemente mit „href“-Attribut anwenden.

das ist zwar richtig; Tatsache ist aber, dass ich bei Philipps Seite sogar mit dem IE5.5 einen Hover-Effekt habe, der für mich korrekt und plausibel aussieht: Im Normalzustand ist das Bild wie mit einem halbtransparenten Vorhang verdeckt, beim Hovern wird es klar und rein.
Das ist ja auch nicht weiter verwunderlich, da die Bilder alle drei in je ein a-Element eingebunden sind. Auszug aus http://www.renerig.de/atiw/index1.html:

<div id="lbox">  
<a href="cont/sul/index.php" class="sul">  
<img src="img/blank.gif" width="200" height="300" border="0" alt="">  
</a></div>

Eigentlich ist das div hier sogar überflüssig; man könnte ebensogut das a-Element mit display:block versehen und dieses dann entsprechend formatieren.

Für den Effekt setzt er auch keine wirklich komplizierten Techniken ein, sondern tauscht lediglich das Hintergrundbild aus (das eigentliche, über <img> referenzierte Bild ist nämlich transparent).
Ich kann daher nur mutmaßen, dass Philipp auf ein ganz spezielles IE6-Problem gestoßen ist, das ich mangels IE6 nicht nachvollziehen kann.

Übrigens, Philipp: In deinem Stylesheet fehlen an etlichen Stellen Maßeinheiten bei den Größenangaben. Du hast Glück, dass viele Browser dann stillschweigend "px" annehmen. Das solltest du aber auf jeden Fall in Ordnung bringen.

So long,
 Martin

[Detlef G.]

Hallo Philipp

Bei dem IE 6 wird das "Hovern" über die drei großen Bilder irgendwie nicht so richtig dargestellt! www.renerig.de/atiw

Der IE hat oft Probleme damit, bei a:hover das Kindelement zu ändern, wenn sich nichts am Link selbst ändert. Dazu muss sich nichts wirklich am Aussehen ändern.
Also z.B.:
#lbox a:hover, #mbox a:hover, #rbox a:hover {background-color: #000;}
[/code]

Ich frage mich allerdings, warum du es so aufwändig machst?

  
<div id="lbox">  
<a href="cont/sul/index.php" class="sul">  
<img src="img/blank.gif" width="200" height="300" border="0" alt="">  
</a></div>  

Wozu extra ein Div, dass dann nur einen Link enthält? Du kannst dem Link ein display:block geben, dann verhält er sich genauso, wie ein Div.
Wozu enthält der Link ein unsichtbares Bild? Ein Hintergrundbild kannst du auch direkt dem Link zuweisen und dieses per :hover wechseln.

Hast du dir die Seite mal angesehen, wenn kein CSS unterstützt wird oder keine Grafiken?

Wie wäre es so:

<a href="cont/sul/index.php" id="sul"><span> </span>Sound & Licht</a>

CSS:

#sul, #sul span {  
  position:absolute;  
  width:200px;  
  height:300px;  
#sul  
  left:50;  
  top:70;  
}  
#sul span {  
  top:0;  
  left:0;  
  background: url(../img/sul.jpg) top left no-repeat;  
}  
a:hover#sul {  
  background-color: #000;  
}  
a:hover#sul span {  
  background-image: url(../img/sul_rel.jpg);  
}  

Oder du schaust dir den Bildwechsel mit CSS mal ganz anders an.

Auf Wiederlesen
Detlef