CSS consistency crossbrowser on a simple css3 animation

Question

I have a problem on css consistency here: http://www.progettostand.com/ Checking the social icons top-right, the icon positions are correct on IE (miracle!), always 20px off with FF and off on page load, then centered after first hover on Chrome. Sure it is something bound to the :after margin-left behavior. I've tried fiddling with that, but only managed to switch problem between browsers and never managed to have all three working as intended. please help me nail it.

Thanks a lot in advance for your time and effort.

Answer 1

Just a quick fix, currently I only have Chrome to test, so can't really vouch for other browsers, but maybe try adding something like this to your styles:

#top-social-bar a{
 text-align:left;
}

#top-social-bar a:before, 
#top-social-bar a:after { 
  text-align: center;
}

Answer 2

Somtimes external themes are not reliable.

You must add this in the end of your style.css:

#top-social-bar{ 
    display:table;
}
#top-social-bar li {
    display: table-cell;
    float: none;
}
#top-social-bar a:before, #top-social-bar a:after{
    width:auto
}