David Hellmann

x

Ahoi!

Schreib was dir auf dem Herzen liegt oder was auch immer sonst du mir mitteilen willst. Du hast die Wahl, entweder per supercoolem Kontaktformular oder ganz klassisch per E-Mail — Beides kommt ganz sicher bei mir an und wird natürlich auch beantwortet. Ich freue mich auf Deine Nachricht!

David Hellmann
Köln, Deutschland
Website / E-Mail

Transparente PNG im Internet Explorer 6 09. April 2008

Category: Tutorials8 Comments

Transprente PNG GrafikenWer 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:

LIVE DEMO DOWNLOAD

Gelesen: 12647 — Heute: 3

8 comments

  1. 1

    pinerski

    am 03.03.2009 um 9:07

    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.

    Diesen Kommentar zitieren

  2. 2

    pinerski

    am 03.03.2009 um 9:17

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

    Diesen Kommentar zitieren

  3. 3

    David Hellmann

    am 03.03.2009 um 12:18

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

    Diesen Kommentar zitieren

  4. 4

    Martin

    am 09.04.2009 um 12:47

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

    Diesen Kommentar zitieren

  5. 5

    daple

    am 31.01.2010 um 21:46

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

    Diesen Kommentar zitieren

  6. 6

    Nemesis

    am 08.03.2010 um 9:36

    Vielen Dank!

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

    Diesen Kommentar zitieren

  7. 7

    Jensis Werbeagentur

    am 24.06.2010 um 23:42

    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?

    Diesen Kommentar zitieren

  8. 8

    David Hellmann

    am 24.06.2010 um 23:44

    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.

    Diesen Kommentar zitieren


instagram

twitter

tumblr

dribbble

facebook

google+

foursquare