Unterstützung von PNGs im Internet Explorer

[PW-toXic]

Ich bin am Verzweifeln.. Wir befinden uns im Jahr 2009, und der aktuellste Internet Explorer stellt bei mir halbtransparente PNGs immer noch nicht richtig dar...

Das kann doch nicht wahr sein!! Ich hab das Gefühl, ich träum gerade. Das kann doch ned wahr sein. Wolln die mich verarschen???


Gibts da irgendeinen Hack, der Internet Explorerer dazu bringt ein flash-ähnliches Plugin zu installieren, das diesen BUG(!!!) repariert?

Hier ganz konkret was ich gerne machen möchte, und was im opera/firefox wie erwartet funktioniert, aber im Internet Explorerer 8 unter Windows 7 (TOP AKTUELL!!!) wieder mal garnicht geht.

Ich verlier echt langsam den Spass daran Webseiten zu entwerfen....
Ich hoff ich hau hier heut in meinem Zimmer ned alles kurz und klein..

 

[schmidmi]

Das Ganze kannst du entweder per JS lösen oderziemlich einfach über CSS.
Dazu gibt es auch einige Einträge in der MSDN.

 

[PW-toXic]

das geht nicht in verbindung mit opacity...
davon abgesehn braucht man das seit IE8 nichtmehr..
Anstatt png richtig zu implementieren, baut IE irgendeinen DX hack ein, so dass anderes zeugs natürlich nichtmehr geht. Das ist doch zum kotzen.
Man kann keine Webseite machen, ohne dass man extra für den IE irgendwas zusammen hacken muss.

Das ist zum Kotzen!

 

[Eagle-PsyX-]

Das ist zum Kotzen!

Schau mal, das könnte dir helfen, dann musst du den Hack nicht manuel ausführen.
Webmasterpro PNG Bilder in älteren IE Versionen

Ergänzung:
Wie was? IE 8? Dann ist es ein Bug, denn ich habe das schon funktionierend im IE 7 gesehen! Evtl. hast du etwas falsch gemacht.

 

[PW-toXic]

Ihr zeigt mir alle Lösungen, wie man die Transparenz von PNGs für IE<8 aktivieren kann. Das ist mir aber eigentlich egal!

Ich will dass die transparenz ordentlich mit IE8 funktioniert.
Wenn ich kein opacity: 0.5 oder für IE das äquivalent filter: alpha(opacity=0.5); habe, dann läuft alles richtig, aber sobald ich PNGs mit halbtransparenten elementen UND CSS opacity habe, geht alles schief, und die PNG transparenz geht kaputt.

Wie kann man nur so beschissen programmieren? Ich fass es ned.. Microsoft ist mit Abstand das reichste IT Unternehmen der Welt und bekommt so simple Aufgaben ned hin..


Update:
So jetzt hab ich mir nach 2 Stunden weinen und anschliessendem Wutausbruch eine Alternativlösung ohne PNGs überlegt.. jetzt is zwar die Semantik im arsch, aber was soll man machen...

 

[QXARE]

Transparenz funktioniert im IE8 doch wunderbar, es liegt also sicher nicht am IE sondern an deiner Vorgehensweise.

Weder

opacity: 5;

noch

filter: alpha(opacity=50);

(IE7) werden vom IE8 unterstützt.

Unter IE8 lautet das neuerdings

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

was sehr einfallsreich ist.

Für was man jetzt aber opacity und PNG Transparenz in ein und demselben Element verwenden will ist etwas fragwürdig.

 

[PW-toXic]

1)
filter: alpha(opacity=50); wird vom IE8 unterstützt
Beweis: http://toxic.hoecht.dyndns.tv/core/index/test

2) Es liegt am IE8, da es bei allen anderen browsern geht.
Der Logik nach muss folgendes passieren: Wenn ich ein Bild mit halb-transaprenz mach, und es per CSS insgesamt transaprenter mach, dann muss es an diesen Stellen noch durchsichtiger werden.
Genau das passiert mit allen gängigen browsern (safari, firefox, opera, chrome etc..)
Nur beim IE8 eben nicht

3) Wieso sollte man halbtransaprente PNGs nicht per css halb-transparent machen dürfen? Wo liegt da der große unterschied, als wenn ich das mit vol-farbigen Bildern mache?
Aber du kannst mir ja gern erklären wie ich folgendes erreichen kann:
Ich habe ein Element das ein Hintergrundbild haben soll, das den Hintergrund durchschienen lässt. Als Animations Effekt möchte ich, dass dieses Hintergrundbild langsam ausblendet.
Daher macht es durchaus Sinn das mit einem PNG zu machen...


aber da der IE8 zu dumm ist beides zu kombinieren wie jeder andere beliebige Browser, hab ich jetzt nen hack draus gemacht, das auch der IE8 kann..

Alternativ hab ich noch das probiert:
http://code.google.com/intl/de-DE/chrome/chromeframe/
Allerdings möchte ich das den Usern irgendwie nicht zumuten.. Also hack ich lieber für den IE8 rum.

 

[Eagle-PsyX-]

Wenn es bedingt bei IE7 klappt, dann liegt es vielleicht an einer verbugten, nicht aktuelle IE-Version? (damit meine ich 8.xxx)
Zeig mal ein Screenshot von deinen "kaputten" PNGs? Manche Programme schmeißen auch beschissene PNG-Formatierungen aus...

 

[PW-toXic]

Ich hab das mit dem IE8 mit einer frischen windows7 installation getestet.
die PNGs wurden mit einer aktuellen PHotoshop CS4 version erstellt.

Beim IE7 klappt es glaub ich garnicht, aber da bin ich mir ned sicher

.. Egal ich hab das Problem jetzt eh gelöst.. jetzt gehts mit jedem browser.

 

[XunnD]

Meines Wissens nach muss man den Weg über den DX-Hack gehen, musste das in einem Projekt ebenso lösen.

 

[QXARE]

Naja Hack, wenn du schon faden willst dann kannst sowieso ein nicht transparentes Bild nehmen, das am Anfang mit opacity initialisieren und dann halt verändern. wow.

 

[PW-toXic]

das geht aber nur, wenn ich das schwarze bild darüber lege, da sonst der text darunter verschweinden würde.
Das nächste Problem ist, dass das <a> Element auf der obersten Ebene liegt, da sonst der link nicht geht. Die Folge ist, dass der Link keinen Text hat, und somit das ganze eine sehr schlechte Semantik hat im Gegensatz zu meiner initialen Idee.

Daher ist es Hack.

 

[DerEineDa]

Also in meinem IE8 unter Windows 7 funktionieren (halb)transparente einwandfrei, selber gerade noch getestet. Ich bin mir sehr sicher, dass es unter Windows XP mit dem IE7 auch schon funktionierte.

Getestet mit angehängter PNG-Datei und diesem Quelltext:

<html>
<body style="background:red;">
	<img src="Unbenannt.png">
</body>
</html>

 

[QXARE]

Ja, aber will das Bild noch zusätzlich mit opacity durchsichtiger machen als es eigentlich eh schon is x). Hab ich noch nie gemacht und wüsste auch nicht wo man das einsetzen soll. Glas kann auch nicht durchsichtiger werden als es schon ist ;D

 

[PW-toXic]

tRIAS du vergleichst gerade Fenster mit GIFs.. Fenster sind (meist) voll-transparent, oder garnicht.
pngs haben jedoch eine halbtransparenz.. und hier liegt ja auch das Problem..

Einer redet mehr am Thema vorbei als der andere

 

[QXARE]

Naja ich weiss eh dass es schwer ist dir zu helfen weil du immer nur das Negative siehst. Und noch was, wenn du den Hack grad auf deiner HP in der Navi verwendest dann würd ich dir aber sicher davon abraten. Ein leerer <a>-Tag wo der Text davor steht? Das geht mal garnet.

-> Text in <a>-Tag, vllt. in ein <span> rein. Zusätzliches <span> oder inline-Element ins <a> reinhauen und dem den style verpassen.

 

[PW-toXic]

Ich seh ned immer nur das Negative, sonder ich Analysiere
Und das kann ich sogar beweisen:
Ich habe meine Lösung als schlecht empfunden. Benutze sie aber, da sie funktioniert, und ich damit leben kann.
Offensichtlich sehe ich also nich tnur das Negative, sondern auch das Positive. Und das wäge ich ab.


Deine Lösung versteh ich ned. Da das ja ned allzviel Code ist, kannst du das vielleicht konkret in 3-4 Zeilen code zeigen?
Aber sei dir bewusst dass es folgende Einschränkungen gibt:
1) Das opacity Element muss über dem Text liegen, da sonst der text auch verschwindet
2) Das Link Element <a> muss an oberste Stelle liegen, da man ja sonst nicht auf das Element klicken kann.
Blöderweise beinflussen sich 1 und 2 gegenseitig, so dass man nicht viele Möglichkeiten hat.

Aber evtl. hab ich das auch falsch analyisiert Auf deine Lösung bin ich daher gespannt.

 

[Eagle-PsyX-]

Dann hol dir IE 7. Wenn es auch unter XP läuft ist es wohl ein Win7 Fehler!

@DerEineDa
Man sieht es (ok du hättest lieber schwarz nehmen sollen^^) nicht dass es ein semi-transparentes PNG ist, doch wenn man es in PS öffnet schon.

@PW-toXic
Wenn du es wirklich transparenter haben willst, verändere das in Photoshop und fertig. Vielleicht solltest du warten bis der IE8 ausgereift ist, bzw. alle Kinderkrankheiten eliminiert sind.

Und die Datei geht im Anhang problemlos in IE7.

 

[PW-toXic]

Hääää??
Es geht hier nicht darum, dass es allein mit PNG ein Problem gibt, sondern nur bei halb-transparenten PNGs in Verbindung mit der CSS Eigenschaft opacity (bei IE: filter: alpha(opacity=..)
Wieso also zeigst du mir ein einfaches PNG?, dass das geht, weiss ich auch.

Und dein Vorschlag das ganze transparenter zu machen lässt mich ja noch mehr verzweifeln:
Ich sagte bereits, dass ich diesen "transparenter" werden Effekt dynmisch brauche. Man konnte sogar ganz konkret im Beispiel sehn, wie das ganze ablaufen soll:
http://toxic.hoecht.dyndns.tv/content/gdsahs Die Navbar.
Das kann man nicht manuell machen...

Ich weiss ich wiederhole mich

 

[QXARE]

<li><a href="/content/start"><span>Home</span><i><!-- --></i></a></li>

<span> und <i> Tag absolut positionieren und Breite sowie Höhe anpassen. <span> dann mit z-index in den Vordergrund stellen. <i> mit Hintergrundbild und opacity ausstatten.

Sollte funktionieren.