Mozilla and Chrome difference on CSS

Question

I have a problem with my CSS. It works well on chrome but not on Mozilla Firefox.

My code is getting twitter icon to the left, when mouse is over the icons.

My HTML code:

<header>

  <div id="animation">
    <a href="http://www.facebook.com.tr">
      <img id="socialiconface" src="images/facebook.png">
    </a>

    <a href="http://www.twitter.com.tr">
      <img id="socialicon" src="images/twitter.png">
    </a>
  </div>

</header>

And my CSS is there:

#socialicon {
  position: absolute;
  -webkit-transition-property: margin-right;
  -moz-transition-property: margin-right;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  width: 40px;
  height: 40px;
  top: 5px;
  right: 2px;
}

#socialiconface {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 5px;
  right: 2px;
}

#socialicon:hover {
  margin-right: 70px;
}

Whatever I tried, that doesn't work unfortunately, could someone help me out?

Answer 1

Update this line to cover the whole animation div, otherwise you will have to follow the icon with your mouse for it to animate bacause it moves away.

#animation:hover #socialicon {
    margin-right: 70px;
}

Full code:

#socialicon {
    position: absolute;
    -webkit-transition-property: margin-right;
    -moz-transition-property: margin-right;
    -webkit-transition-duration:2s;
    -moz-transition-duration: 2s;
    width:40px;
    height: 40px;
    top: 5px;
    right: 2px;
}
#socialiconface {
    position:absolute;
    width:50px;
    height: 50px;
    top: 5px;
    right: 2px;
}
#animation:hover #socialicon {
    margin-right: 70px;
}
img {
    background: #ccc;
}

<header>
    <div id="animation">
        <a href="http://www.facebook.com.tr"><img id="socialiconface" src="images/facebook.png" /></a>
        <a href="http://www.twitter.com.tr"><img id="socialicon" src="images/twitter.png" /></a>
</div>
</header>