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...

Metodi e Mezzi per fare Business Online

Metodi e Mezzi per fare Business Online

Ed eccomi anche qui, su BigThink a parlare di formazione sul seo, e-commerce, sul guadagno online, sul fare soldi online, o su qualsiasi altro argomento che alla fine rientra in una specifica nicchia che possiamo definire: il Business Online. Ho scelto di scrivere su BigThink perché è il posto ideale per parlare di tutto ...
 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 ...
Aggregatore.com, inserisci i feed RSS del tuo blog!

Aggregatore.com, inserisci i feed RSS del tuo blog!

Quando ho aperto SocialBlog, l'aggregatore di blog informatici, non credevo avrebbe avuto un tale apprezzamento. Evidentemente avere linkback gratuiti continuamente aggiornati è una proposta allettante. E in effetti è così. Gli aggregatori sono strumenti utilissimi per i bloggers, in quanto portano loro un maggiore traffico e aumentano il loro PageRank. Nasce allora il nuovo Aggregatore.com, ...
BigThink ti regala un codice sconto per DreamHost

BigThink ti regala un codice sconto per DreamHost

Solo per i lettori di BigThink, ho il piacere di regalarvi un codice promozionale di ben 40$ sull'acquisto di un server condiviso su DreamHost. E' l'occasione ideale per spostare i vostri siti o blog su un hosting più affidabile, veloce e capiente. Inoltre, per l'undicesimo compleanno di DreamHost, i primi 1.111 nuovi clienti avranno ...
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 ...

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