PNG och IE6

Många med mig har nog suttit och svurit över Internet Explorers taffliga uppbyggnad och där med bristen på stöd för transparenta PNG‘s. Eftersom jag ville använda mig av png-grafik till viss del här på nya Eyesx så var ja även tvungen att hitta ett bra sätt att fixa transparens på PNG’s även i IE.

Det finns ett gäng olika lösningar runt om på nätet men inte många som funkar på ett fullständigt sätt, dvs både för png’s som bakgrunder och förgrunder. Eller så kräver det att du måste ange transparensen för varje enskild bild. Till slut hittade jag dock en fullständig lösning av Angus Turnbull, som kan användas på ett relativt smidigt sätt.

Användning

Börja med att ladda ner filerna för IE-PNG-fix, för att sen använda filerna så bör du se till att sökvägarna är absoluta. Då vet du att allt pekar rätt. Sen kan du simpelt styra via din CSS vilka element på sidan som innehåller png-filer.

Ex.

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

Detta skulle med andra ord betyda att alla bild-taggar på sidan kollas efter png’s. Dvs alla bilder som ligger i förgrunden som vanliga bilder. Vill man sen också att den ska gå igenom bakgrundsbilder så anger man det enklast genom att visa den vilka element som innehåller png’s.

Ex2.

img, #header, .class, blockquote { behavior: url(iepngfix.htc); }

Kom ihåg att alltid ange rätt sökväg för din .htc-fil annars kommer det inte att fungera. Likaså med sökvägen till blank.gif som finns angiven i iepngfix.htc

Detta ska funka fint i IE6 & IE5.5 men inte äldre läsare. IE7 har tack och lov stödet redan inbyggt. Exempel på hur skriptet funkar kan du se här på sidan där ”datumramarna” är png’s som använder denna fix.

För ev. uppdateringar osv kan man besöka Angus Turnbulls http://www.twinhelix.com, allt är släppt under CC-GNU LGPL, version 2.1 or later.

Hoppas detta kan vara till någon hjälp!