{"id":372,"date":"2007-12-07T15:04:50","date_gmt":"2007-12-07T14:04:50","guid":{"rendered":"http:\/\/www.navision-blog.de\/2007\/12\/07\/transparente-png-im-internet-explorer-6\/"},"modified":"2007-12-08T09:55:11","modified_gmt":"2007-12-08T08:55:11","slug":"transparente-png-im-internet-explorer-6","status":"publish","type":"post","link":"http:\/\/www.navision-blog.de\/blog\/2007\/12\/07\/transparente-png-im-internet-explorer-6\/","title":{"rendered":"Transparente PNG im Internet Explorer 6"},"content":{"rendered":"

Ich bin schon öfters auf das Problem gestoßen, dass ich transparente PNGs verwendet habe, diese aber leider nicht korrekt im IE 6 angezeigt werden. \ud83d\ude41 Also habe ich mich mal auf die Suche nach einer Lösung gemacht und bin auch fündig geworden.<\/p>\n

Und zwar muss man als erstes einen CSS Hack benutzen, damit nur der Internet Explorer 6 diesen Teil des Stylesheets sieht. Danach benutzt man noch einen Filter welcher auch nur vom IE unterstützt wird und schon funktioniert die Transparenz wunderbar. \ud83d\ude42<\/p>\n

<\/p>\n

Beispiel:<\/p>\n

#header {
\n\u00a0\u00a0\u00a0 background: url(‘images\/header_reflection.png’) no-repeat top left;
\n\u00a0\u00a0\u00a0 }<\/p><\/blockquote>\n

Das ist das transparente Bild welches im IE6 sehr unschön aussieht, aber wenn man zusätzlich noch folgenden Eintrag im Stylesheet hinzufügt, dann sieht es wie in jedem modernen Browser aus.<\/p>\n

* html #header {
\nfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src=’http:\/\/www.knieorthese.com\/wp-content\/themes\/Basti_de\/images\/header_reflection.png’);
\nbackground-image: none;
\n}<\/p><\/blockquote>\n

Zu beachten ist, dass der Pfad zum Bild stimmt. Denn wenn sich das Stylesheet im Unterverzechnis befindet kann es eventuell zu Problemen kommen. Außerdem gibt es Probleme, dass man die Bilder nicht mehr “verschieben” kann, wie es zum Beispiel bei einer dynamischen “rounded corner” Box zum Einsatz kommt.<\/p>\n

Diese ganzen Verrenkungen waren nötig, weil leider immer noch sehr viele Menschen den IE6 verwenden, zumindest auf den Seiten an den ich arbeite. Dies ist ein Beispiel von Knieorthese<\/a>, welche in den letzten Tagen Online gegangen ist und auch auf WordPress basiert.<\/p>\n

Zum Abschluss noch ein Screenshot aus dem IE6 (in der VM \ud83d\ude09 ). Der komplette Header (Reflection und Logo) ist ein transparentes Bild bis auf die Schrift “Knieorthese”, welches normaler Text ist.<\/p>\n

\"knieorthese_ie6\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Ich bin schon öfters auf das Problem gestoßen, dass ich transparente PNGs verwendet habe, diese aber leider nicht korrekt im IE 6 angezeigt werden. \ud83d\ude41 Also habe ich mich mal auf die Suche nach einer Lösung gemacht und bin auch fündig geworden. Und zwar muss man als erstes einen CSS Hack benutzen, damit nur der […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11,39,29],"tags":[301,299,300],"_links":{"self":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts\/372"}],"collection":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/comments?post=372"}],"version-history":[{"count":0,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts\/372\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/media?parent=372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/categories?post=372"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/tags?post=372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}