filter:alpha und opacity

[david]

Guten Abend allerseits,

also ich habe hier ein Problem mit meinem stylesheet. Folgenden code habe ich auf einer anderen hp entdeckt:

ul.partners li a, ul.partners li a:visited{
 color:#b3b3b3; text-decoration:none;
 filter:alpha(opacity=75); opacity:0.75;
}

*html ul.partners li a, ul.partners li a:visited{color:#c7c7c7;}

ul.partners li a:hover, ul.partners li a:active {
        color:#424242; text-decoration:none;
 filter:alpha(opacity=100); opacity:1.0;
}

Ich hab mir dann das mit dem alpha und der opacity rausgeholt, und folgendermaßen umgesetzt:

img.link{
    display: block;
    float: left;
    clear: both;
    margin: 0 auto 10px auto;
    padding: 1px;
    border: 1px solid #999999;
    filter: alpha(opacity=60);
    opacity: 0.6;
  }

img.link:hover{
    border: 1px solid #000000;
    filter: alpha(opacity=100);
    opacity: 1.0;

zur anwendung:
 <img class="link" src="..." height="40" border="0" >

Im Firefox, funktioniert dass wunderbar, doch im Falle des IE klappt das nicht. Der zuoberst gezeigte Code wird auch auf bilder angewendet, und funnktioniert im IE einwandfrei. Wo liegt jetzt mein Fehler?

danke, fürs draufschauen

mfg david

[D.R.]

Hallo,

Ich hab mir dann das mit dem alpha und der opacity rausgeholt, und folgendermaßen umgesetzt:

img.link{
    display: block;
    float: left;
    clear: both;
    margin: 0 auto 10px auto;
    padding: 1px;
    border: 1px solid #999999;
    filter: alpha(opacity=60);
    opacity: 0.6;
  }

img.link:hover{
    border: 1px solid #000000;
    filter: alpha(opacity=100);
    opacity: 1.0;

zur anwendung:
<img class="link" src="..." height="40" border="0" >

Im Firefox, funktioniert dass wunderbar, doch im Falle des IE klappt das nicht. Der zuoberst gezeigte Code wird auch auf bilder angewendet,

Nein, er wird auf <a>s angewendet. Wenn sich darunter noch ein Bild befindet, wird dieses aufgrund der Vererbung aber ebenfalls transparent.

Wo liegt jetzt mein Fehler?

Wende Pseudoklassen möglichst nur auf <a>-Elemente (mit href) an. Wenn du den unteren Teil deines Beispiels folgendermaßen abändern würdest, würde es klappen.

  
a{ border: 1px solid #999999;  
   filter: alpha(opacity=60);  
   opacity: 0.6;  
  }  
  
a.link:hover{  
    border: 1px solid #000000;  
    filter: alpha(opacity=100);  
    opacity: 1.0;  

Der Effekt dürfte ähnlich sein. Evtl. musst du die Klassen aber noch auf die Links setzen, da CSS nicht auf übergeordnete Elemente zugreifen kann.

Dass es im Firefox (sowie im IE 7 und anderen Browsern) ohne Probleme funktioniert, liegt daran, dass dieser keine Probleme mit irgendwas:hover hat.

mfg. Daniel

[david]

Hallo,

Ich hab mir dann das mit dem alpha und der opacity rausgeholt, und folgendermaßen umgesetzt:

img.link{
    display: block;
    float: left;
    clear: both;
    margin: 0 auto 10px auto;
    padding: 1px;
    border: 1px solid #999999;
    filter: alpha(opacity=60);
    opacity: 0.6;
  }

img.link:hover{
    border: 1px solid #000000;
    filter: alpha(opacity=100);
    opacity: 1.0;

zur anwendung:
<img class="link" src="..." height="40" border="0" >

Im Firefox, funktioniert dass wunderbar, doch im Falle des IE klappt das nicht. Der zuoberst gezeigte Code wird auch auf bilder angewendet,

Nein, er wird auf <a>s angewendet. Wenn sich darunter noch ein Bild befindet, wird dieses aufgrund der Vererbung aber ebenfalls transparent.

Oh =)

Wo liegt jetzt mein Fehler?

Wende Pseudoklassen möglichst nur auf <a>-Elemente (mit href) an. Wenn du den unteren Teil deines Beispiels folgendermaßen abändern würdest, würde es klappen.

a{ border: 1px solid #999999;
   filter: alpha(opacity=60);
   opacity: 0.6;
  }

a.link:hover{
    border: 1px solid #000000;
    filter: alpha(opacity=100);
    opacity: 1.0;

>   
> Der Effekt dürfte ähnlich sein. Evtl. musst du die Klassen aber noch auf die Links setzen, da CSS nicht auf übergeordnete Elemente zugreifen kann.  
>   

Der Effekt ist leider nicht der erwünschte, wenn ich ihn nur auf <a> anwende. Aber ich habe jetzt sowohl für <a> und <img> getrennte klassen gemacht, und nun funktioniert es auch im IE7  

> Dass es im Firefox (sowie im IE 7 und anderen Browsern) ohne Probleme funktioniert, liegt daran, dass dieser keine Probleme mit irgendwas:hover hat.  
>   
> mfg. Daniel  
  
vielen dank,  
mfg david