PNG's met transparantie in IE (PC) een andere aanpak

Pro web-ontwikkeling
#1

Het is wellicht gekend dat PNG's het niet al te goed doen (transparante delen worden blauw). Ik pas meestal de gekende pngfix.js truuk toe (die gebruik maakt van de een boel nutteloze dingen die in Internet Explorer voor de PC zitten om het toch werkende te krijgen). http://homepage.ntlworld.com/bobosola/index.htm

Deze werkt perfect (als je rekening houd met een paar mogelijke float issues van de figuren) maar heeft een nadeel op de PC: de gebruiker ziet héél even het blauw ipv de transparantie. Mij kan het nooit wat schelen (en ik praat bijna elke klant firefox aan), want uiteindelijk werkt het wel.

Nu had ik wel een klant die er een probleem van maakte. Ik heb een oplossing gevonden die de fix meteen toepast bij het laden van de figuren, en dus nooit die blauwe flits geeft.
http://www.theimagecompany.be/en/
(png’s zitten zowat overal, het ontwerp is niet van mij, maar er was vraag naar die afgeronde hoeken waarbij ze de achtergronden kunnen aanpassen via de cms - dus zit er een PNG voor).
Nu staat er bij elke figuur een ‘onload’ wat uiteraard niet xhtml valid is.
(ik gebruik hier dus de methode (2) JS code on individual png’s: http://homepage.ntlworld.com/bobosola/pnginfo.htm#credits )

Ik vraag me af of er nu een manier is om:

  • ofwel die onload er met Javascript oid bij te zetten zodat de pagina wel valideerd - maar ik vraag me af of die blauwe flist dan niet terug komt
  • of een andere methode die geen blauwe flits geeft bij het laden (in IE op PC)

Kan het niet, dan zal ik gewoon de ‘valid xhtml’ link enz. ervan halen, want een blauwe flits is geen optie bij dit project.

[beetje offtopic] je moet er trouwens eens op letten dat je niet kan klikken op transparante delen van een png in IE op de PC, beetje vreemd en toch weer niet [/]

#2

heb altijd het zelfde probleem vervang de png`s vaak maar voor gif. of heb je een rede dat je echt specifiek png moet gebruiken??? (ik weet niet of er voor op internet echt grote verschillen in zitten)

#3

Almer, het hele bovenstaande artikel gaat over de transparantie . . . @Macataria: Ik heb net voor hetzelfde dilemma gestaan en heb ervoor gekozen geen PNG's te gebruiken, het is een geval van jammer maar helaas. Het bij elk plaatje toevoegen van een javascript, doet mij een beetje denken aan bv een font tag. Is dat niet een van de redenen dat wij voor CSS kiezen en dat een validatie niet een doel op zich is. Wat heb je bereikt als je HTML vol met IE pleisters, plakbandjes en paperclips zit, maar je pagina wel valideert ?

#4

Je hebt gelijk hoor, ik weet het. Het spijtige is dat alles op een propere manier gemaakt is, en op het einde van het verhaal een nood-PNG oplossing moet komen (de standaardoplossing vind ik nog vrij proper, die heeft geen enkele invloed op andere browsers).

Het is idd een beetje sneu nu die trukken te gaan gebruiken om toch maar te gaan valideren.
De ie ‘valid xhtml…’ link zal ik gewoon wegnemen.
Langs de andere kant is dat een manier om toch nog alles een beetje in het oog te houden of alles goed is, en ook om aan de bezoekers te tonen dat we ons best doen.

@almer
Met gif’s gaat het niet hoor. De klant heeft een ontwerp gemaakt met halftransparante bollen op veranderlijke achtergronden, afgeronde hoeken etc…
Gif ondersteunen idd transparantie, maar enkel alles of niks.

#5

Ik zou een compleet andere Style Sheet inladen als je te maken hebt met IE. Dit heb ik ook gedaan met [url]http://you.getmyip.com[/url] Ook ik liep tegen Floating issues in IE aan omdat ik ook png transparantie gebruik in deze site. De CSS voor IE is kan niet eens valid zijn aangezien IE onvalid comando's nodig heeft om transparantie te generen. Dus heb ik een browser test gemaakt, en een aparte CSS voor IE. Als ik dan toch die "browser test" erin heb, kan ik ook gelijk een getFireFox button laten zien als iemand met IE werkt.

Op deze manier kan ik toch valid HTML & CSS generen voor andere browsers… Helaas is IE nou éénmaal de schrik van iedere webdeveloper die zich aan de webstandaarden wil houden.

[quote:48edeca377]
[beetje offtopic] je moet er trouwens eens op letten dat je niet kan klikken op transparante delen van een png in IE op de PC, beetje vreemd en toch weer niet [/]
[/quote:48edeca377]

Voor dit soort dingen moet je volgens mij je z-index aanpassen samen met de position in je CSS
position: relative;
z-index: auto;

#6

[quote:f29c27f628="martijnG"]Ook ik liep tegen Floating issues in IE aan omdat ik ook png transparantie gebruik in deze site. [...] [/quote:f29c27f628]

? Wat heeft een float en PNG transparantie met elkaar te maken? Volgens mij zijn dat twee volledig gescheiden issues.

@macetaria:
Misschien dat je hier en in de discussie bij het artikel aanwijzingen vindt: http://www.alistapart.com/articles/pngopacity/

#7

@tennapel

Aangezien: png transpantie word gemaakt in IE met “filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘trans.png’, sizingMethod=‘scale’);”
ziet ie deze niet als background plaatje, dit geeft problemen in de z-index. ( z-index aanpassen kan dit probleem voorkomen, dus denk ik dat dat hier in zit )

#8

Misschien dat dit een oplossing is voor het onLoad probleem:

Alle onLoad events strippen uit je img tags en dan tussen de : <!–[if gte IE 5.5000]>
comment de volgende functie toevoegen :

[code:1:fcb5e9f4a8]
function iePNG() {
if (!document.getElementsByTagName) return;
var pfix = document.getElementsByTagName("img");
for (var i=0; i<pfix.length; i++) {
var pings = pfix[i];
if (pings.src.slice(pings.src.length-3,pings.src.length) == "png") fixPNG(pings);
}
}
AE_AttachEvent("onload","iePNG");
[/code:1:fcb5e9f4a8]

Deze functie checkt of de “src” attribute van de img tag eindigd op “png” en zo ja, past dan de fixPNG funtie toe op het element.

edit: helaas nog niet kunnen testen op blauwe flitsen… (heb hier geen IE win…)
edit2: nevermind… Ik zal voortaan beter lezen…)

#9

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

#10

ga ik zometeen eens testen

#11

Ook die methode geeft een blauwe flits :(

Ok, niets aan te doen dus, ik haal gewoon de valideringlinks weg (met spijt in het hart).