David
Hellmann

loading...

Transparente PNG im Internet Explorer 6 09. April 2008

— Lesezeit: 1-2 Min.

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: 13296 — Heute: 5

blog comments powered by Disqus