title: CSS differences in firefox and chrome
body: <p>I try to recreate my category widget, because I want to merge small images to CSS sprites. The code looks good in firefox, but in chrome, there are bigger spaces between the items. </p>
  
  <p>I need some technique to place unique css links in the same line, and I need more lines. This works in firefox, but not in google chrome.</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;ul class="css_sprite"&gt;
  
      &lt;div style="height: 55px; width: 260px; background-color: transparent;"&gt;
  
          &lt;span class="upper0"&gt;
              &lt;a href="#" class="rss_small"&gt;&lt;/a&gt;
              &lt;a href="#" class="follow_icon"&gt;&lt;/a&gt;
              &lt;a href="#" class="category"&gt;&gt;&gt; 1&lt;/a&gt;
          &lt;/span&gt;
  
          &lt;span class="upper1"&gt;
              &lt;a href="#" class="rss_small"&gt;&lt;/a&gt;
              &lt;a href="#" class="follow_icon"&gt;&lt;/a&gt;
              &lt;a href="#" class="category"&gt;&gt;&gt; 2&lt;/a&gt;
          &lt;/span&gt;
  
          &lt;span class="upper2"&gt;
              &lt;a href="#" class="rss_small"&gt;&lt;/a&gt;
              &lt;a href="#" class="follow_icon"&gt;&lt;/a&gt;
              &lt;a href="#" class="category"&gt;&gt;&gt; 3&lt;/a&gt;
          &lt;/span&gt;
  
      &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.css_sprite
  {
      list-style:none;
      list-style-type:none;
  }
  
  .css_sprite a 
  {
      display: block;
      height: 15px;
      outline: none;
  }
  
  .css_sprite a.rss_small
  {
      background-image:url('http://static.tumblr.com/puafveu/Uoilxj9e9/sombined_imges_for_css_sprites.png');
      background-position:-1px 0px;
      width: 49px;
      height: 15px;
      border: 0px;
  }
  
  .css_sprite a.follow_icon
  {
      background-image:url('http://static.tumblr.com/puafveu/Uoilxj9e9/sombined_imges_for_css_sprites.png');
      background-position:-32px -15px;
      width: 15px;
      height: 15px;
      position: relative;
      left: 52px;
      top: -15px;
  }
  
  .css_sprite span.upper0
  {
      position: relative;
      top: -0px;
  }
  
  .css_sprite span.upper1
  {
      position: relative;
      top: -27px;
  }
  
  .css_sprite span.upper2
  {
      position: relative;
      top: -54px;
  }
  
  .css_sprite a.category
  {
      position: relative;
      left: 73px;
      top: -33px;
  }
  </code></pre>