✔ Transparente Fläche liegt über Border im IE8

[Denniz]

Hi Leute,

ich habe in jQuery ein Effekt gebastelt bei dem sich eine Transparente captionbox über ein Bild legt beim mouseover.
Beim mouseover ändert sich zudem noch die Borderfarbe von grün nach rot. Realisiert duch eine dyn. Klassenzuweisung (.boxhover) per jquery.
Die class ändert sich quasi von <div class="box"> zu <div class="box boxhover">
Im IE6,7, FF, Opera, Safari, klappt das alles wunderbar, nur der IE8 legt die transparent Fläche über dem Border obwohl der Border eigentlich über der Fläche liegt.
Es muß an dem CSS liegen.

Hier die Demo.
IE8 Darstellung

Hat jemand eine Idee wie man dem IE8 sagen kann das er es richtig darstellen soll.

 

[Maik]

Es muß an dem CSS liegen.

Richtig eingeschätzt

Und zwar an diesen Zeilen zur Transparenz-Steuerung in der IE-Familie, die der IE8 offensichtlich auch nach oben erscheinen lässt.

/* For IE 8 */  
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";   
/* For IE 5-7 */  
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

Nimm die Regeln zu Testzwecken einfach mal raus bzw. kommentiere sie aus, führe den Mouseover durch, und du siehst deutlich, dass sich dieses Element nicht oberhalb des Rahmens befindet..

Erstere wäre übrigens überhaupt nicht notwendig, denn Letztere interpretiert der IE8 ebenso.

mfg Maik

 

[Denniz]

Ok, ich habe es auskommentiert.
Ich nehm jetzt einfach eine semitransparente png für die captionbox.

Danke und Gruß

 

[Maik]

Genau das wäre mein Vorschlag gewesen, wenn du nach der Lösungsmöglichkeit gefragt hättest

mfg Maik