Può capitare talvolta di imbattersi in un problema abbastanza noioso con Internet Explorer 6 per quanto riguarda la progettazione dei siti web. In particolare si possono avere problemi quando si vogliono distinguere diverse proprietà CSS per uno stesso elemento, ovvero il caso tipico dell’utilizzo delle classi CSS. Supponiamo di avere queste proprietà CSS:

#custom.red { color: red; background: url(immagine-blu.jpg) repeat; }
#custom.blue { color: blue; background: url(immagine-rossa.jpg) repeat; }

ed il relativo codice HTML:

<span id="custom" class="red">Questo testo è rosso con un'immagine blu di sfondo</span>
<span  id="custom" class="blue">Questo testo è blu con un'immagine rossa di sfondo</span>

Vi rammento che in una pagina HTML non è possibile mettere due elementi diversi con stesso ID. In questo caso l’ho fatto solo per semplificare la spiegazione del problema, supponete perciò di utilizzare quelle righe in pagine diverse. Se guardate la pagina con qualsiasi browser, compreso IE7, sicuramente non noterete nulla di strano:

Se adesso guardate la stessa pagina con IE6, ecco nascere il problema:

Il problema è dato dal fatto che IE6 non riconosce correttamente le classi associate a dei specifici ID, ma riconosce esclusivamente l’ultima istruzione valida del CSS, se infatti invertite le due istruzioni CSS che abbiamo definito sopra, vi risulta niente di meno che questo:

Abbastanza noioso, come vari problemi derivanti dalla cattiva interpretazione del codice da parte di IE6. Un modo per risolvere il problema, se non l’unico, è quello di specificare (in modo hard coded o server side con PHP/ASP) classi diverse per ogni proprietà, in questo modo:

.custom_red { color: red; background: url(immagine-blu.jpg) repeat; }
.custom_blue { color: blue; background: url(immagine-rossa.jpg) repeat; }

e avere quindi un codice HTML di questo tipo:

<span id="custom" class="red custom_red">Questo testo è rosso con un'immagine blu di sfondo</span>
<span  id="custom" class="blue custom_blue">Questo testo è blu con un'immagine rossa di sfondo</span>

Mantenendo ovviamente le classi e l’ID precedenti, perchè servono per l’interpretazione degli altri browser. Procedendo in questo modo, riusciamo finalmente nell’intento. Buon lavoro!