title: Styling <li> with background images in an <ul>
body: <p>I'm setting up a footer for a site and using an unordered list with three list items as follows:</p>
  
  <pre><code>&lt;ul id="socialnav"&gt;
      &lt;li id="facebook"&gt;&lt;/li&gt;
      &lt;li id="twitter"&gt;&lt;/li&gt;
      &lt;li id="googleplus"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am trying to use background images for the list items to display the social media icons and then I would like to apply a hover state to the list item for the button's 'on-state'.  However, my three icons won't appear horizontally in the list.  Here is my css:</p>
  
  <pre><code>#socialnav {
  display: inline;
  line-height: 42px;
  }
  
  #facebook {
  background-image: url("images/fb.png");
  background-repeat: no-repeat;
  list-style-type: none;
  height: 42px;
  }
  
  #twitter {
  background-image: url("images/twt.png");
  background-repeat: no-repeat;
  list-style-type: none;
  height: 42px;
  }
  
  #googleplus {
  background-image: url("images/gplus.png");
  background-repeat: no-repeat;
  list-style-type: none;
  height: 42px;
  }
  </code></pre>
  
  <p>Two questions - why is this not working?  And is there a better/easier way to do this?</p>