Problème surlignement de lien - infobulle

Bonsoir,

J’ai un souci avec mon infobulle. Si je ne mets pas dans mon header "a { text-decoration: none; }" le texte dans mon infobulle sera surligné comme un lien. Avec cette indication, le texte de l'infobulle est correct. Le problème est que précisément si je mets "a { text-decoration: none; }", plus aucun autre lien n’est surligné, or je souhaite que tous les autres sur la page restent surlignés (et le texte de l'infobulle non).

Pour mon infobulle :

a {
text-decoration: none;
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span {
display: none;
}
a:hover span {
position: absolute;
width: 200px;
height: 100px;
background-color: #666666;
padding: 5px;
display: inline;
color: #CCCCCC;
margin-top: 10px;
}

Pour mes liens :

.kko a
{
color:#0AA14B;
text-decoration:underline;
}
. kko a:hover
{
color:# 0AA14B;
text-decoration:underline;
}
. kko a:visited
{
color:# C33FEB;
text-decoration:underline;
}

Dans mon body :
<a href="#"> le texte du site<span> le texte de l’infobulle</span></a>.

J’ai essayé de mettre mes liens (kko) après l’indication "a { text-decoration: none; }" et inversement, mais c’est identique. Savez-vous comment contourner ce problème ?