css tooltip IE6

[LoRdCoStE]

Sto realizzando un menù usando le liste.
Ad ogni voce del menù faccio comparire una tooltip sfruttando i css (:hover).
Funziona tutto perfettamente tranne che con IE 6 e precedenti.
Il problema consiste nel fatto che la mia tooltip finisce sotto al testo del menù.
Posto una versione semplificata del codice.
CSS:

ul.lista_discipline {
    width: 165px;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.lista_discipline  a{
    width: 165px;
    display: block;
    text-decoration: none;
    padding:1px;
    height:2em;line-height:2em;
}
ul.lista_discipline li{
    display: inline;
}

ul.lista_discipline li a:link, ul.lista_discipline li a:visited{
    color: #000;
}
ul.lista_discipline li a:hover, ul.lista_discipline li a:active{
    background: url(img/impronta.gif);
    color: #FFF;
}

a.info{
    position:relative;
}

a.info:hover{
    z-index:25;
}

a.info span{display: none}

a.info:hover span{
    padding: 1em;
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #DE566A;
    background-color:#FBB85D; color:#000;
    text-align: center
    } 

HTML:

<div id="discipline">			
<ul class="lista_discipline">				
	[*]<a class="info" href="?go=discipline&amp;id=1">Bachata<span>Bachata
</span></a>
	[*]<a class="info" href="?go=discipline&amp;id=7">Ballo Liscio e da Sala<span>Ballo Liscio e da Sala
</span></a>
	[*]<a class="info" href="?go=discipline&amp;id=8">Boogie Woogie<span>Boogie Woogie
</span></a>
	[*]<a class="info" href="?go=discipline&amp;id=9">Danza del ventre<span>Danza del ventre
</span></a>[/list]
</div>

Ne metto anche una versione online per chi volesse dare un'occhiata:
http://lordcoste.altervista.org/prova.htm

Dato che non tutti hanno IE6 metto anche uno screen:



Ringrazio chiunque provi a darmi una mano
Saluti

[custanz]

in teoria penso basti dare uno z-index allo span in questione tipo

z-index: 1000;

[LoRdCoStE]

niente, ho provato persion a inserirlo direttamente nello <spawn> con style:

<span style="z-index: 1000;">Bachata</span> 

[LoRdCoStE]

uppettino

[fcaldera]

prima di tutto cambia il doctype con uno xhtml strict 1.0 senza prologo xml


poi cambia le ultime regole così


a.info {
position:relative; /*this is the key*/
z-index: 1;
}

a.info:hover{
direction: ltr;
z-index : 2;
}

a.info span {
z-index: 10;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #DE566A;
background-color:#FBB85D; color:#000;
text-align: center;
display: none;
}

a.info:hover span {
display : block;
}

[LoRdCoStE]

Premetto che quella postata era una pagina fatta al volo per farvi vedere, la pagina reale era già xhtml strict.
Ad ogni modo ho fatto le modifiche che mi hai suggerito ma l'unica cosa che ho ottenuto è che adesso una volta comparsa la tooltip rimane li fissa.

puoi vedere il risultato qui

Se hai altri suggerimenti sono ben accetti

[fcaldera]

va bene, riscrivile così

a.info span {
display: none;
}

a.info:hover span {
display : block;
z-index: 10;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #DE566A;
background-color:#FBB85D; color:#000;
text-align: center;
}

[LoRdCoStE]

Adesso è funziona come all'inizio, su firefox tutto bene mentre su IE 6 il soilito problema della tooltip che finisce sotto al testo della lista.
Come al solito il risultato l'ho messo qua
Ad ogni modo ringrazio per l'aiuto e per la pazienza

[fcaldera]

a.info {
position: static;
}

a.info:hover{
position: relative;
direction: ltr;
z-index : 20;
}

così funziona

[LoRdCoStE]

Originariamente inviato da fcaldera
a.info {
position: static;
}

a.info:hover{
position: relative;
direction: ltr;
z-index : 20;
}

così funziona

mitico

grazie mille