David Hellmann
Grafikdesign & Entwicklung
50931 Cologne
Germany
davidhellmann.com@gmail.com
davidhellmann.com
Transparente PNG im Internet Explorer 6
Wer kennt es nicht, man ist gerade voll bei der kreativen Arbeit in Photoshop und gestaltet wild drauf los. Irgendwann kommt der Zeitpunkt wo man mit seinem Ergebnis zufrieden ist und was fällt auf? Das fertige Design wird so nur funktionieren mit transparenten PNG24. Wie schon bekannt sein sollte haben die Macher vom Internet Explorer vor der Version 7 nicht all zu viel zeit daran verschwendet diese Feature einzubauen.
LIVE DEMO DOWNLOAD
Im klartext heisst das für den Entwickler: Mehrarbeit...
Da ich letztens vor genau diesem Problem stand habe ich Mr. Google bemüht und die ein oder andere Methode gefunden die dieses Problem lösen soll. Für mich war klar, dass die unkomplizierteste Lösung genommen wird. Hier das Ergebnis:
Die normale CSS Datei:
Die ie6.css ist nun zuständig dafür, dass der Internet Explorer, falls kleiner als Version 7, das transparente PNG in gewünschter Form darstellen kann.
1 2 3 4 5 6 7 8 9 10 | ... #trans-box { width:600px; padding:50px; margin:0 auto; text-align:left; background:url(../grafiken/trans_dark.png) repeat; border:5px solid #ddd; } ... |
Die angepasste CSS Datei für den Internet Explorer 6:
In diesem Falle die style.css, hier einfach ganz normal die CSS Anweisungen reinschreiben für das Transparente PNG.
1 2 3 4 5 6 7 | ... #trans-box { background-image:none; background:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='grafiken/layout/trans_dark.png', sizingMethod='scale'); } ... |
Browserweiche
Nun muss noch abgefragt werden wann diese ie6.css aufgerufen werden soll. In diesem Fall wenn der Benutzer eine Version des Internet Explorers benutzt die kleiner als die Version 7 ist. Das ganze schaut dann so aus:
1 2 3 4 5 6 7 8 9 10 | ...
<style type="text/css">
<!--
@import url("css/style.css");
-->
</style>
<!--[if lte IE 7]>
<link href="css/ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
</head> |
HTML Teil
Jetzt muss das ganze nur noch dargestellt werden. Das könnte dann in etwa so aussehen. Hier ist nur der Teil gezeigt der die Box betrifft:
1 2 3 4 5 6 7 8 | <body> <div id="trans-box"> <h2>Tranparente Box</h2> <p> hier der text... </p> </div> </body> |
Das ganze in aktion könnt Ihr hier sehen:
Kommentare einblenden
8 Kommentare
pinerski schreibt: 1 3. March 2009 — 09:07 Uhr
Sehr schönes und leicht verständliches Bespiel. Hat sich aber ein kleiner Fehler eingeschlichen.
**background:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader**
Oben im Code Beispiel ist das **background:** zuviel.
Hab aber eine kleine Frage zu deinem Tutorial. Wie kann man auf ein Element klicken, welches innerhalb der trans-box ist?
Zum Testen benutze ich ie6.
pinerski schreibt: 2 3. March 2009 — 09:17 Uhr
Was würde ich nur ohne google machen…
Hier ist die Lösoung, falls es jemanden interessiert.
Einfach in der ie6.css folgendes hinzufügen:
a {
position: relative;
z-index: 1;}David Hellmann schreibt: 3 3. March 2009 — 12:18 Uhr
richtig :) nur sollte man gar keinen IE6 nutzen, hehe ;)
Martin schreibt: 4 9. April 2009 — 12:47 Uhr
unitpngfix.js ist im übrigen auch sehr zu empfehlen. Da muss man nicht extra in der CSS viel rumfriemeln.
daple schreibt: 5 31. January 2010 — 21:46 Uhr
Klasse Blog; danke für die Tipps, insbesondere @ #2 von Pinerski!
Nemesis schreibt: 6 8. March 2010 — 09:36 Uhr
Vielen Dank!
Hab mir dadurch eine unschönere Version Version einer Website ohne Transparenzen erspart ;).
Jensis Werbeagentur schreibt: 7 24. June 2010 — 23:42 Uhr
Hört sich gut an. Aber so richtig will das nicht funktionieren. Habe auch die pngfix.js und die supersleight-min.js getestet. Auch die haben nicht richtig funktioniert.
Habe grad einen alten Rechner extra zum IE6 testen aufgesetzt. Also ein “Original” Browser aus XP SP1. Aber es geht einfach nicht. Habe den eindruck, dass es nur bei einigen Bildern funktioniert.
Kann es sein, dass die Fixes nicht bei Hintergrundbildern funktionieren???
oder was kann da noch der Grund sein??? Browserversion wohl nicht, oder?
David Hellmann schreibt: 8 24. June 2010 — 23:44 Uhr
Zitat Jensis Werbeagentur ↑:
Hört sich gut an. Aber so richtig will das nicht funktionieren. Habe auch die pngfix.js und die supersleight-min.js getestet. Auch die haben nicht richtig funktioniert.
Habe grad einen alten Rechner extra zum IE6 testen aufgesetzt. Also ein “Original” Browser aus XP SP1. Aber es geht einfach nicht. Habe den eindruck, dass es nur bei einigen Bildern funktioniert.
Kann es sein, dass die Fixes nicht bei Hintergrundbildern funktionieren???
oder was kann da noch der Grund sein??? Browserversion wohl nicht, oder?
Der Artikel ist ja schon ne ecke alt. Hab das nicht mehr getestet und kann es auch aktuell nicht testen da ich einen Mac nutze. Aber das IE6 Problem löst sich doch eh von selber. Ich optimiere fast nichts mehr dafür. Lohnt sich einfach nicht mehr.
Kommentar schreiben