Ein leidiges Thema...

Viele moderne Design lassen sich nur per PNG Dateien schön umsetzen. Machmal komm man eben kaum drum herum. An sich ja kein Problem, jeder anständige Browser kann das ohne das man ein Wort darüber verlieren müsste.

Gebe es nicht den IE.

Der MS IE ist leider nicht in der Lage von sich aus PNG's mit korrekter Transparenz anzuzeigen. Für gewöhnlich zeigt er einfach nur einen hellen Hintergrund an.

 

Browser

  • MS IE 5.5
  • MS IE 6

 

Der IE 7 hat nun endlich eine native Unterstützung für PNG's.

 

Wie geht das denn?

Mit Hilfe von sog. CSS Hacks, die nur vom MS Internet Explorer umgesetzt werden.

Mit diesen Hacks steuern wir, die nur im Internet Explorer verfügbaren, Filtereigenschaften ein. Einmal direkt, einmal per Script. Dieser Filter arbeitet im Fall der direkt eingebundenen Bildern mit einem kleinen Behavior und einer transparenten gif Grafik (die auch der IE transparent darstellen kann) die zum rendern der eigentlichen png Grafik genutzt wird. Alle bnötigten Dateien sind in der zip Datei enthalten.

Ich bevorzuge die reine CSS Variante, die aber nur mit Hintergrundbildern funktioniert. Dafür benötigt sie keine weiteren Dateien (reines CSS), die oft Probleme mit den Pfaden bereiten.

 

Für Hintergrundbilder

Mit diesem Code kannst du die PNG Hintergrundbilder von z.B. div's mit Alphatransparenz ausstatten.

Beim Pfad zum Bild des Filters ist darauf zu achten, nicht wie normal die Pfade relativ zur CSS Datei anzugeben, sondern relativ zur aufrufenden Datei. Für gewöhnlich ist es einfacher gleich einen absoluten(http://www.domain.de/pfad/bild.png)anzugeben.

Vergiss nicht die Größe des div's anzugeben.

* html #png_bg {
	background: url(blank.gif);
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='design/felixnagel.com_logo.png', sizingMethod='scale');
	
	/* Größenangabe unerlässlich (!) */
	width: 205px;
	height: 35px;
}

Für normale Bilder

Bei ganz normal mit eingebunden Bildern kann man auch einen Hack anwenden.

Vergiss auch hier nicht die Größenangaben des Bildes:

 

* html body img { 
  behavior: url('design/pngbehavior.htc'); 
}  

FAQ & Bugs

Nicht CSS 2.1 valide

Meines Wissens gibt es keine valide Lösung. Der Internet Explorer zwingt zu solch merkwürdigen CSS Anweisungen.

 

PNG Grafiken nicht klickbar

Es kann vorkommen das PNG Grafiken die auf diese Weise eingebunden sind und gleichzeitig als Hyperlink dienen nicht klickbar sind.

Dies tritt sehr selten bei bestimmten Überlappungen mit den CSS Anweisungen position und/oder display auf.

In diesem Fall kann (manchmal) das hinzufügen von  position: relative; zu den Grafiken helfen.

 

Grafik wird in allen Browsern ausser IE angezeigt

Es wird im Internet Explorer nichts angzeigt. Im Firefox, Opera, etc. gibt es keine Probleme.

  • Hast du alle Pfade überprüft?
  • Liegt die blank.gif auf root?
  • Hast du die Größe definiert?

 

Nicht PNG's werden falsch dargestellt

Falls du Probleme mit nicht PNG Grafiken bekommst weil der * html body img Selektor eben alle img Tags auswählt, kannst du so vorgehen:Tausche * html body img gegen z.B. * html body .png_pics und füge zu allen png Grafiken diese Klasse hinzu:

 

Keine Lösung gefunden? Wenn ich Zeit habe, helfe ich gerne! Schreib mir einfach.

 

Demo & Download

Eine Demo ist diese Webseite. Sie arbeitet mit der hier beschriebenen Technik.

Die im Download enthaltene <media 253 400x600>Testseite kann hier aufgerufen</media> werden.

Die Kommentarfunktion ist für diesen Artikel deaktiviert.

0 Kommentare