Transparentes PNG, Workaround

[Meflin]

Hi,
ich habe ein kleines problem mit dem design meiner neuen webseite. geplant ist so ein tesa effekt, dass es aussieht als wäre die seite auf den hintergrund geklebt. dabei treten 2 probleme auf:

1. Der IE hat ein Problem mit PNGs, siehe Pics:
http://www.acira.net/mozilla.gif so sollte es aussehen (mozilla)
http://www.acira.net/ie.gif so sieht es im ie aus...

2. Gelöst hab ich das ganze, indem ich ein transparentes png mit den tesa streifen erstellt habe und via css über die webseite gelegt habe. nur leider hat das zur folge, dass die site ansich keinen fokus mehr bekommen kann, sprich es funzt kein link und nix.

Nun bin ich auf der suche nach einem workaround, wie würdert ihr das designtechnisch lösen?

*MFG*

[StanY]

Der IE soll irgendwie Probleme mit der Alphatransparenz haben oder so *am Kopf kratz*. Rund um: er ist kacke.

Mach's doch einfach per GIF? ôO

[Matze]

So viel ich weiß, kann der IE gar keine transparenten png-Bilder darstellen.

Nimm, wie StanY schon sagte, einfach gif-Bilder.

[Meflin]

Zitat:

Zitat von Matze

So viel ich weiß, kann der IE gar keine transparenten png-Bilder darstellen.

Nimm, wie StanY schon sagte, einfach gif-Bilder.

ok, bleibt aber immernoch das (viel gravierendere) Problem 2!

[StanY]

Ich schätzte mal, dass die Transparenz etwas gewaltig im IE durcheinander bringt. Was aber doch arg unrealistischer ist. Viel einfacher ist ein Code-Fehler. Evtl. gar nur ein vergessenes '>' am Anfang (;.

edit: Evtl. liegt auch das PNG über den Links? Arbeite da lieber mit CSS und background-image/-postition/-repeat.

edit2: Zeig doch mal Quellcode ^^

[Meflin]

Zitat:

Zitat von StanY

Ich schätzte mal, dass die Transparenz etwas gewaltig im IE durcheinander bringt. Was aber doch arg unrealistischer ist. Viel einfacher ist ein Code-Fehler. Evtl. gar nur ein vergessenes '>' am Anfang (;.

edit: Evtl. liegt auch das PNG über den Links? Arbeite da lieber mit CSS und background-image/-postition/-repeat.

ich habe mit css, aber wenn ichs als hintergrundbildmach geht ja der tesaeffekt kaputt, soll heissen der tesa wäre hinter der schrift, das ist aber unrealistisch! versteht ihr das problem?
btw: gif geht auch nicht so toll:
http://www.acira.net/gif.gif

[StanY]

Ja. Okay. Das geht 100%ig mit Gif. Musst es halt nur richtig erstellen.

[Meflin]

Zitat:

Zitat von StanY

Ja. Okay. Das geht 100%ig mit Gif. Musst es halt nur richtig erstellen.

für wie blöd hältst du mich? das ist transparenz...

[Meflin]

Zitat:

Zitat von StanY

edit: Evtl. liegt auch das PNG über den Links? Arbeite da lieber mit CSS und background-image/-postition/-repeat.

edit entdeckt: natürlich liegt das png über dem link, und genau dafür suche ich doch ein workaround!!!!

[Dax]

Mache doch eine Map-Region wie oben rechts im DP-Logo, die direkt über dem Link liegt..

[Meflin]

Zitat:

Zitat von Dax

Mache doch eine Map-Region wie oben rechts im DP-Logo, die direkt über dem Link liegt..

das löst das (mein) problem nicht.
ich habe ne microsite, zentriert im browser. da kommen ganz normale inhalte rein (ziemlich viele links, nicht nur einer). und für diese microsite will ich den tesa effekt. so liegt aber nun das bild komplett über der site, jeder einzelne link, jedes formularfeld, jeder button, einfach alles wird von ihm überdeckt, zwar nihct sichtbar, da transparent, aber eben doch. und da ist mit einer map nicht weit her, da ich die position der links garnicht vorraussagen kann...

[Dax]

Die Map-Koordinaten gelten ja vom linken oberen Rand des Bezugsimages ab. Kannst du nicht sagen, dass deine Links auf diesen Bezugspunkt immer an der gleichen Stelle liegen?

PS: Wenns garnicht geht, würde ich die Tesa-Grafik so klein wie nur möglich machen, damit sie möglichst wenig überdeckt, und stattdessen mit padding arbeiten.

[Marco Haffner]

Auch der IE kann durchaus transparente PNGs darstellen. Vorraussetzung ist aber wieder mal ein zusätzlich eingebundenes JavaScript. [msdn]"AlphaImageLoader"[/msdn]

[Meflin]

Zitat:

Zitat von Marco Haffner

Auch der IE kann durchaus transparente PNGs darstellen. Vorraussetzung ist aber wieder mal ein zusätzlich eingebundenes JavaScript. [msdn]"AlphaImageLoader"[/msdn]

das hört sich ja schonmal gut an (solange dadurch nicht die validität leidet), allerdings checke ich nicht wirklich, wie ich das nun einsetzte, bzw was für properties ich setzten muss.

Code:

[img]gfx/shadow.png[/img]

so passiert da nämlich nix!

[Aenogym]

hi meflin,

ich denke, du hast ein wirkliches problem. der IE kann, wie gesagt, nicht mit PNG transparenz umgehen. GIFs sind scheiße, weil die nur wenige farben zu verfügung haben. und eine art overlay per CSS "verdeckt" die links.
wenn das mit dem JavaScript nicht klappt, könntest du das ganze vielleicht noch mit Flash machen.

oder du wartest, bis der IE7 heraus kommt. der hat dann hoffentlich auch PNG transparenz...

Aenogym

PS: oder zwinge deine beuscher, einen mozilla browser o.ä. zu nehmen :mrgreen:

[gothic_mike]

Guckst du hier, da gibts auch ne Demo...

[Meflin]

Zitat:

Zitat von Aenogym

hi meflin,

ich denke, du hast ein wirkliches problem.

Das fürchte cih auch :(

Zitat:

Zitat von Aenogym

der IE kann, wie gesagt, nicht mit PNG transparenz umgehen. GIFs sind scheiße, weil die nur wenige farben zu verfügung haben. und eine art overlay per CSS "verdeckt" die links.
wenn das mit dem JavaScript nicht klappt, könntest du das ganze vielleicht noch mit Flash machen.

oder du wartest, bis der IE7 heraus kommt. der hat dann hoffentlich auch PNG transparenz...

Aenogym

PS: oder zwinge deine beuscher, einen mozilla browser o.ä. zu nehmen :mrgreen:

für das overlay problem hätte ich schon eine (zwar suboptimale, aber doch) Lösung: ich habe noch nen layer drüber, und da kommt der eigentliche inhalt rein. alles was in den vier ecken wo der tesa ist liegt, mach ich aber trotzdem auf den ursprünglichen unteren layer. so entsteht der gewünschte effekt.
das dume ist das man diesen filter nicht auf ein normal eingebundenes png verwenden kann, dann wäre ja alles paletti. der ie würde filtern, mozilla den filter ignorieren. aber nein **** ie muss ja wieder ein problem mit png haben.
wäre noch zu überlegen ob ich mit php den browser ermittle und jenachdem ob mozilla &co oder ie verwendet wird die einen oder die andere variante einzubinden. lässt sich das sinnvoll realisieren?

[Aenogym]

Zitat:

Zitat von Meflin

lässt sich das sinnvoll realisieren?

das sollte sich problemlos realisieren lassen.
edit: hier gibts was dazu.

Aenogym

[waschi]

was hast du denn davon wenn du 2 grafiken machst?

mach das ding als eine grafik und speicher es auch so alles andere ist killefitz

[Meflin]

Zitat:

Zitat von Aenogym

Zitat:

Zitat von Meflin

lässt sich das sinnvoll realisieren?

das sollte sich problemlos realisieren lassen.
edit: hier gibts was dazu.

Aenogym

merci, hab inzwischen selber was gebastelt (ein php-manipuliertes stylesheet), scheint wunderbar zu funzen :)

[Aenogym]

<klugscheiß>

auf acira.net steht:

a SQS Enterprise

mach daraus mal

besser:

an SQS Enterprise

:zwinker: Aenogym
</klugscheiß> :roll:

[Meflin]

Zitat:

Zitat von Aenogym

<klugscheiß>

auf acira.net steht:

a SQS Enterprise

mach daraus mal

besser:

an SQS Enterprise

:zwinker: Aenogym
</klugscheiß> :roll:

dann will ich mal zurückklugscheißern ;) an wird nur vor wörtern, die mit einem vokal beginnen (z.B. enterprise, old), aber nicht vor S wie SQS :) so hab ich das zumindest gelernt ;)

[Kastor]

Hi,

der IE kann (unter Windows) keinen Alpha Kanal in PNGs darstellen. Der ist in der PNG Spezifikation nur als "Optional" vorgesehen, und Microsoft noch keinen Bedarf für dessen Implementierung gesehen.
Als kleinen Workaround habe ich mal ein Javascript angehängt, dass normal eingebundene PNGs automatisch mit dem Transparenz-Filter behandelt. Bei der Anwendung ist folgendes zu beachten:

• das Script funktioniert nur im IE 5.5 aufwärts
• es verlangsamt den Seitenaufbau etwas (nicht besonders viel, auf einer 3GHz Maschine merkt man das nicht mehr)
• es funktioniert nur dann richtig, wenn auch width und height tags im img angegeben sind
• am besten ist es wie gezeigt mit Conditional Comments einzubinden
• unter Umständen zeigt der IE dann nicht mehr die Hand auf Links an, ohne dass dies explizit angegeben wurde.
• ich hab keine Ahnung von wem es ist, von mir auf jeden fall nicht

Ich persönlich nutze dieses Script nicht mehr, da ich keinen veralteten Browser, dessen letztes Mayor-Release vor mehr als 3 Jahren war, mehr unterstützen möchte. Benutzt doch einfach die PNGs und geht dann im Impressum oder auf einer gesonderten Seite auf die Schwäche des IEs ein.

Gruß, Kastor

PS: IE7 kann so was nachrüsten...