metà link

[Gnegno]

<h1><span class="header_name">nome</span> [url=""]<span class="header_surname">cognome</span><span class="small">.xxx</span>[/url]</h1> 

in pratica questa scritta quando uno passa sul cognome compresivo del .xxx dovrebbe cambiare colore e sottolinearsi, però si sottolinea di rosso tutto, mentre del testo solo .xxx si colora di rosso e cognome no! Non capisco perchè!?
questo è il css

#header h1 {
    color:#FFFFFF;
    font-size:36px;
    font-family:Arial, Helvetica, sans-serif;
    padding-top:40px;
}


#header span.header_name {
    color: #FFF0A6;
}

#header span.header_surname {
    color: #FFFFFF;
}

#header span.small {
    font-size:20px;
    font-weight:lighter;
}

#header a:link {
    color: #FFFFFF;
    text-decoration:none;
}

#header a:visited {
    color: #FFFFFF;
    text-decoration:none;
}

#header a:hover {
    color:red;
    text-decoration:underline;
}