Tranzparenz beim Internet Explorer

Hallo,

ich erstelle momentan eine Webseite bei der ich die Navileiste aus <div> Containern erstelle die links <a> enthalten welche beim darüberfahren mit der Maus (hover) mit einem transparenten Hintergrund gefüllt werden - damit man das Hintergrundbild der Navi Leiste noch sehen kann.

Den Hover Effekt für die <a> Tags habe ich folgendermaßen im CSS realisiert (funktioniert im Firefox und im Internet Explorer(7) problemlos):

Code:

#navlnk a:hover {
color:#000000;
background-color:#FFFFFF;

/*Tranzparenz*/
/*FF*/ opacity:0.3;
/*IE*/ filter:alpha(opacity = 30);
}

Wenn man sich auf der Seite befindet soll dann der <div> container dauerhaft mit einem Transparenten hintergrund gefüllt werden. Das wollte ich so realisieren:

Code:

#selected {
color:#000000;
background-color:#FFFFFF;
/*Tranzparenz*/
/*FF*/ opacity:0.3;
/*IE*/ filter:alpha(opacity = 30);
}

Der HTML Code für die entsprechenden Elemente schaut so aus:

Code:

        <div id="navlnk_sel"><div id="selected">Link</div></div>
        <div id="navlnk"><a href="<?php echo $_SERVER['PHP_SELF']; ?>">Link</a></div>

Also im Prinzip genauso - nur das sich die CSS Angaben diesmal auf einen <div id="selected"> beziehen. Hier zeigt es der Firefox auch richtig an - der Internet Explorer macht den Hintergrund komplett weiss.

Hat hier jemand eine Idee? Oder ist das mal wieder eine der zahlreichen Macken im Internet Explorer?

Ich möchte dass die Webseite im IE möglichst genauso aussieht wie im Firefox - da viele diesen (leider) immernoch benutzen. Opera, Safari und Google Chrome stellen es auch richtig dar....

Danke schon mal für die Hilfe :-)

 

Hier nochmal ein Nachtrag:
Habe gerade herausgefunden, dass es im Internet Explorer 8 funktioniert - im IE 7 aber nicht.

IE 6 brauch ich mir gar nicht anschauen glaub ich ;-)

Hier mal ein Bild wie das Ganze aussieht:

 

Versuchs mal so

PHP:

#entsprechende-id {
   color: #000000;
   background-color: #FFFFFF;
   opacity: 0.30;
   filter:alpha(opacity=30);
   -moz-opacity: 0.30;
}


(ungetestet)

 

Wenn du keine Alpha-Transparenz willst, solltest du auch keine benutzen. Versuch mal:

Code:

background: none;

Soll es halbtranspartent werden, würde ich zu einem PNG mit der beabsichtigten Transparenz greifen. Auch hier spielt der IE zwar erst mal nicht mit, lässt sich aber mit einem Würgaround (google nach iepngfix.htc) überreden.

 

Ich weiss zwar nicht warum, aber nachdem ich eine Höhenangabe mit für den Selected container angegeben hat funktionierte es auch beim IE7:

Code:

#selected {
height:31px;
background-color:#FFFFFF;
/*Tranzparenz*/
/*FF*/ opacity:0.3;
/*IE*/ filter:alpha(opacity = 30);
}