Probleme code css

Bonjour,
J'ai créé un site internet(je débute soyez indulgents) et j'ai un petit problème avec mon code css concernant mes onglets. Lorsque je visualise mes pages sous dreamweaver mes onglets sont comme je le souhaite, cependant lorsqu'il est en ligne mon code css ne marche pas(mon hébergeur est voila).Mes onglets doivent être violet, noir pour la page active et rose au passage de la souris.
Pouvez vous m'aider svp.
l'adresse de mon site est http://dunefenetrealautre.dnsalias.org

merci d'avance

mon code css:

body {
font-size: 100%;
font-family: tahoma,arial,helvetica,"bitstream vera sans",sans-serif;
color: #000000;
background-color: #ffffff;
width:1016px;
padding: 0px;
margin: 0px;
page-break-after: always;
}
#en-tete {
overflow: hidden;

}
#en-tete ul {
float: right;
margin-top: 0px;
margin-right: 30px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
list-style: none;
}
#en-tete ul li {
float: left;
margin-left: 3px;
}
#en-tete ul li a {
float: left;
text-decoration: none;
letter-spacing: 1px;
background-image:url(../images/coin-gauche1.gif);
padding-left: 10px;
background-position: 0% -250px;
background-repeat: no-repeat;
}
#en-tete ul li#actif {
float: left;
text-decoration: none;
letter-spacing: 1px;
padding-left: 10px;
background-image:url(../images/coin-gauche1.gif);
background-position: 0% 0%;
background-repeat: no-repeat;
}
#en-tete ul li a span {
float: left;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 0px;
background-image:url(../images/coin-droit1.gif);
background-position: 100% -250px;
background-repeat: no-repeat;
color: #ffffff;
}
#en-tete ul li#actif span {
float: left;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 0px;
background-image:url(../images/coin-droit1.gif);
background-position: 100% 0%;
background-repeat: no-repeat;
color: #ffffff;
}
#en-tete ul li a:hover {
background-position: 0% -500px;
}
#en-tete ul li a:focus {
background-position: 0% -500px;
}
#en-tete ul li a:hover span {
background-position: 100% -500px;
}
#en-tete ul li a:focus span {
background-position: 100% -500px;
}