opacity/alpha in IE - zum Durchdrehen!

[juewi]

Gleich vorweg:

Hier in diesem Beispiel funktioniert der filter.alpha für den IE hervorragend.

Derselbe Code hier in meinem Beispiel MIT IDENTEM CODE funktioniert NICHT!

Ich dreh noch durch ...

CSS:

  
<!--[if IE 7]>  
<style type="text/css">  
img#opacity-100 {  
filter:alpha(opacity=100);  
}  
img#opacity-100:hover {  
filter:alpha(opacity=50);  
}  
img#opacity-50 {  
filter:alpha(opacity=50);  
}  
img#opacity-50:hover {  
filter:alpha(opacity=100);  
}  
</style>  
<![endif]-->  

Body:

  
  <li>Opacity: 1 / 100%  
    <ul>  
  
      <li><img src="logo.png" id="opacity-100" alt=""></li>  
  
    </ul>  
  
  </li>  
  
  <li>Opacity: 0.5 / 50%  
    <ul>  
  
      <li><img src="logo.png" id="opacity-50" alt=""></li>  
  
    </ul>  
  
  </li>  
  
</ul>  

Bitte erspart mir die Nervenklinik und klärt mich auf.

Danke, Jürgen

[MichiN]

Hi Jürgen,

also bei _mir_ funktioniert die Transparenzbeeinflussung im Firefox [Version 3.0.6] sowohl bei Deiner, als auch bei der Tutorialseite. In dem hier auf der Uni installierten IE [Version 6] funktioniert es weder bei Deiner, noch bei der Tutorialseite. Wie es bei der 7er Version aussieht, kann ich nicht testen. Generell ist aber die Kombination IE und Transparenz _immer_ schon ein Problem gewesen. (Siehe transparente png-Grafiken im IE)

Ich persönlich habe mich damit abgefunden, dass der IE Dinge nicht so darstellt, wie ich es gern hätte und in der Zwischenzeit ist mir das auch egal. Meine Seiten sehen zB. im Firefox oder Opera so aus, wie ich es mir vorstelle und im IE sind sie immer noch erkenn- und, was noch wichtiger ist, _benutzbar_.

Mit lieben Grüßen aus Wien

Michi

[Cheatah]

Hi,

In dem hier auf der Uni installierten IE [Version 6] funktioniert es weder bei Deiner, noch bei der Tutorialseite.

das dürfte daran liegen, dass euer IE 6 nicht auf den Conditional Comment reagiert, der da "if IE 7" lautet ;-)

Ich persönlich habe mich damit abgefunden, dass der IE Dinge nicht so darstellt, wie ich es gern hätte und in der Zwischenzeit ist mir das auch egal. Meine Seiten sehen zB. im Firefox oder Opera so aus, wie ich es mir vorstelle und im IE sind sie immer noch erkenn- und, was noch wichtiger ist, _benutzbar_.

Weise.

Cheatah

[Cheatah]

Hi,

Derselbe Code hier in meinem Beispiel MIT IDENTEM CODE funktioniert NICHT!

"funktioniert nicht" funktioniert genauso wenig, wie Filter im IE auf Elementen funktionieren, die kein hasLyout besitzen.

Bitte erspart mir die Nervenklinik und klärt mich auf.

Wenn ich Dich detailliert aufkläre, ist eine Nervenklinik vermutlich das einzige, was Dich retten kann. Und ich rede gerade nicht von Bienen und Blümchen.

Cheatah

[ChrisB]

Hi,

Hier in diesem Beispiel funktioniert der filter.alpha für den IE hervorragend.

Derselbe Code hier in meinem Beispiel MIT IDENTEM CODE funktioniert NICHT!

Kann ich im IE 7 unter Vista nicht nachvollziehen; in der 6er-Version, die mir der IETester emuliert, allerdings schon.

Solltest du also nur vom 6er IE reden, dann rede bitte auch vom 6er IE, denn sonst weiss kein Mensch, dass du vom 6er IE redest - klar soweit™?

Und dann werfe ich mal die Vermutung in den Raum, dass es u.a. daran liegen koennte, dass dein Dokument sich im Quirks Mode befindet, das "originale" jedoch nicht (auch wenn ich spontan keinen Hinweis darauf finde, dass der alpha-Filter den Compliant Mode benoetigen wuerde).

MfG ChrisB

[Maik]

Hallo Jürgen,

dann bring ich hier mal als Autor des Tutorials Licht ins Dunkel, weshalb der CSS-Code bei dir im IE7 nicht funktioniert.

Mit deiner gewählten Doctype-Deklaration läuft der IE7 im sog. "Quirksmodus", und in diesem Darstellungsmodus verhält er sich wie seine Vorgängerversionen, die die allg. Pseudoklasse (img#opacity-100:hover {...}) nicht zu interpretieren wissen.

mfg Maik

[juewi]

vielen Dank Leute - jetzt funktionierts auch im IE7!

(Quirks Modus ..... meine Seite wird sich eher im Murks-Modus befinden ;-))