Transparente PNG im Internet Explorer 6

09. April 2008 — Tutorials — 6 Kommentare

Transprente PNG Grafiken 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.

...
#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:

LIVE DEMO DOWNLOAD

Tags: CSS, internet explorer, png, Tutorials
Gelesen: 4705 · today: 6 · last: 15. March 2010

6 Kommentare • Eintrag schreiben

03. März 2009
#1 pinerski

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.

""zitieren"
03. März 2009
#2 pinerski

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;}

""zitieren"
03. März 2009
#3 David Hellmann

richtig :) nur sollte man gar keinen IE6 nutzen, hehe ;)

""zitieren"
09. April 2009
#4 Martin

unitpngfix.js ist im übrigen auch sehr zu empfehlen. Da muss man nicht extra in der CSS viel rumfriemeln.

""zitieren"
31. Januar 2010
#5 daple

Klasse Blog; danke für die Tipps, insbesondere @ #2 von Pinerski!

""zitieren"
08. März 2010
#6 Nemesis

Vielen Dank!

Hab mir dadurch eine unschönere Version Version einer Website ohne Transparenzen erspart ;).

""zitieren"

Kommentar schreiben

Letzte Kommentare

David Hellmann schreibt: "Zitat schubi ↑: In einem c’t Report übers iPhone und das Nexus (Ausgabe 06/2010) wird es ebenfalls auf den Punkt gebracht: Das..."
schubi schreibt: "In einem c’t Report übers iPhone und das Nexus (Ausgabe 06/2010) wird es ebenfalls auf den Punkt gebracht: Das “Ökosystem” des iPhone steht..."
Benjamin Weigl schreibt: "Wat, wer bist du denn ? Gib deinen Aussagen mal nen Namen. Möchtegern-Elitär, gefällt mir. Und jetzt verrat mir dann doch noch, weshalb das meine..."
David Hellmann schreibt: "Nein nein nein, die Akkugeschichte da geh ich nicht mit. Wir reden von Wechselakkus. Was bringt mir ein Wechselakku wenn der im MacBook doppelt so..."
amarzahn schreibt: "Zitat David Hellmann ↑: Bei den Sachen mit den Adaptern geb ich dir recht. Das ist teilweise wirklich abzocke. Thema Garantie gibt es glaube aber auch..."