Toch transparante PNG in IE < 7. the easy way
Ik liep bij het bouwen van mijn website ertegenaan dat de transparante png's niet goed werden weergegeven. De bestaande oplossingen vond ik niet netjes (javascript of csshack) omdat bij de eerste bezoekers zonder js enabled er niets aan hebben en de 2e je css niet meer valid is.
Bij mijn manier word aan alleen gebruikers met IE < 6 de filter alphaimageloader voorgeschoteld.. alle andere browser hebben dit filter niet.
Het gebruik is simpel. bij alle aanroepen van je css roep je dit bestand aan met ?file=jecsszonderextentie, dus als ik main.css wil en ik heb dit bestand getCSS.php genoemt roep ik getCSS.php?file=main op. (je kan zoals ik het heb gedaan met mod-rewrite de namen weer rechtzetten.. mijn server zet main.css om in getCSS.php?file=main op deze manier kan je dit dus toevoegen zonder je html aan te passen.
Het is ook mogenlijk om in 1x meerdere css bestanden tegelijk te laden. De files moeten dan gescheiden worden met een , dus bijv: getCSS.php?file=main,home
een extra feature is dat als je bijvoorbeeld een transparante achtergrond wil en je reapeat daarom een kleine PNG door in je css zoiets te zetten: background:plaatje.png repeat;
je er /*SCALE*/ achter kan zetten, dan zorgt het filter ervoor dat het plaatje uitgerekt komt (anders laat hij alleen maar 1x je kleine plaatje zien), maar dit zou je zelf even moeten testen om het duidelijk te krijgen.
LET OP: deze filter werkt alleen wanneer er in je css een afbeelding opgeeft.. dus op een normale img tag in je html heeft het geen invloed.
en nog iets, het kan zo zijn dat door dit filter links niet meer werken, dit moet je zelf zien op te lossen door bijvoorbeeld een extra div te plaatesen met een andere position (even googlen dus)
Gesponsorde koppelingen
PHP script bestanden
Er zijn 6 reacties op 'Toch transparante png in ie 7 the easy way'
-0 
Voordeel is dat je dan ook nog eens per IE een andere CSS er in kan hangen. Bijvoorbeeld de volgende code in je <head>:
2
3
4
5
6
7
8
<!--[if IE 6]>
<link href="/style/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 5]>
<link href="/style/ie5.css" rel="stylesheet" type="text/css" />
<![endif]-->
Verder ziet je script er wel goed uit!
-0
Ik hoef daar helemaal niet meer naar te kijken bij het verder ontwikkelen van mijn website, en dus is mijn manier minder werk (want ik heb in 30 seconden een bestandje getCSS.php aangemaakt.. maar elke keer een alphaimageloader er bij zetten kost meer dan 30 seconde)
en ik heb meer overzicht want ik heb niet een apparte IE5 of 6 css bestand maar gewoon 1 css waarmee het allemaal ook werkt
-0
Grootste probleem wat mij betreft is dat de marges en paddings in IE anders zijn. Dan maak ik dus al andere CSS bestanden en is het ook een 'pies-of-keek' om de filters er in te hangen en de achtergrond te verwijderen.
Overigens in beide gevallen geen manier om alpha-transparante afbeeldingen op de voorgrond te gebruiken in IE >= 6.
-0
ik heb dus wel echt maar 1 css waar voor elke browser hetzelfde staat en in dat geval is het heel fijn dat ik niet hoef op te letten als ik ergens een transparante png plaats..
-0
Nou hoef ik niet altijd veel te doen om hetzelfde resultaat te krijgen in alle browsers (in IE7, nog steeds tot mijn verbazing, hoef ik meestal alleen maar buttons apart te doen), maar ik moet (bijna) altijd CSS voor IE6 en IE5 gebruiken om het goed te krijgen.
Maar goed, heb je geen aparte CSS-bestanden nodig voor je margin en padding, dan heb je wel een mooie oplossing bedacht. Daar is echt niets mis mee. Maar heb je wel extra IE-only CSS nodig, dan maakt die filter ook niet meer uit.
-0
Onderstaande fix kan pngs in ie > 5.5 fixen, zonder png. Alleen een bestandje opnemen in je broncode.
http://www.twinhelix.com/css/iepngfix/
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu