«
»

Internet Explorer und Transparente PNGs

Mit Transparenten PNGs (Portable Network Graphics) arbeiten ist ußerst praktisch. Leider kann der Internet Explorer damit nicht umgehen.
codefreak.de im Internet Explorer
Es gibt zwar Möglichkeiten Transparente PNG-Dateien im Internet Explorer richtig darzustellen, aber das funktioniert leider nicht, wenn diese über CSS (Cascading Style Sheets) eingebunden werden. Tja, pech gehabt IE-User, ich hab keine Lust mir hier wegen eines mangelhaftes Browsers einen abzubrechen.

This entry was posted on Friday, September 24th, 2004 at 23:28 and is filed under Bauen, codefreak.de. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

3 Responses to “Internet Explorer und Transparente PNGs”

  1. Blackbit interactive GmbH Says:
    October 27th, 2004 at 15:41

    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/

  2. Achim Hingst Says:
    November 28th, 2004 at 09:55

    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.

  3. Ic3m4n Says:
    June 2nd, 2008 at 19:20

    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