Professor Web berichtete schoneinmal darüber, wie man im Internet Explorer 6 transparente PNG-Dateien auch wirklich transparent macht. Hier ein weiteres, besseres und einfacherers Beispiel.
Es kann ganz einfach sein. Einfach diese htc-Datei herunterladen und über CSS in die Website einbinden.
img, div {
behavior: url(iepngfix.htc);
}
Die Einbindung muss über HTML direkt erfolgen. Wird die HTC-Datei über ein eigenes Stylesheet aufgerufen hat dies auf den Internet Explorer leider keine Auswirkung.
Innerhalb der HTC-Datei wird ein GIF verwendet, dass blank.gif heißt. Dieses sollte unbedingt vorhanden sein, da sonst über jedem PNG-Bild der Platzhalter erscheint für ein Bild, dass nicht geladen werden kann. Am besten man verwendet für diese blank.gif eine 1x1 große, transparente GIF-Datei.
Im Gegensatz zu dem anderen Tipp , der noch bei Professor Web existiert, wirkt sich dieser Hack hier auch auf Bilder aus, die per IMG-Tag eingebunden werden. Bei dem anderen Tipp ist es nur möglich über Hintergrundbilder (von z.B. DIVs) den gewünschten Effekt zu erzielen.
Dieser Hack ist nur für den Internet Explorer 6 erforderlich, alle anderen Browser inklusive des IE7 unterstützen bereits transparente PNG-Bilder.
Links:
IE PNG Hack zum Download
TwinHelix - Website die den Hack anbietet
1 Geschrieben von: Kathi , am 26.03.2008 um 09:41 Super, vielen Dank... genau danach hab ich gesucht:-))) 2 Geschrieben von: kathi , am 27.03.2008 um 15:20 Hallo Armin, bei per CSS eingebundenen Bildern funktioniert das wohl nicht:-( Oder hab ich dann was falsch gemacht? 3 Geschrieben von: Armin Vieweg , am 27.03.2008 um 17:15 Hi Kathi, also ich habe es sowohl als IMG, als auch als DIV mit einem Background ausprobiert und es funktioniert einwandfrei. Vielleicht überprüfst Du es nochmal genau. Solltest Du nicht weiterkommen dann nehm doch [URL=/kontakt/index.html]einfach Kontakt auf[/URL] und schick mir mal einen Link zur entsprechenden Seite. Gruß Armin 4 Geschrieben von: bl4nk , am 02.05.2008 um 13:39 geile sache, funktioniert bestens, danke dir :] 5 Geschrieben von: Michael , am 03.06.2008 um 17:34 Leider wurde nicht auf PNG8 und Alphatranzparenz hingewiesen. 6 Geschrieben von: Vladimir , am 21.09.2008 um 17:37 Alles funktioniert danke! 7 Geschrieben von: Oliver , am 01.10.2008 um 10:03 Hallo zwar ist das Bild transparent aber der Platzhalter mit dem Rahmen und mit dem roten Kreuz ist zu sehen 8 Geschrieben von: Armin Vieweg , am 01.10.2008 um 10:27 Hi Oliver, genau deswegen habe ich der [B]blank.gif[/B] einen eigenen Absatz gewidmet, die dafür sorgt das genau das nicht passiert. Gruß Armin 9 Geschrieben von: Sascha , am 15.10.2008 um 22:48 Ja hallo! Hab das ausprobiert und hat super geklappt mit der Transparenz...Leider ist aber jetzt das png Image total verzerrt :-/ muss ich da in deinem File was ümschreiben bezüglich Länge und Breite des Bildes?! LG 10 Geschrieben von: Armin Vieweg , am 16.10.2008 um 07:48 Hi Sascha, nein Du musst da gar nichts ändern (außer ggf. den Pfad zum blank.gif). Schreib mir Doch [URL=/kontakt/index.html]eine E-Mail[/URL] mit nem Link zu der Seite, dann kann ich Dir sicher sagen woran das liegt :) Gruß Armin 11 Geschrieben von: Tobi , am 04.11.2008 um 12:56 Hi, ich hab dasselbe Problem wie mein Vor-poster... und zwar sind alle png's jetzt trasparent, aber auch total verzerrt. der pfad zum blank.gif stimmt! muss das jeweilige img-tag jetzt zwingend eine höhen- bzw. breitenangabe haben? das wäre nich so toll, da alle meine bilder aus ner datenbank kommen,... gabs für das problem meines vorredners ne lösung? klingt nach demselben problem das ich habe.... thanx schonma greez tobi 12 Geschrieben von: Hi nochmal , am 04.11.2008 um 13:40 Ich hab in line 43 der .htc datei die methode "scale" durch die methode "crop" ersetzt und jetzt passts ;-) thanx trotzdem tobi 13 Geschrieben von: Tobi , am 04.11.2008 um 14:02 un nochema ich hab mich leider getäuscht. nachdem ich scale in crop geändert habe waren die bilder zwar nicht mehr verzerrt, aber die abmessungen stimmen immer noch nicht. das original bild hat die gewünschte größe, aber die grundfläche des bildes ist quadratisch. breite=höhe,... komisch. wenn jemand was rausfindet kann ers ja hier reinschreiben grüße tobi 14 Geschrieben von: Tobi , am 04.11.2008 um 14:28 Sorry wenn ich nerve,... aber ich habe für mein problem jetzt ne lösung gefunden. meine bilder waren verzerrt weil sie keine größenangaben hatten. einfach: img{width:auto;height:auto} in die internetexplorer-6 css-datei und schon klappt alles. sizingMethod bleibt dabei natürlich auf scale! sorry fürs generve. vielleicht konnt ich ja jemandem helfen cheers tobi 15 Geschrieben von: Armin Vieweg , am 04.11.2008 um 15:36 Nicht entschuldigen "fürs generve". Dafür sind Kommentare da und ich bin sicher, dass das vielen eine Hilfe ist :) Danke dafür! Gruß Armin 16 Geschrieben von: Wavemaster , am 14.11.2008 um 12:16 Ich hab mit dem Hack einen komischen Effekt erzielt: Einige Bilder werden (ohne Transparenz) angezeigt, andere sind komplett verschwunden (nachdem sie kurz geladen wurden). vll kann mir ja der Admin hierbei helfen... Seite: http://waveforce.riotblog.net/index.php?Bereich=Ueber_mich&Thema=Steckbrief MFG Wavemaster 17 Geschrieben von: Armin VIeweg , am 14.11.2008 um 13:09 Hallo Wavemaster, diesen Fehler hatte ich auch schon mal. Der tritt jedoch nur im Internet Explorer 6 auf, wenn dieser eine Parallelinstallation zum IE7 ist. Hat man den IE6 noch in seiner ursprünglichen Form installiert, klappt der Hack einwandfrei. Liege ich richtig? :) Gruß Armin 18 Geschrieben von: Wavemaster , am 15.11.2008 um 12:53 Hallo Armin, das kann ich dir nicht genau beantworten, da ich an einem Mac arbeite und den IE6 nur emuliere (mit allen seinen Fehlern). Ich guck mir das mal auf dem Firmenrechner an, da ist der IE6 noch "richtig" drauf. Danke erstmal für den Hinweis, werde bescheid geben, ob das zutrifft. MFG Wavemaster 19 Geschrieben von: Wavemaster , am 17.11.2008 um 12:11 Hallo Armin, scheint auch nicht so zu funktionieren, wie ich mir das denke. Das liegt zum einen an der Tatsache, dass ich eine Navigation mit einen Hintergrundbild realisieren will und sich dann das blank.gif _vor_ die Menüpunkte schiebt, sodass diese nicht mehr klickbar sind. Außerdem will trotz "richtigem" IE6 der Hintergrund des Content trotzdem nicht erscheinen. Hast du noch eine Idee, wie man das beheben könnte oder soll ich einfach auf IE6-Nutzer *******?!? MFG Wavemaster 20 Geschrieben von: Armin Vieweg , am 17.11.2008 um 15:22 Hi Wavemaster, ich kann Dir leider nicht ganz genau sagen, woran das liegt. Prinzipiell würde ich aber mal versuchen in den Standardkonformen Modus zu gehen. Momentan bist Du auf der Seite im "Kompatibilitätsmodus (Quirks)". Liegt vermutlich an den PHP-Errors. Dann nochmal gucken, was passiert. Gruß Armin 21 Geschrieben von: Alex , am 25.12.2008 um 16:33 Hi! Erstmal vielen Dank für das Script! Das funktioniert soweit echt super, ich musste nur im Script \"crop\" einfügen, wie schonmal jemand gesagt hat. Allerdings sind nun alle Grafiken irgendwie verrutscht! Gibts dafür auch eine Erklärung? Aber, wie schon gesagt, das beste Script, das ich bisher gefunden hab!! 22 Geschrieben von: Armin Vieweg , am 25.12.2008 um 19:31 Hi Alex, am Besten Du schickst mir mal ne Mail mit nem Link zur Seite, auf der das Problem auftritt. Dann schaue ich mir das gerne mal an :) Gruß Armin 23 Geschrieben von: Alex , am 25.12.2008 um 21:06 Die Seite existiert leider nur lokal... ich könnte dir vielleicht den Quellcode zuschicken! 24 Geschrieben von: Armin Vieweg , am 26.12.2008 um 09:30 Am besten packst Du die Datei mit den Bildern, CSS und dem Hack und schickst mir alles per Mail an: info [at] professorweb [punkt] de 25 Geschrieben von: Alex , am 28.12.2008 um 13:25 Okay! Ist verschickt... 26 Geschrieben von: Armin Vieweg , am 28.12.2008 um 19:32 Noch nix angekommen o.0? 27 Geschrieben von: larusa , am 25.02.2009 um 16:26 bei mir ist zwar der Hintergrund dann durchsichtig, aber es hat um das Bild einen Rahmen und links oben ein rotes x ? kann mir wer helfen officeadlisa.at 28 Geschrieben von: vivistar , am 26.02.2009 um 10:24 Hallo! Ich habe ein ganz anderes problem - meine Mouseover Effekte gehen nicht mehr! Alles soweit wunderbar Transparenz, aber bei der Javascriptmethode für Mouse-Over bleibt beim drüber fahren mit der Maus das "Over"-Bild hängen und geht nicht mehr zurück zum Ursprungsbild. Bei der CSS Methode ist das "Over" Bild nicht transparent^^ Kennt jemand eine Lösung für eins der beiden Probleme? 29 Geschrieben von: Armin Vieweg , am 26.02.2009 um 10:35 @larusa: Les nochmal den Absatz der sich mit der blank.gif Datei beschäftigt durch. Vermutlich fehlt diese Datei einfach oder ist nicht richtig verlinkt. @vivistar: Die CSS-Methode klingt interessant. Wird dort ein neues Bild geladen für den Hover-Zustand? Falls ja, wäre folgende Methode vielleicht interessant mal auszuprobieren: /html/hover-und-background-images-im-ie6.html 30 Geschrieben von: Vivistar , am 26.02.2009 um 11:30 @Armin: Nicht direkt - es klebt unsichtbar im Hintergund. Nun bin ich kein Profi. Mir würde die Variante mit dem Javascript erstmal die scnellste und beste LÖsung sein. Die CSS Variante läuft noch nicht 100% sauber. Also scheint das Problem allgemein nicht bekannt zu sein oder? 31 Geschrieben von: Armin Vieweg , am 26.02.2009 um 14:41 Nein allgemein bekannt ist mir dieses Problem nicht. Du kannst mir mal ne E-Mail unter "Kontakt" schicken mit nem Link zu der Seite. Dann schau ich mir das gerne mal an. Gruß Armin 32 Geschrieben von: MA2KO , am 28.02.2009 um 02:53 Hallo Habe gerade eine webseite fertig und stelle jetzt erst fest das all meine png menü-buttons im ie einen grauen hintergrund haben. ich habe die iepngfix datei heruntergeladen aber ich weis nicht genau wie und wo ich das css ins html einbinden soll. hat jemand von euch eine bespiel html datei mit png files? so könnte ich es vielleicht lernen. danke Marko 33 Geschrieben von: Armin Vieweg , am 01.03.2009 um 09:10 Hallo Marko, das Style schreibst Du zwischen den [head]. Dort schreibst Du dann also folgendes rein, möglichst ziemlich weit unten innerhalb des [head]: [style type="text/css"] img, div { behavior: url(iepngfix.htc); } [/style] Wichtig ist, dass der Pfad zur HTC-Datei stimmt. Wenn Du auf der Website eine Ordner-Hierarchie hast, würde ich hier einen absoluten Pfad verwenden. Außerdem ist es wichtig, dass Pfad innerhalb der HTC-Datei zum blank.gif Bild stimmt. Sonst hast Du den gleichen Fehler wie larusa. Die eckigen Klammern bitte noch durch spitze Klammern ersetzen. So wie eben HTML-Tags aussehen :) Gruß Armin 34 Geschrieben von: Frank , am 03.03.2009 um 09:49 Vielen Dank erstmal für den Hack, jetzt eine Frage: unterstützt er nur volle transparenzen in PNGs oder auch solche, die beispielsweise durch einen Schatten entstehen, wo der Hintergrund mit einem transparenten schwarz überlagert werden soll??? Ich habe das Skript nämlich wie beschrieben eingebunden, es tut sich aber leider garnichts.... -> www.stilgeschenk.de , falls du mal nachschauen willst :) Grüße Frank 35 Geschrieben von: Armin Vieweg , am 03.03.2009 um 13:32 Hi Frank, das Script unterstützt auch solche Schatten. Das ist ja eben der Vorteil bei PNG, es kann auch eine abgestufte Transparenz dargestellt werden (dank dem zusätzlichen Alpha-Channel). Das Problem auf Deiner Seite ist wohl eher, dass der Fix gar nicht installiert ist. Ich entdecke zumindest nirgendwo in dem Template die Einbindung der HTC-Datei. Gruß Armin 36 Geschrieben von: Frank , am 04.03.2009 um 20:21 Danke... da war wohl was falsch im Quellcode platziert :) jetzt ist der Code drin, zerstört die Seite aber total... kann es sein, dass es einen Konflikt gibt, wenn ich ne neue style.css hab, eine extra für alle IE 37 Geschrieben von: Armin Vieweg , am 04.03.2009 um 20:26 Hallo Frank, Dein Problem scheint spezieller zu sein. Nehm doch mal Kontakt mit mir auf per E-Mail (oder Kontakt im Footer). Ich bin sicher wir finden eine Lösung :) Gruß Armin 38 Geschrieben von: Frank , am 04.03.2009 um 20:27 Kurzer Nachtrag: Hier ein Screen ohne Skript: www.frank-sesselmann.de/stuff/ohne.png und einmal mit www.frank-sesselmann.de/stuff/mit.png Wobei anzumerken ist, dass bei der Version mit dem eingebundenen Skript die Grafiken schon richtig angezeigt werden... aber das Design is halt irgendwie hinüber -.- 39 Geschrieben von: Jannis Gerlinger , am 09.03.2009 um 17:32 Die Bilder werden zwar transparent dargestellt aber um die Bilder ist ein grauer Rahmen mit dem roten Kreuz. Wie kriege ich das Weg ? Leider habe ich dafür noch keine Lösung gefunden. 40 Geschrieben von: Armin Vieweg , am 09.03.2009 um 18:51 @Jannis: Dann solltest Du den Artikel mal lesen. Da findest Du die Lösung. 41 Geschrieben von: Stefan weigelman , am 13.03.2009 um 15:15 Hi, ich habe das ganze erfolgreich eingebaut, habe aber jetzt das Problem, dass sie Links, die sich im Layer mit dem transparenten Hintergrundbild befinden nicht mehr aktivieren, also anklicken lassen. die :hover funktion funktioniert auch nicht. hat jemand einen Tipp? danke! 42 Geschrieben von: Armin Vieweg , am 15.03.2009 um 08:42 @Stefan: Vermutlich sind die Links leer, kann das sein? Schreib mal etwas hinein, wenn dem so ist. Der Hover-Effekt klappt vom Link schon, nur dann nicht, wenn Du background-position im Hover anders gesetzt hast, als im normalen Link-Zustand. Falls Du nicht weiter kommst, kannst Du mir gerne über Kontakt schreiben. Gruß Armin 43 Geschrieben von: Susanne Marschollek , am 30.03.2009 um 20:31 Hallo, habe das ganze mal versucht in eine ASPX-Seite einzubauen und es geht nicht. Funktioniert das Ganze bei ASPX-Seiten nicht? Bräuchte genau so eine Funktion und zwar relativ dringend! Kann mir jemand weiterhelfen? DANKE schonmal im Voraus! Gruß Susanne 44 Geschrieben von: Armin Vieweg , am 30.03.2009 um 20:59 Hi Susanne, ich helfe gerne. Schick mir doch eine Nachricht über das Kontaktformular. Dann kann ich Dir optimal helfen :) Gruß Armin 45 Geschrieben von: Susanne Marschollek , am 31.03.2009 um 10:14 Wie kriege ich LinkButtons und ImageButtons bei ASP.NET angesprochen, dass sie wieder funktionieren? Gehen nämlich nach Einsatz der htc-Datei nicht mehr. Gruß Susanne 46 Geschrieben von: jenny , am 25.05.2009 um 15:54 hi @ all danke für das script... funzt bei mir eig. gut.... nur gibt es ein problem... ich nutze es für ein background - png mit schlagschatten... das habe ich eigentlich mit "repeat-y" gekachelt... es wird auch für einen winzigen moment gekachelt angezeigt wie gewünscht (nat. ohne transp.)... aber sobald dass script ausgeführt wurde, ist zwar der schatten transparent, aber es ist nicht mehr gekachelt... sondern nur einmal da... also nur noch 2 pixel hoch ;-) hat jemand eine lösung dafür? wäre echt super... danke ps.: die seite ist offline nur aufm rechner...... 47 Geschrieben von: Armin Vieweg , am 25.05.2009 um 17:47 Hallo Jenny, ja das ist ein bekanntes Phämomen. Im IE6 kann man das transparente PNG nicht kacheln lassen, es wird nicht funktionieren. Du musst als Schattenhintergrund ein PNG nehmen, dass 5 Pixel breit und z.B. 3000 Pixel hoch ist. Die 3000 Pixel richten sich an die vermutlich längste Seite die 5 Pixel an die Dicke des Schattens. Übrigens noch ein Tipp, den ich erst heute hatte: background-position:top right; funktioniert nicht. Nach dem PNG-Fix richtet er das Bild immer links (left) aus. Das kann man auch nicht mit einem festen Pixelwert behoben werden. Einzige Lösung: Du machst das PNG so breit wie der Content und machst dann den Schatten dort ganz rechts. Bei beiden Absätzen wird die Größe des PNG signifikant gesteigert, aber eine andere Möglichkeit entzieht sich meiner Kenntnis. Hoffe geholfen haben zu können Gruß Armin 48 Geschrieben von: jenny , am 26.05.2009 um 09:55 hi armin vielen dank für deine hilfe... da kann ich quasi aufhöhren nach des rätsels lösung zu googlen ;-) ich werde es jetzt wohl für alle gängigen browser normal gekachelt lösen.... für den ie 6 wirds wohl per php mit den 3000 pixel gehen müssen... was haltet ihr eigentlich davon den ie6 überhaupt nicht mehr bzw. nur noch in reiner html-form zu supporten? einige meiner kollegen machen dies seit monaten nicht mehr... ich weiss nicht recht was ich davon halten soll... immerhin soll der ie6 dank winxp noch zu knapp 12% vertreten sein... http://www.tecchannel.de/news/themen/windows/1996927/13_woche_2009_firefox_ueberholt_ie7_in_europa/ nochmals DANKE! jenny 49 Geschrieben von: Armin Vieweg , am 26.05.2009 um 15:20 Hi Jenny, ich persönlich würde Internetseiten die möglichst vielen Leuten zugänglich gemacht werden sollen weiterhin auf den IE6 anpassen. Webanwendungen oder Intranet-Geschichten können meiner Meinung nach auf den IE6 verzichten. Die 12% sind auch recht wage, mein letzter Stand war um die 40%. In Windows XP ist übrigens noch in der Grundinstallation der IE6 vorhanden. Erst ab Vista wurde auf IE7 umgestellt. Wobei der teilweise echt nicht besser ist und auch gerne neue Bugs beinhaltet (wie z.B. der Hover Ghost Bug) die dem IE6 bis dato fremd waren. Gruß Armin 50 Geschrieben von: berit , am 20.08.2009 um 11:33 also ich habe im hintergrund ein transparentes png, auf dem im vordergrund noch andere pngs liegen, die verlinkt sind... sobald ich das hintergrund-png auf transparent stelle funktionieren die links nicht mehr... woran kann das liegen? grüße berit 51 Geschrieben von: Armin Vieweg , am 20.08.2009 um 14:03 Geb den Links eine feste Breite über CSS (z.B. width:200px;). Dann sollte es funktionieren. Gruß Armin 52 Geschrieben von: berit , am 20.08.2009 um 14:27 das problem ist auch, dass es 2 hintergrundbilder gibt... eins wird mit htaccess in die seite geladen, davor ist dann ein transparentes backgroundimage, und darauf die eigentlichen pngs, die auch verlinkungen darstellen... einige mit hovereffekt etc... das backgroundimage ist leider in einer tabelle eingebaut... :/ also hatte ich versucht in der css auch alle tabellen mit der "behavior: url(iepngfix.htc);" zu versehen... aber dann funktioniert garnichts mehr... das menü funktioniert dann nicht mehr und alle links net... :/ mit den festen breiten das funktioniert leioder nicht.... könnte das an der tabelle liegen?? 53 Geschrieben von: berit , am 20.08.2009 um 15:20 ah... ich habs... muss den oberen bildern noch ne breite und position: relative; sowie z-index:1; geben... :) aber danke für deine hilfe! :) liebe grüße berit 54 Geschrieben von: Patrick , am 13.10.2009 um 22:53 Danke für das tolle Script! Bei mir sind die Bilder noch verzerrt aber das wurde ja hier schon beschrieben :) Was mich viel mehr stört ist, dass es mit IE6 gut funktioniert, mit IE5,5 aber zu Abstürzen führt. Zumindest im IETester. Gruß 55 Geschrieben von: Patrick , am 13.10.2009 um 23:05 Ich nochmal :) Nachdem man den Fehler mit der Verzerrung gelöst hat, geht es auch im IE5.5 Vielleicht hilft es ja jemand anderes auch. Gruß 56 Geschrieben von: michi , am 04.02.2010 um 08:09 Ich hatte heute auch das Problem dass bei mir die Bilder verzerrt waren. Ein height und width auto hat nicht geholfen und crop statt scale ist auch nicht ganz richtig. Das Problem war einfach dass das img einen padding hatte! margin funktioniert problemlos! Vielelicht hilft das wen ;-) 57 Geschrieben von: Martin Wagner , am 15.03.2010 um 09:31 habe den hack inkl. grafiken von http://www.twinhelix.com/css/iepngfix/ heruntergeladen. lokal werden die transparenzen angezeigt. habe den gesamten ordner unverändert auf einen aspx-server hochgeladen, die transparenzen werden online nicht angezeigt. funktioert der hack bei aspx-seiten nicht? 58 Geschrieben von: Armin Vieweg , am 15.03.2010 um 11:44 Hallo Martin, ASPX ist ja die serverseitige Programmiersprache. Ausgegeben wird ja trotzdem (X-)HTML (meistens). Von daher sollte es kein Problem geben. Ggf. liegt der Fehler woanders. Hast Du mal einen Link? Falls das nicht öffentlich sein soll, kannst Du mir unter "Kontakt" auch einfach eine Mail schicken. Gruß Armin 59 Geschrieben von: oliver , am 04.11.2011 um 02:42 bei mir funktioniert das ganze nicht im IE tester :( hab img, div { behavior: url(iepngfix.htc); } das iepngfix.htc auch im rootverzeichnis... denoch bleiben die bereiche des png, die transparent sind weiterhin weiss 60 Geschrieben von: Armin , am 04.11.2011 um 06:58 Hallo Oliver, so wie Du es geschrieben hast muss sich die HTC-Datei im selben Verzeichnis befinden, in der die CSS-Datei liegt in der das steht. Sollte das Inline im HTML stehen gilt das Gleich: Es muss im selben Verzeichnis liegen wie das HTML. Wenn Du möchtest, dass es im Root liegt muss im Pfad ein Slash davor. Ich hoffe das war der Fehler, ansonsten schick mir eine Mail (unter Kontakt) mit der URL der Seite und ich gucke es mir gerne mal an. Viele Grüße Armin