title: CSS Sprites not working properly on Firefox
body: <p>I added CSS Sprites for Social Media icons on my website but it is not working properly on Firefox where as the view is accurate on Safari and Chrome.</p>
  
  <p>CSS: </p>
  
  <pre><code>#social-icons {
     margin: 4px auto 0;
     padding: 0 0 15px;
     border-bottom: 1px dotted #222;
     text-align: right;
     font-size: .9em;
     float: right;
     width: 80%;
  }
  
  #social-icons .facebook {
     width: 30px;
     height: 30px;
     background: url(../img/social_media_icons.png);
     float: right;
     background-position-x: 289px;
     background-position-y: 0px;
  }
  
  #social-icons .twitter {
     width: 30px;
     height: 30px;
     background: url(../img/social_media_icons.png);
     float: right;
     background-position-x: 193px;
     background-position-y: -32px;
     margin-left: 10px;
  }
  
  #social-icons .youtube {
     width: 30px;
     height: 30px;
     background: url(../img/social_media_icons.png);
     float: right;
     background-position-x: 386px;
     background-position-y: -161px;
     margin-left: 10px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="social-icons"&gt;
     &lt;div class="youtube"&gt;&lt;/div&gt;
     &lt;div class="twitter"&gt;&lt;/div&gt;
     &lt;div class="facebook"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On Firefox it is only showing Facebook`s icon repeatedly. What could be the problem?</p>