BigThink

PNG trasparenti su IE6

Ormai si sa, il browser che peggio supporta gli standard è sempre lui, Internet Explorer. Ancora ancora la versione 7, ma la 6 è davvero scandalosa.

Oltre ai vari problemi legati alla visualizzazione dei CSS e via dicendo, è noto il bug delle PNG trasparenti. IE6 si rifiuta semplicemente di mostrarci la trasparenza, sostituendola con uno sfondo grigio. Bello…

Stiamo parlando delle PNG-24 che, a differenza delle solite GIF, supportano colori a 24 bit e ci permettono di utilizzare ben 256 livelli di trasparenza. Un’altra cosa rispetto alle pessime GIF! Vediamo allora come risolvere il problema su IE6, perchè (purroppo) non possiamo obbligare tutti a passare a FireFox.

Esistono diversi hack CSS e javascript adatti allo scopo. Molti usano la proprietà filter, applicando manualmente il filtro AlphaImageLoader di proprietà Microsoft, ma ciò comporta un minimo di personalizzazione e sporca un po’ il codice della nostra pagina.

Quello che vi propongo è IE PNG Fix che, con una sola riga di codice, correggerà il malefico bug: le nostre immagini e sfondi PNG si vedranno senza alcun problema. Intanto scaricate lo zip che contiene i file necessari: una GIF trasparente 1x1px e il file iepngfix.htc che contiene il codice javascript. Uploadateli ad esempio nella cartella contenente i vostri file css.

Ora è sufficiente aggiungere alla pagina questo codice:

1
2
3
<style type="text/css">
      img, div { behavior: url(css/iepngfix.htc) }
</style>

Se siete puristi della validazione, potrebbe non piacervi usare la proprietà behavior (non considerata valida W3C). L’alternativa è aggiungerla tramite javascript:

4
5
6
7
8
9
10
<script type="text/javascript">
    if (document.all && document.styleSheets && document.styleSheets[0] &&
document.styleSheets[0].addRule){
      document.styleSheets[0].addRule('img', 'behavior: url(iepngfix.htc)');
      document.styleSheets[0].addRule('div', 'behavior: url(iepngfix.htc)');
   }
</script>

Si può applicare il behavior ai tag img e div, ma anche solo a classi specifiche. Come preferite.

E un’altro bug di IE6 è fixato! Buon lavoro!

Articolo scritto da Ghido

Fondatore di BigThink.it, si occupa dello sviluppo e del coordinamento dei progetti tecnologici. Specializzato nel Marketing su Facebook e nello sviluppo di Applicazioni Social, fa consulenza e formazione ad aziende ed agenzie.

Leggi anche...

CSS trick: div contenitore in full-height

CSS trick: div contenitore in full-height

Spesso abbiamo la necessità che il div contenitore del nostro sito si estenda per tutta l'altezza della pagina web, anche se il contenuto è minimo. Come fare? Per questo esempio, è sufficiente il solo div "container" con del testo: <div id="container"> <p>Testo</p> </div> Aggiungiamo gli stili base e coloriamo il div per visualizzarlo nel nostro esempio: #container{ height:100%; background:red; } Tuttavia non basta ...
Fonti di Immagini per i vostri Blog/Siti Web

Fonti di Immagini per i vostri Blog/Siti Web

Abbellire un post del vostro blog o inserire immagini nel sito web che gestite è praticamente d'obbligo; per reperire queste immagini possiamo essenzialmente fare due cose: Scattare una foto o disegnare l'immagine con un programma di grafica. Cercare l'immagine nel web e inserirla nel nostro sito. La seconda soluzione come intuirete è la più facile e ...
Migliora la qualità del tuo sito internet in pochi semplici passi

Migliora la qualità del tuo sito internet in pochi semplici passi

Per progettare un sito internet è necessario un approccio diverso da quelli tradizionalmente utilizzati come ad esempio la produzione di un’automobile o la costruzione di una casa, in quanto: Comporta la strutturazione di un’ampia e complessa rete informativa che deve essere ben chiara e ...
CSS trick: div affiancati su FireFox

CSS trick: div affiancati su FireFox

Tutti quei programmatori o designer che sono soliti sviluppare layout tableless per i loro siti sanno bene come sia complicato — e a volte anche frustrante — creare una grafica che sia crossbrowser, perfettamente compatibile con tutti i maggiori browser in circolazione. Spesso ciò che funziona bene con un browser, si vede in modo ...
 Il TrustRank tramite Pagerank e Link Popularity

Il TrustRank tramite Pagerank e Link Popularity

Ho scritto un esauriente corso online su come aumentare PageRank e Link Popularity e di conseguenza su come ottenere miglioramenti nel TrustRank, in forma completa lo trovate qui: Corso su PageRank e Link Popularity. Su BigThink voglio fare una panoramica generale su alcuni punti cruciali da seguire, lo farò con diversi articoli che si ...

3 Commenti

  1. Ghido

    Ottimo, grazie mille!

    4 settembre 2008, 00:06
  2. Dario

    Qua ce ne sono indicate un altro po’…
    http://tinyurl.com/5wme8d
    ciao!

    3 settembre 2008, 23:42

1 Citazioni