Skip to content

Weergave png afbeelding internet explorer 6

Juiste weergave in IE6 PNG afbeelding met transparente achtergrond

Ik werk vaak met png afbeeldingen met transparente of doorzichtige achtergronden aangezien die makkelijk verwerkt kunnnen worden in websites. Vooral als het gaat om afbeeldingen met ronde hoeken zijn transparente achtergronden erg handig. Zo hoef je niet steeds de achtergrond aan te passen aan de achtergrond waar je de afbeelding wil plaatsen.

Internet Explorer werkt niet mee

Internet Explorer 6, de browser die helaas nog steeds door veel bezoekers gebruikt wordt, geeft de pngs met doorzichtige achtergronden  niet goed weer. De achtergrond wordt als een wit vlak weergegeven. En dat maakt alles erg lelijk natuurlijk. Zeker als je een donkere achtergrond hebt.

Oplossing

Er is gelukkig al een hele poos een oplossing in omloop om toch afbeeldingen met doorzichtige achtergronden correct weer te geven in Internet Explorer 6. Twin Helix is een vrij eenvoudige oplossing.  Download het zip bestand van hun website. Door middel van het toevoegen van iepngfix.htc en blank.gif en een juiste wijze van aanroepen van deze twee bestanden kun je in IE6 ook pngs met doorzichtige achtergrond op een goede manier weergeven.

Dit doe je als volgt:

  • Voeg de volgende lijn toe aan je .css stylesheet of maak een aparte aan for Internet Explorer 6:
    img, div, a, input { behavior: url(http://www.pad-naar bestand/iepngfix.htc) } Hiermee worden afbeeldingen, dividers links en inputs van een correcte doorzichtige achtergrond voorzien in IE6.
  • Laad deze stylesheet in de paginaof nog beter de header.php (standaard in WordPress, Joomla! enzovoorts) waar de transparente afbeeldingen worden weergegeven. Ik heb een apart stylesheet voor IE6 die ik laadt met een conditional in header.php:
    <!--[if IE 6]>
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/ie-hacks.css" type="text/css" media="screen" />
    <![endif]-->

    NB ik gebruik hier een WordPress tag om het pad naar de css op te roepen.

  • Zorg ervoor dat het pad naar iepngfix.htc en het pad naar blank.gif in iepngfix.htc absoluut is anders worden ze niet goed geladen!

Et voila

Als het goed is worden de pngs nu op de juiste wijze weergegeven in Internet Explorer 6!

Gepubliceerd door Doede op woensdag 10 juni 2009
Nog geen reacties

Laat een reactie achter

NB: XHTML is toegstaan. Je email adres wordt niet gepubliceerd.

Abonneer je op de reacties op dit artikel via RSS

*