Comments on: Internet Explorer und Transparente PNGs

By: Ic3m4n

Ic3m4n — Mon, 02 Jun 2008 17:20:25 +0000

Hi !

Ihr scheint da etwas mehr Ahnung zu haben als meine Wenigkeit ;) Vielleicht könnt ihr mir helfen:
Auch meine Seiten benutzen teilweise (halb-)transparente PNGs, am schlimmsten ist es jedoch auf der “VdM”-Seite (Video des Monats). Da ich selbst den Firefox nutze, habe ich diesen auch für die Seitenerstellung genutzt. Jetzt wurde ich jedoch auf dieses Manko hingewiesen: Beim Video-Rahmen fehlt oben & unten die komplette Grafik (Umrandung).
Habt ihr vielleicht eine Lösung, ohne dass ich die gesamten Seiten neu schreiben muss :(

Mit besten Grüßen / Ic3m4n

By: Achim Hingst

Achim Hingst — Sun, 28 Nov 2004 07:55:04 +0000

Da mittlerweile viele User in ihren Browsern JavaScript deaktiviert haben, sollte besser eine Alternative über Conditional Comment gewählt werden. all.css --> für alle Browser ie.css --> nur für den Internet-Explorer ie.css überschreibt all.css oder fügt abweichende Formatierungen hinzu.

By: Blackbit interactive GmbH

Blackbit interactive GmbH — Wed, 27 Oct 2004 13:41:25 +0000

Es ist möglich, transparente PNG’s auch im CSS für IE darzustellen. Wir haben dafür eine CSS-Weiche eingesetzt, die für IE ein gesondertes CSS einbindet. Hierbei befinden sich im CSS für den IE lediglich die Filter für die Grafiken. Hier werden die Filter wie folgt eingesetzt:

layer-background-image:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/_images/85.png”, sizingMethod = ‘scale’);

statt

layer-background-image:url(“/_images/85.png”);

Die Weiche sieht so aus:

if (navigator.appName.indexOf(“Explorer”) != -1) {
document.writeln (‘

‘);
} else {
document.writeln (‘

‘);
}

Hierbei ist zu beachten, dass der Filter für die transparenten Grafiken nur bestimmte Größen umrechnet. Sollte die Grafik falsch dimensioniert sein, sind Links auf den Grafiken nicht mehr anklickbar. Das ist ein Rendering-Fehler des IE. Probiert also verschiedene Formate aus, falls ihr auf dieses Link-Problem stösst.

Um statische Grafiken zu rendern, kann einfach ein Javascript eingesetzt werden, das alle img-Tags durch den Filter erweitert:

http://www.alistapart.com/articles/pngopacity/