Zum Inhalt springen

Problem mit TYPO3-PNGs und CSS behavior

Erstellt am 7. Juli 2007 · 1 Antwort · letzte Antwort am 7. Juli 2007

Tags: Bilder, HTML & CSS, Frage

droptix ·

Für IE 5 und 6 habe ich in meinem StyeSheet das folgende Behavior definiert:

* {
    behavior:url(fileadmin/templates/iepngfix.htc);
}

Statische PNG-Bilder (erstellt mit Photoshop und Fireworks) auf der Website, z.B. im Header, werden im IE wie gewünscht mit Transparenzen angezeigt.

In meiner TYPO3-Website habe ich einige Text/Bild-Seiteninhalte, bei denen ich ein PNG-Bild einbinde. TYPO3 bzw. GraphicsMagick erzeugt mir für's Frontend Thumbnails - ebenfalls im PNG-Format.

Die von TYPO3 erzeugten PNGs werden aber im Gegensatz zu den statischen nicht angezeigt. Über beide läuft dasselbe CSS-Verhalten und damit auch dasselbe JavaScript.

Beweis (in IE 5.5 oder 6 öffnen)

Wieso geht's mit statischen PNGs, nicht aber mit TYPO3-PNGs?

Sobald ich das behaviour rausnehme, werden die PNGs angezeigt, jedoch wie zu erwarten mit grauem Hintergrund. Kann es sein, dass TYPO3/GraphicsMagick ein PNG-Format erzeugt, mit dem IE's DXImageTransform.Microsoft.AlphaImageLoader nicht klar kommt? Z.B. durch Kompression oder progressiv oder sowas?

P.S. Dieses Problem begegnet mir zum ersten Mal auf meinem eigenen vServer. Bei anderen Host-Providern geht alles wunderbar.

droptix ·

So jetzt setz' ich sogar noch eins drauf: um das Problem zu umgehen, sage ich TYPO3 bei den Bildoptionen Qualität: JPG/sehr hoch. Somit wird das ursprungliche PNG im Frontent als JPG dargestellt.

Beweis

Logischerweise geht auch hier das CSS behavior drüber. Das JS in der iepngfix.htc prüft bei Bildern auf die Dateiendung png, andernfalls prüft es das Element nach einem Hintergrundbild:

if (tagName == 'IMG') {
	if ((/\.png$/i).test(src)) {
		if (currentStyle.width == 'auto' && currentStyle.height == 'auto') {
			style.width = offsetWidth + 'px';
			filt(src, 'scale');
			src = blankImg;
		}
	} else if (src.indexOf(blankImg) < 0) {
		filt();
	}
} else if (bgImg && bgImg != 'none') {
	if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i)) {

Obwohl das JS bei einem JPG bereits aussteigen sollte, wird das JPG-Bild trotzdem nicht angezeigt bzw. vollstöndig transparent gemacht. Wieso denn das?

P.S. Ich spreche hier vom IE 6.0.2900.2180.xpsp_sp2_gdr.070227-2254