PNG billeder i IE med pngfix.js

kommer den javascript advarsel du taler om ikke kun når du kører scriptet lokalt på din computer? Ved afvikling fra et "rigtigt" site plejer den advarsel ikke at komme...

Hmm... det var da et godt spørgsmål :) Jeg har nemlig kun prøvet at køre det lokalt. Jeg forsøger lige at smide det op på en server, når jeg kommer hjem. Håber det virker.

Er det den her du tænker på: http://homepage.ntlworld.com/bobosola/index.htm
Jeg har benyttet den, og den virker fint! ...fuldstændigt som 'krogstrup' omtaler!

fotograf -> Jo, det er lige præcis den jeg mener. Perfekt. Så er der jo ikke noget at være bange for :D

flashnoob > Du kan sagtens få IE til at vise PNG-billeder korrekt, uden JavaScript overhovedet. Men jeg gider ikke begynde at forklare hvordan, hvis det er ligemeget for dig... :)

cirrhosis -> Jo! Det er jeg meget interesseret i at få at vide. Fortæl fortæl :)

Det er lidt mere besværligt, så det er ikke nødvendigvis relevant, men så er du ikke afhængig af JavaScript for at det bliver gjort. Det er i teorien samme teknik som pngfix.js benytter. I stedet for et billede benytter du et div-element, som du styler med css.

HTML-eksempel:
<div id='billede_af_bent'>

CSS-eksempel:
#billede_af_bent {
  width: 300px;
  height: 500px;
  background-image: url(billede_af_bent.png);
  _background: transparent;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="billede_af_bent.png", sizingMethod="crop");
}

Først bliver background-image læst af alle browsere. Derefter bliver _background og filter kun læst af IE.
Hvis du har mange transparente png-billeder på din side, eller hvis du alligevel bruger en masse javascript, vil jeg klart anbefale at du bare benytter pngfix.js, som i teorien gør det samme. Den udskifter alle img-tags med div-tags hvis browseren er IE.
Det kan dog skabe problemer i nogle tilfælde, da et img-tag og et div-tag har forskellige default attributter, f.eks. behandles et div som display: block og et img som display: inline.

For at gøre en kort historie lang:

Hvis du har mange PNG-billeder eller du bruger meget JavaScript, kan det være hurtigere bare at benytte pngfix.js.
Men hvis du kun har få PNG-billeder eller du i forvejen ikke bruger noget JavaScript, kan det betale sig at skrive sin egen CSS af flere årsager:

- Uafhængigt af JavaScript.
- Fuld kontrol over elementets udseende. (opførsel i relation til margin, line-breaks osv)
- Du laver det selv, og har dermed forståelse for hvad der egentligt foregår... :)

<ole>

- og bagdele: løsningen bygger på en IE-bug, der gør, at IE fejlagtigt tolker '_background' som 'background' - hvilket forhåbentlig er rettet i den kommende IE7.0.
Når det sker (om det så bliver i IE7.0 eller den næste version), skal alle ens sider med denne løsning skrives om - og hvor er fordelene så henne?

For et par år siden var det et library, der i IE kunne implementere popup-vinduer, hvor også vinduets chrome kunne styles - eller helt udelades - efter behag. Da IE rettede den bug, løsningen byggede på, stod tusindvis af webmasters over hele verden med håret i CD-skuffen - og måtte bygge deres sites helt om.

Vi var en del, der dengang tudede for døve øren ... man kan kun håbe, flertallet er blevet klogere, så man idag kan undgå de værste brølere  ;o)

Morale:
    Undgå for Guds - og din egen - skyld løsninger, der bygger på browser-bugs!

/mvh
</bole>

olebole >> Sikke dramatisk med Gud involveret og det hele... :)
Men du har en pointe, og det ville nok være en bedre idé at benytte:

<!--[if IE]>
<link> el. <style> her...
<![endif]-->

Jeg formoder alle de omtalte stakler fandt situationen ret dramatisk. Det lille hack med betingede styles hjælper nok ikke det store, hvis/når IE ikke længere understøtter '_background'  :)

- mon ikke det ville være bedre at bruge JS? ... selvom man skal passe på med at sige den slags

<style type='text/css'>
#bent {
  background: url(billede.png);
}
</style>

<!--[if IE]>
<style type='text/css'>
#bent {
  background: transparent;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="billede.png", sizingMethod="crop");
}
</style>
<![endif]-->

- Eller noget i den stil, skulle da gerne virke?

Men jo, det kan bestemt være bedre at benytte JS i mange tilfælde. Men hvis du eksempelvis i forvejen har en ret ren - alene informativ - side, og du egentlig bare bruger et enkelt png logo eller andet, der lige bliver kylet hen over dit design for at give nogle smarte effekter, så alt ikke er kantet (eller whatever) - ville jeg nok foretrække en non-JS løsning. Men det må være smag og behag... :)

Hvad så hvis brugeren har disabled javascript i sin browser? ..Så på en måde er det vel bedst at undgå at bruge JS, med CSS er man vel dækket ind, eller??

Hvis du bruger JavaScript til at fikse transparente png-billeder, og brugeren har disabled det, vil de transparente områder i billedet, fremstå som mørkegrå i Internet Explorer. Hvis du bruger ren CSS, vil det se fint ud.
Når du laver et "normalt" website, er det altid bedst at lave så meget i ren HTML/CSS som muligt, for at opnå optimal kompatibilitet.

-- men ikke-javascript browsere er ikke noget alvorligt problem, selvom man selvfølgelig skal tage højde for den slags, da der jo stadig er administratorer, der tro at man kan slette en harddisk med javascript ...

-- i den sidste statistik fra januar, viste det sig at andelen af non-javascript browsere, der havde besøgt www.thecounter.com var røget ned på 3% (og jeg gætter på, at de simpelthen er blevet bedre til at sortere bots o.l. fra !-)

"da der jo stadig er administratorer, der tro at man kan slette en harddisk med javascript" - Hehe :)

Vil I lige svare så jeg kan afslutte dette spørgsmål :) Tak for hjælpen.

Svar ...som modtagelse af en lille del af pointene!

Så lukker vi :)