Immagine dentro tag label

[fcaldera]

Ciao a tutti

sto scrivendo una pagina XHTML strict 1.0

ho un form al suo interno con una sequenza di radiobutton corredate ciascuna dalla sua label

dentro la label anzichè un testo ho inserito un'immagine. Con Firefox cliccando sull'immagine si seleziona correttamente il relativo radiobutton, mentre con explorer no.

Qualche suggerimento? Io ho provato anche ad usare un css apposito per l'elemento label

label {
  display	: block;
  border	: 1px #ccc dashed;
  z-index	: 100;
  overflow	: visible;
}

ma in IE sembra che, nella posizione in cui si trova l'immagine, non sia possibile cliccarvi sopra. Se clicco appena fuori dall'immagine il bottone si seleziona...

qualche idea?

Grazie

Fab.

[edy72]

ho tirato ad indovinare, non avendo sottomano il tuo xhtml.

ho provato una soluzione mettendo l'immagine come sfondo tramite CSS, l'ho validata col validatore del W3C e testata con I.E. Firefox e Opera.
Non saprei valutarne bene il livello di accessibilità, comunque se vuoi provare...
questo il CSS:

/*questa la label */
label {
  display: block;
  border: 1px #ccc dashed;
  width: 150px;   
  height: 55px;
/*importante esplicitare larghezza e altezza*/
  z-index: 100;
  overflow: visible;

}

/* le mie aggiunte */
div, form, label, input {margin:0; padding: 0;}

/* qui inserisci le immagini come sfondi*/
.primo_radio {
background: url(foto1.jpg) no-repeat 20px 0;
}

.secondo_radio {
background: url(foto2.jpg) no-repeat 20px 0;
}

.terzo_radio {
background: url(foto3.jpg) no-repeat 20px 0;
}

.no /*questa per l'accessibilità, 
ma ti ripeto, da verificare la sua validità*/
{
position: absolute;
top: -3000px;
left: -300px;
}

e questo l'xhtml (ho messo gli a capo tra i label, input e span per non allargare troppo la finestra, ma è meglio che nel codice li togli):

<form id="prova" action="boh.php" method="get">
<div>
<label for="radiouno" class="primo_radio">
<input type="radio" name="scelta" value="uno" id="radiouno" />
<span class="no">uno</span>
</label>
<label for="radiodue" class="secondo_radio">
<input type="radio" name="scelta" value="due" id="radiodue" />
<span class="no">due</span>
</label>
<label for="radiotre" class="terzo_radio">
<input type="radio" name="scelta" value="tre" id="radiotre" />
<span class="no">tre</span>
</label>
</div>
</form>

ciao!!