Transparente PNG im Internet Explorer 6
Mittwoch, 9. April 2008 von: David Hellmann
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.
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.
...
#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.
...
#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:
...
<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:
<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:
Am 9. April 2008 um 11:29 Uhr
Gute Sache :)
Danke!
Am 9. April 2008 um 19:13 Uhr
Was ist mit Lösungen wie supersleight?
Da muss man nur eine Zeile Quellcode einfügen und es funktioniert ;-)
Am 9. April 2008 um 19:56 Uhr
Weil ich ja eine Version ohne JS wollte und es eher für Backgroundimages ist gedacht war bei mir. Hatte einige Versionen getestet als das Problem bestand und befand diese hier für die beste.
Aber es führen ja immer mehrere Wege nach Rom.
Am 10. April 2008 um 23:02 Uhr
Richtig :-)
Am 14. April 2008 um 23:04 Uhr
Ich glaube du hast die bilder für die Überschriften “Die normale CSS Datei” und “Die angepasste CSS Datei für den Internet Explorer 6″ vertauscht! ;)
Am 14. April 2008 um 23:06 Uhr
Danke! Ist geändert.
Am 14. April 2008 um 23:26 Uhr
aber trotzdem sehr schöne anleitung, und sehr schöne demo files, hab ich vorher immer nicht hinbekommen! danke! ;)
Am 14. April 2008 um 23:34 Uhr
Das freut mich, dankeschön! Mehr davon ist schon in Arbeit..
Am 28. April 2008 um 12:59 Uhr
Hast du mal gecheckt, ob das immernoch funktioniert wenn dynamisch per JavaScript Inhalte nachgeladen werden?
Supersleight hat damit auf jeden Fall Probleme…
Am 28. April 2008 um 13:03 Uhr
Nein habe ich nicht probiert :) sollte aber denke ich kein Problem sein. Aber 100% sagen kann ich es nicht.
Am 8. Mai 2008 um 07:47 Uhr
Hmm…. auf diese Lösung bin auch schon öfters gestossen! Ist auch schöner als eine javascript Lösung. Nur bei mir hat das bis jetzt nicht funktioniert :-(! Was mach ich wohl falsch? Irgendwie wird bei mir im IE6, mit dieser Lösung, kein PNG Bild mehr angezeigt?! Das verstehe ich nicht… obwohl der Pfad stimmt!
Vielleicht kann mir ja jemand helfen?!
Am 8. Mai 2008 um 09:40 Uhr
Hmm…stimmt, wenn ich mir das Beispiel im IE6 anschaue, funzts irgendwie auch nicht…
Am 8. Mai 2008 um 10:16 Uhr
Hab das Beispiel letztens verschoben in einen anderen Ordner, irgendwie passen die Pfade nicht mehr, bin aber gerade nicht zuhause. Wird aber geändert ;)
Am 9. Mai 2008 um 07:38 Uhr
na ja abgesehen vom pfad… bei mir will das irgendwie auch nicht! ich hatte da zwar auch schon etwas mit javascript probiert, dass hat auch prima funktioniert, hatte aber leider nebenwirkungen bzw. auswirkungen auf anderes und das ist unschön. diese lösung hier wäre ideal. nur irgendwie will das bei mir irgendwie nicht funktionieren!
geht das den bei euch anderen ohne probleme? würde mich interessieren.
Am 10. Mai 2008 um 06:48 Uhr
also im moment geht die demo bei mir auch nicht aber warum kann ich gerade nicht sagen. ich weiß nur das es definitiv ging da ich es ja vorher getestet habe, auch im internet explorer 6
sobald ich zuhause bin werde ich mich ran setzen!
Am 15. Mai 2008 um 14:12 Uhr
ich hab hier die lösung: man muss das ganze so eingeben:
#PNGBILD {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’bild.png’, sizingMethod=’scale’);
background:none;
}
dann geht das ganze prima!! :-) zumindest bei mir hat es nun funktioniert!
Am 19. Mai 2008 um 14:00 Uhr
Fehler ist behoben und es geht nun wieder. War wie zu erwarten nur ein Fehler bei der Pfadangabe zum Bild :)
Danke noch mal für den Hinweis!