Hover css con background-position

Ciao a tutti, ho il seguente codice css:

#social > a{
    background: url('sprite.png') no-repeat;
    float: left;
    width: 30px;
    height: 30px;
}

#social > a.facebook{
    background-position: 0 0;
    display:block
}

#social > a:hover.facebook{
    background-position: -30px 0;
} 

Ed il seguente codice HTML:

<div id="social">
<a href="https://www.facebook.com/" target="_blank" class="facebook"></a>
</div> 

Vorrei, utilizzando il background position con un'immagine sprite, cambiare lo sfondo al passaggio del mouse, ma quello che ottengo è che cambia soltanto al click fino a che non clicco da un'altra parte. Qualcuno sa aiutarmi?

[karl94]

Puoi indicare l'indirizzo della pagina in questione?

Certo!

Lo stesso problema si verifica nei tasti del menu! Non sto a darti il codice, tanto puoi ricavare sia il css che l'html dal link che ti ho dato! Se però ti dovessero servire, basta chiedere :D

[karl94]

A me sembra tutto regolare su Firefox. Con che browser noti il problema?

Con Safari per mac! A te va tutto sia i tasti del menu che i loghi di facebook e twitter?

[karl94]

Ti sei assicurato di aver cancellato la copia cache del browser?

Si, ma niente!

A me sembra tutto regolare con Firefox, Chrome e Safari (Mac e Windows)

Cavolo! Vi assicuro che ho provato ad aggiornare le cache dal pannello di sviluppo, ma niente! Ma voi se passate con il mouse sopra al menu riuscite a vedere che diventa arancione? E facebook e twitter che diventano grigi al passaggio del mouse?

EDIT: con chrome va! Forse c'è qualche problema con il vuotare le cache su safari!! Risolvo io :D