Mi pare piu` un problema di grafica che di codice CSS o (X)HTML.

Se ho capito correttamente (ma aspetto conferma da te) il codice CSS e HTML funzionano.
Hai un problema con i PNG (che in IE non vengono riconosciuti).
E passando a GIF non ottieni i risultati sperati.

In effetti un'immagine GIF puo` avere una gamma massima di 256 colori, per cui una sfumatura puo` risultare sgranata.
Per quanto riguarda i PNG, credo che esistano dei trucchi per farli capire anche da IE (ma non so se si possono impiegare nel tuo problema specifico); prova con una ricerca nel forum CSS (bottone in alto) o fai una ricerca in rete.

Altrimenti con i commenti condizionali si puo` fornire un'immagine specifica per IE, per cui potresti presentare il PNG in tutti i browser che lo interpretano bene, ed il GIF agli utenti di IE6.