CSS-Lösung für IE-PNG-Problem?

[muellermanfred]

Moin.

Ich habe versucht, ein Logo in eine Wiki-Vorlage einzubauen. Das ist mir gelungen. Und weil das schöner aussieht, habe ich ein PNG mit einem halbtransparenten Rand daraus gemacht.

Und weil das Leben ungerecht ist, haben die PC-Benutzer in unserem Netz nun das Nachsehen, weil der Internet Explorer ab version 6 abwärts die Transparenzen nicht umsetzt.

Ja, ich habe die Suchfunktion benutzt und das hier gefunden, aber es hilft mir nicht, weil der JavaScript-workaround nicht mit Bildern funktioniert, die als Boxhintergrund per CSS eingebunden werden ...

Frage:
Was kann ich tun, um den PC-Kollegen ein korrektes Logo anzuzeigen, wenn ich den Mac-Kollegen trotzdem die korrekte Variante zeigen will?

 

[dms]

Korrekt im Sinne von gleichwertig: Fehlanzeige.

Ich würde für den IE<=6 einfach die entsprechende CSS-Regel überschreiben und eine Grafik ohne Transparenzen anzeigen.

 

[muellermanfred]

Korrekt im Sinne von gleichwertig: Fehlanzeige.

Ich würde für den IE<=6 einfach die entsprechende CSS-Regel überschreiben und eine Grafik ohne Transparenzen anzeigen.

Mist. Es ist ein ovales Logo. Und der Hintergrund ist ein Verlauf. Und ich habe schon gesehen, daß die Positionierung in verschiedenen Browsern unterschiedlich ist ...

 

[dms]

Vlt. kann man es doch fixen.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='...hier pfad zur grafik', sizingMethod='scale');

Dadurch ändert sich jedoch das Verhalten des Elements recht grob. Musst Du ausprobieren ob das so für dich zu gebrauchen ist.

Alternativ könntest Du ja ein Bild per JavaScript im DOM einfügen. Wenn Du keinen JS Code einfügen kannst, kasst Du das auch im CSS-File verstecken. Ganz grob skizziert würde das so aussehen.

#element {
   background:none !important;
   width:expression(this.runtimeStyle.behavior="none";var imgObj=new Image();imgObj.src='...hier pfad zur grafik';this.appendChild(imgObj);)
}

Muss man sicherlich noch experimentieren um es zum laufen zu bekommen. Dann hast Du an der Stelle ein richtiges Bild nachträglich platziert. Auf dieses Bild muss man natürlich noch den PNG-Fix anwenden.

 

[muellermanfred]

Vlt. kann man es doch fixen.

Hm, den ersten hint verstehe ich leider nicht (sorry, sagte ich, daß ich Laie bin?).

Wenn Du keinen JS Code einfügen kannst, kasst Du das auch im CSS-File verstecken.

Okay, da weiß ich, wo ich es hintun könnte. Die CSS-files kann ich editieren.

Aber das hier ist kniffeliger:

Auf dieses Bild muss man natürlich noch den PNG-Fix anwenden.

Tscha, wohin mit dem Script?

Ich habe lediglich die CSS zur Verfügung und eine .plist, in der ich ein paar andere Sachen anpassen kann. Woher der WikiServer - ich vergaß, zu erwähnen, daß ich ein Wiki-Theme aus OS X Server anpasse - die HTML-Struktur zieht, ist mir noch schleierhaft. Da müßte ich das Script ja reinschreiben, oder zumindest den Link setzen, um es aufrufen zu lassen.

Also weitersuchen ...

 

[dms]

Hm, den ersten hint verstehe ich leider nicht (sorry, sagte ich, daß ich Laie bin?).

Das ist auch eine CSS-Anweisung (naja, eigentlich nicht, ist halt ein Microsoft-Hack)

#element {
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='...hier pfad zur grafik', sizingMethod='scale');
}

Das Problem dabei ist folgendes: Je nachdem was Du bei sizingMethod angibst, wird entweder das Element in seiner Grösse verändert (image) oder aber das Bild an die Grösse des Elementes angepasst. (scale) Deswegen ist dieser Filter meist nicht ohne Anpassung des Markup zu gebrauchen.

Tscha, wohin mit dem Script?

Auch ins CSS-File. Müsste man noch umschreiben, aber möglich wäre es.

 

[moses_78]

Sag mal obs funktioniert hat und poste deine Lösung, bitte.
Ist anscheinend ein häufiges Problem.....

 

[miss.moxy]

Gerade gefunden, vielleicht hilfts/interessiert es ja den einen oder anderen

http://macx.de/journal/testcase-der-neuesten-png-fix-methoden/

m.m