title: Display Image in Horizontal UL LI with Sprite in CSS
body: <p><a href="http://www.w3schools.com/css/css_image_sprites.asp" rel="nofollow noreferrer">Image Sprites</a>, by themselves, are not evil; however, trying to get these to work in an <a href="http://www.w3.org/MarkUp/html3/bulletlists.html" rel="nofollow noreferrer">unordered list</a> is difficult. Going a step further and trying to get this <code>unordered list</code> to display <strong>horizontally</strong> (working example <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal" rel="nofollow noreferrer">>> HERE &lt;&lt;</a>) is certainly an enigma.</p>
  
  <p>Here is my jsFiddle Project: <a href="http://jsfiddle.net/jp2code/hNJmD/" rel="nofollow noreferrer">jsFiddle: hNJmD</a></p>
  
  <p>It seems like every time I get something working, I make the smallest edit to customize it for my app and it breaks.</p>
  
  <ul>
  <li><strong>Does it matter what order items in a CSS file are declared?</strong> </li>
  <li>Does a <code>&lt;ul&gt;</code> tag have to be defined before a <code>&lt;li&gt;</code> tag?</li>
  <li>Does <code>height:</code> need to be specified before <code>width:</code>? (I generally try to list things alphabetically so I don't accidentally have duplicates)</li>
  </ul>
  
  <p>Here is the image I am using as my Sprite:</p>
  
  <p><img src="https://i.stack.imgur.com/NQlw9.gif" alt="Sprite"></p>
  
  <p><strong>My Goal:</strong></p>
  
  <ul>
  <li>Center the menu horizontally the page</li>
  <li>Have the full image display (all 50 px)</li>
  <li>Disable the <code>a.hover</code> effect for the <strong>active</strong> item (<em>Link 1</em>)</li>
  </ul>
  
  <p>The CSS is:</p>
  
  <pre><code>#nav {
    text-shadow: 4px 4px 8px #696969;
    white-space:nowrap;
    vertical-align: middle;
  }
  #nav ul {
    list-style-type:none; /* removes the bullet from the list */
  }
  #nav li {
    display: inline-block;
    text-align: center;
    height: 50px;
    width: 192px;    
  }
  #nav a {
    background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
    display: block;
    color:Blue;
  }
  #nav a:hover {
    background-position: 0 -50px;
    color:Red;
  }
  #nav .active, a:hover {
    background-position: 0 0;        
    color:Black;
  }
  #nav span {
    top: 15px;
    padding-left: 5px;
  }
  ​
  </code></pre>
  
  <p>The HTML used in the jsFiddle is repeated here as well:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div&gt;
      &lt;ul id="nav"&gt;
        &lt;li&gt;
          &lt;a class="active" href="#"&gt;
            &lt;span&gt;Link 1&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;span&gt;Link 2&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;span&gt;Link 3&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;div style="text-align:center;"&gt;
    &lt;p&gt;REFERENCE: Sprite (Width: 192, Height: 150):&lt;/p&gt;
    &lt;img src="http://i.imgur.com/Sp7jc.gif"&gt;
  &lt;/div&gt;
  &lt;/body&gt;​
  </code></pre>
  
  <p><strong>Can somebody show me how to get this crazy thing to work?</strong></p>