ACHTUNG: Neue Version hier:
http://www.sfeni.de/2008/07/08/iepngfix-mod-mit-background-position-right-support-und-ahover-handling/

Schon seit Monaten verfolgt uns das Problem mit transparenten PNGs und Tabs mit variabler Breite. Nach etlichen erfolglosen Möglichkeiten, Stunden, etc. kam am Mittwoch die Lösung. Es gibt ein modifiziertes iepngfix von gedankenkonstrukt.de das die Möglichkeit unterstützt PNGs im Internet Explorer 6 (ie6) zu positionieren. Leider nur von links oben und ein background-position:right wird ebenfalls nicht unterstützt! Schade! Aber nach einigen Versuchen konnte ich das htc-File für den ie6 so erweitern, dass das iepngfix-mod.htc nun auch background-position:right unterstützt. Dadurch wird es nutzbar für variable Breiten mit rechts positionierten PNG Hintergründen mit Transparenz.

Ein klitzekleinen Nachteil hat das ganze, den man allerdings verkraften kann. Gehen wir davon aus, dass ein "li a" ersetzt werden soll, so sah der CSS Code vorher so aus:

li a { behavior: url(js/iepngfix-mod.htc) };

Da nun aber ein Div erstellt wird, muss der CSS Code wie folgt aussehen:

li a { behavior: url(js/iepngfix-mod.htc) };
li a div { behavior: url(js/iepngfix-mod.htc) };

Damit sollte man aber leben können! :-)

Download iepngfix.htc

Original iepngfix.htc und iepngfix-mod.htc:
Internet Explorer (IE) PNG Alpha Transparency Fix with background-position support
IE PNG Fix - TwinHelix

10 Kommentare:

wird innerhalb der nächsten Tage aktualisiert. Ich habe bereits eine erweiterte (einfachere) Version entwickelt.

Hallo,
Wirklich supi aber der Hammer wäre eine Version wo center oder allgemein alle Richtungen unterstützt. Wenn jemand das coden könnte ;) ich leider nicht da mir beim iepngfix script leider so schon nicht alles glasklar ist....ansonsten aber HUT ab da ich schon den Mod super benutzen kann mit Angaben der XY Achse vom Mutterelement z.B. einem Table....

Werde mal wieder vorbeigucken ob hier ne neue Version verfügbar ist....man SUPER

Es gibt bereits eine bessere Version, allerdings ohne center. Da ist der Hack mit dem CSS nicht mehr notwendig. Da finde ich gerade leider keine Zeit das in eine schöne Form zu bringen, da das noch sehr unsauber ist. Wird aber bereits für ein sehr großes Projekt eingesetzt. Muss mal schauen wann ich soweit bin. Ist natürlich ein Anreiz wenn jemand danach fragt ;)

Auf was für einer Basis ohne CSS Hack? Bei mir ist ja die Position im CSS angegeben?

Ja, schon richtig so :D

das hier fällt dann zur Häfte weg:
li a { behavior: url(js/iepngfix-mod.htc) };
li a div { behavior: url(js/iepngfix-mod.htc) };

Und ist wie gewohnt nur noch:
li a { behavior: url(js/iepngfix-mod.htc) };

OK, bei mir war vorher eeh schon ein codesegment das so aussah:

img, div { behavior: url(iepngfix.htc) };

von daher habe nur bemerkt das ich nun scheinbar die X Y Achsen mit dem Mod benutzen konnte, respektive weiss ich nicht ob das vorher auch schon hätte machen können??

Ich denke CSS ist manchmal eeh etwas verhext was die Browser-Kompatibilität anbelangt ??

[...] dargestellt werden kann (richtig). Was noch ein Weg w?re ist das neu gefixte iepngfix-mod.htc ...hier zu finden!! Das funtzt supi....man kann sogar positionieren auf der X Y Achse gemessen ab [...]

Die neue Version mit Bugfixes und hover-Support findet Ihr unter dem neuen Beitrag:

http://www.sfeni.de/2008/07/08/iepngfix-mod-mit-background-position-right-support-und-ahover-handling/

Hört sich auch cool an der Link Mod Fix mit background-position-right-support-und-ahover-handling ...dann gehts hoffentlich bald so weiter --> -und-center-support-plusrollover-xtra-alpha-alltransparency....

;) Danke im Vorraus.....

Das muss ich probieren.....

Wie oder was bringt der Hovereffekt? Ist das mehr was wenn man Bilder im Menu benutzt?

Vielleicht sollte ich zuerst lesen dann schreiben.... ;)

Kommentar veröffentlichen