title: Mysterious 2px difference between Firefox and Chrome
body: <p>My question is referred to <a href="http://novaecomm.com.br/blog/" rel="nofollow">this</a> site I've been developing.
  See the place where there are 4 circles and 4 buttons inside? This is their relevant CSS:</p>
  
  <pre><code>/* 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
  }
  </code></pre>
  
  <p>As you can see I used a background-image for the circles and <code>&lt;a&gt;</code> 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 <code>&lt;a&gt;</code> elements.</p>
  
  <p>My problem is that there is a <i>2px difference</i> 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.</p>
  
  <p>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.</p>