Ciao a tutti. So che è l'incubo di tutti noi webmasters e ho paura che continuerà ad esserlo, ma fino a che non scomparirà del tutto bisogna adeguarsi.... Internet Explorer 6!!

Ebbene addirittura il 38,87% dei visitatori del mio sito lo utilizza ancora e ora che mi trovo a cambiare un po' la grafica torna l'incubo!!

Ma passiamo al dunque:

Le pagine di questo sito sono suddivise in riquadri. Di questi riquadri ce ne sono di diversi tipi (più stretti, più larghi, sfondi diversi...).
Per ogni tipo c'è una classe diversa e ognuno di questi riquadri è un div della classe del tipo che mi serve. All'interno del div poi ci sono:
- Un div header per il lato superiore
- Un div corpo per il contenuto
- Un div footer per il lato inferiore.
L'header e il footer hanno altezza e sfondo fissi, mentre il corpo, in base al contenuto, può essere più alto o più basso e lo sfondo, ovviamente si ripete in altezza.
Capirete meglio leggendo il codice qua sotto:
codice:
div.boxLato {
	width: 258px;
}

div.boxLato div.header {
	height: 10px;
	background-image: url(boxLatoHead.jpg);
}

div.boxLato div.corpo {
	background-image: url(boxLatoBg.jpg);
	background-repeat: repeat-y;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 10px;
}

div.boxLato div.footer {
	height: 15px;
	background-image: url(boxLatoFoot.jpg);
}
Ogni volta che lo voglio richiamare faccio così:
codice:
        <div class="boxLato">
            <div class="header"></div>
            <div class="corpo">
		[...]
            </div>
            <div class="footer"></div>
        </div>
Tutto perfetto in firefox e ie7.







Ma con IE6 l'header fa strani scherzi:



Qualcuno sa aiutarmi?