ozisak ozisak - 3 years ago 151
HTML Question

Mozilla and Chrome difference on CSS

I have a problem with my css. I 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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download