Mysterious 2px difference between Firefox and Chrome

background-position, cross-browser, css, html, margin

Solution

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>
        <div class="circle">
            <a href="#" class="wheel"></a>
        </div>          
        <div class="circle">
            <a href="#" class="wheel"></a>
        </div> 
        <div class="circle" style="margin-right:0">
            <a href="#" class="wheel"></a>
        </div> 
        <div class="horizontal">
    </div>

and your CSS:

      .anchorSection{
            width:838px;
            height:102px;
            position:relative;
        }
        .circle{
            width:99px;
            height:102px;
            background:url("circle.gif");
            float:left;
            margin-right:147px;
            z-index:-1;

        }
        .circle:last-child{
            margin-right:0;
        }
        .circle a{
            width:39px;
            height:39px;
            display:block;
            margin:0 auto;
            margin-top:29px;
        }

        .circle a.wheel{
            background:url("wheel.gif") 0 0 no-repeat
        }
        .circle a.wheel:hover{
            background-position:-39px 0;
        }
        .horizontal{
            position:absolute;
            top:50%;
            border-top:1px solid #cfcfcf;
            border-bottom:1px solid #ececec;
            width:100%;
            z-index:1
        }

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.

Problem

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 HIGHLIGHT */ .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 `<a>` 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 `<a>` elements. 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.

Original source