probleem in IE: transparante png over jpg...

[Wim Leers]

hallo,

ik heb hier een vervelend probleempje op m'n website...

In m'n css hebk het zo ingesteld dat er een jpg op de achtergrond wordt getoond. Deze class gebruik ik gewoon voor een cel, en in deze cel zet ik dan vervolgens een transparant .png bestand. Dit werkt perfect in Firefox, maar jammer genoeg niet in IE. En het is een net íets te opvallend foutje...

De site: www.BTSunattended.net, de wolkenachtergrond met hierover het BTSunattended.net logo.

Hoe kan ik dit oplossen? Of is dit gewoon een gebrek van IE?

[MaZeS]

Ik weet het niet hoor, maar ondersteund IE wel transparante png's? Misschien moet je eens een transparante GIF proberen.

[Erkens]

Bashrat schreef op vrijdag 07 januari 2005 @ 22:31:
Hoe kan ik dit oplossen? Of is dit gewoon een gebrek van IE?

het is een gebrek van IE ja helaas. Het makkelijkst kan je het proberen door een transparante gif te gebruiken (desnoods met een browser detectie script IE dat gifje geven)
Maar er was geloof ik ook een "hack"/scriptje voor IE om hem toch weer te geven, moet je even zoeken anders

Transparante PNG in IE met behulp van filter

[ Voor 8% gewijzigd door Erkens op 07-01-2005 22:36 ]

[Wim Leers]

Ja ik heb blijkbaar niet goed genoeg gezocht... Ik heb de oplossing al gevonden!

Just for the record: http://homepage.ntlworld.com/bobosola/pnghowto.htm

* Wim Leers zal beter zoeken volgende keer!

[Blaise]

Waarom merge je het niet gewoon tot 1 plaatje?

[Dark Blue]

Dit is handig... maar als dit de oplossing is ... ja ik ben een beetje overdonderd, ik gebruik al maanden geen PNG's en daardoor wordt mn werk vrij beperkt omdat ik altijd maar weer rekening hou met dat nadeeltje van IE... en nu kan het gewoon?
Is er geen addertje onder het gras? (ja mensen die javascript uit hebben staan)

[Verwijderd]

ja kan er ook een behavoir aan hangen: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

[boiert]

Ze gebruiken wel beide
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
Dus op de mac zou het alsnog een probleem geven, als je daar IE gebruikt.
Maar ook op oudere platformen zonder Direct X of met een oudre versie.

MSDN Link

[Fuzzillogic]

Met IE7 kan je belabberde verouderde waardeloze browsers (lees: IE ) eenvoudig ook goede PNG support geven. En passant fixt het ook nog een shitload aan andere bugs in IE6. En het fraaie is: met 1 javascript-include ben je klaar.

[Verwijderd]

boiert schreef op zaterdag 08 januari 2005 @ 02:46:
Dus op de mac zou het alsnog een probleem geven, als je daar IE gebruikt.

IE (5+) op de Mac ondersteunt gewoon transparante PNGs.

[boiert]

Verwijderd schreef op zaterdag 08 januari 2005 @ 11:02:
[...]

IE (5+) op de Mac ondersteunt gewoon transparante PNGs.

Ok, wist ik niet.
Op de mac dus wel en op x86 niet
Ik wist dat Microsoft het gescheiden houdt, Office voor de mac wordt gemaakt door andere mensen dan de versie voor windows.
Dat ze dat voor Internet Explorer ook doen...

[Genoil]

Dark Blue schreef op zaterdag 08 januari 2005 @ 01:02:
Is er geen addertje onder het gras? (ja mensen die javascript uit hebben staan)

Ja, als je PNG's wilt gebruiken als CSS background, moet je er rekening mee houden dat deze met de Microsoft hack niet ge-repeat (tiled) kunnen worden, maar alleen gecropped en gestretched. Daarnaast zit er wat tijd tussen het ingeladen zijn van je PNG's en het toepassen van de hack, waardoor er heel eventjes van die lelijke grijze blokken (wat normaalgesproken transparente delen zouden zijn) in je pagina te zien zijn.

Daarnaast zijn 32-bits PNG's natuurlijk waardeloos qua compressie, waardoor bij overmatig gebruik je pagina's wel erg lomp worden. Maar dat geldt natuurlijk ook voor browsers die het wel ondersteunen.

Meestal is het daarom veel beter om "samengestelde" plaatjes te maken van dingen die anders uit meerdere transparante lagen zouden bestaan. Kan zijn dat je dan meerdere composities moet maken voor verschillende "states" van je ontwerp, maar dat kan met een beetje creatief templaten en CSSen eenvoudig ondervangen worden. Het resultaat is een kleinere pagina die het gewoon overal zonder truucjes doet.

Uitzonderingen zijn bijvoorbeeld dropshadows over een gecenterde pagina met een onregelmatige achtergrond. Hiervan kun je geen samengestelde composities maken, omdat deze bij elke venstergrootte weer anders is.

[ Voor 33% gewijzigd door Genoil op 08-01-2005 11:30 ]