Transparente PNG auch im Internet Explorer

PNG als Hintergrund

Als erstes erstellen wir ein standardkonformes XHTML-Dokument, versehen Body mit einem Hintergrund damit wir von der Transparenz auch was mitbekommen. Anschließend definieren wir einen Container (DIV) den wir wie gewünscht positionieren und mit den transparentem Hintergrundbild versehen.
Anmerkung, wenn hier in diesem Artikel vom IE (Internet Explorer) die Schreibe ist, dann meint es immer IE kleiner Version 7. Denn ab dieser Version wurden alle hier aufgezeigten Mängel beseitigt.

Demo 1

Anpassungen für den IE6

Wie wir auf der Demoseite 1 sehen konnten funktioniert in den „guten“ Browsern alles wie gewünscht.
Um nun den IE auch davon zu überzeugen benutzen wir eine Besonderheit die nur der IE kennt. Damit auch weiterhin ein valides und den Standards des W3C entsprechendes XHTML dabei heraus kommt packen wir die entsprechenden Angaben in einen Kommentar den wiederum nur der IE interpretiert. Das sieht dann so aus:

<!--[if lt IE 7]>
<style type="text/css">

.transparent{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='../../trans1.png');
}
</style>
<![endif]-->

Nun müssen wir natürlich auch noch das Hintergrundbild das wir dem Container über die Klasse transparent zugewiesen haben verstecken. Dies erreichen wir mit einer Zuweisung die nur die „guten“ Browser kennen, sogenannte Kind-Selektoren.

html>body .transparent{
background:url(../../trans1.png);
}

Demo 2

Anpassungen wegen Links

Da bei dieser Variante die Links im IE nicht zu benutzen sind müssen wir einen weiteren Trick anwenden. Dazu verwenden wir einfach ein Bild welches nur 1 × 1px groß ist und lassen es scalieren.

<!--[if lt IE 7]>
<style type="text/css">
.transparent{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='../../19.png', sizingMethod='scale');
}
</style>
<![endif]-->

Demo 3

Transparente Container

Wir gehen wieder von unserem Grundlayout (Demo 1) aus.
Dazu fügen wir erst mal die Links in den Container ein.

Demo 4

Um nun wieder den IE davon zu überzeugen dies auch zu tun versehen wir den ganzen Container mit Transparenz. Dies geschieht wieder unter Zuhilfenahme der Conditinal Comments:

<!--[if lt IE 7]>
<style type="text/css">
.transparent{
filter:Alpha(opacity=80);
}
</style>
<![endif]-->

Demo 5

In dieser Variation ist nun der ganze Container transparent. Hat den Vorteil, dass wir mit sich wiederholenden Hintergrundbildern arbeiten können.

Transparentes durch Überlagerung

Diesmal fügen wir zusätzlich einen Container für die Links ein. Unseren transparenten DIV positionieren wir mittels float, das Menü legen wir mit position:absolute; darüber.

.transparent{
float:left;
height:20em;
margin:0 0 0 30px;
width:300px;
}
.menu{
left:30px;
position:absolute;
top:30px;
width:300px;
}

Demo 6

Zusammenfassung und Ausblick

Es ist mit viel Aufwand verbunden die volle Leistungsfähigkeit die uns der Einsatz von CSS bietet auszuschöpfen, immer wieder stoßen wir auf Hindernisse die meist der am meisten verbreitete IE aufstellt. Ich bin der Meinung dieser inzwischen schon sehr alte Browser entwickelt sich immer mehr zum Hindernis wenn man neue Techniken einsetzen möchte. Alle anderen Browser wurden in den letzten Jahren weiterentwickelt, der IE seit mindestens 2001 nicht mehr!

Ich hab hier mal noch 2 Demos erstellt die auch transparente PNG verwenden. Diesmal aber ohne Anpassungen für den IE. Also bitte nicht mit dem Internet Explorer < Version 7 anschauen, oder doch ... und ärgern. Wer nun doch auf den Geschmack gekommen ist einen anderen Browser zu testen, dem empfehle ich Mozilla Firefox. Den man bei Mozilla herunterladen kann. Eine einfache Einführung zur Bedienung gibt es auf der Seite von Ralph Segert. Aber auch jeder andere Browser ist besser als der IE.

Vielleicht kommen einmal Zeiten wo der IE in der Verbreitung unter 50 % liegt, dann lass ich mir vielleicht was einfallen und er bekommt gar keine CSS mehr zu sehen 😉