BeetleTheNeato BeetleTheNeato - 11 months ago 63
CSS Question

Mysterious 2px difference between Firefox and Chrome

My question is referred to this site I've been developing.
See the place where there are 4 circles and 4 buttons inside? This is their relevant CSS:

.steps {
background: transparent url(img/bg-steps.gif) 37px 92px no-repeat;
clear: both;
float: left;
text-transform: uppercase;
.steps .col {
margin-top: 15px;
text-align: center;
.col.steps-1 {
width: 194px;
.col.steps-2 {
margin-left: 40px;
width: 196px;
.col.steps-3 {
margin-left: 21px;
width: 232px;
.steps .col.last {
margin-left: 11px;
width: 226px;
.steps .col.last h3 {
margin: 0 auto;
width: 129px;
.steps h2 {
font: 24px 'ProximaNovaLight';
.steps h3 {
color: #7f7f7f;
display: block;
font: 14px 'ProximaNovaSemibold';
height: 20px;
.steps p {
font: 9px 'Arial';
.steps .col .icon {
margin: 28px 0 40px 0;
position: relative;
left: 43px;
width: 98px;
height: 98px;
.steps-1:hover h3,
.steps-2:hover h3,
.steps-3:hover h3,
.steps .col.last:hover h3 {
color: #c03a2f;
.steps-1:hover .icon,
.steps-2:hover .icon,
.steps-3:hover .icon,
.steps .col.last:hover .icon {
background: transparent url(img/ico-steps-hover.gif) -6px 3px no-repeat;
.steps-2:hover .icon {
background-position: -240px 3px;
.steps-3:hover .icon {
background-position: -457px 3px;
.steps .col.last:hover .icon {
background-position: -700px 3px

As you can see I used a background-image for the circles and
elements to build the hover effect. Originally, the anchors have no background. On hover, they are assigned the same sprite and different background positions. I have used relative positioning and margins to position the

My problem is that there is a 2px difference between Chrome and Firefox that is breaking the effect in the latter. I can't tell whether the difference is appearing in the margins ou in the background-position nor why it exists.

Did anyone have this kind of problem before? Why is this happening? How do I fix it? I've been struggling for hours trying to find a solution.

Answer Source

May I suggest a better way of implementing this? You have 2 large images that are 21.8K and 23k. You only need 1 image for the circular background. and the icons with their red hover state in a sprite. and you don't need an image for the horizontal line, you can do it with pure CSS. Click on the link below. Here's what it should look like: fiddle

your HTML:

    <div class="anchorSection">
        <div class="circle">
            <a href="#" class="wheel"></a>
        <div class="circle">
            <a href="#" class="wheel"></a>
        <div class="circle">
            <a href="#" class="wheel"></a>
        <div class="circle" style="margin-right:0">
            <a href="#" class="wheel"></a>
        <div class="horizontal">

and your CSS:


        .circle a{
            margin:0 auto;

        .circle a.wheel{
            background:url("wheel.gif") 0 0 no-repeat
        .circle a.wheel:hover{
            background-position:-39px 0;
            border-top:1px solid #cfcfcf;
            border-bottom:1px solid #ececec;

I have only done the first icon for you but repeated it 4 times. you obviously need need do the remaining 3 icons and their respective hover state. Make sure to put all 8 icons in a sprite, so you only load 1 image and use the proper background position to get the correct image for each icon and their hover state. Hope this helps.