title: Why do my image background disappear on float: left?
body: <p>I want to create a navbar with images on each end to make it purty.</p>
  
  <p>So, I created the HTML and CSS below and it worked great.  My menu items are in a ul/li list.</p>
  
  <p>When I style the list to put the items all on one line, the images on the ends disappear.  What's up with that?  How do I fix it?</p>
  
  <p>The culprit is float: left; below.</p>
  
  <p>--- test.html ---</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="test.css" type="text/css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="header-usernav" class="span-6 last large"&gt;
              &lt;div id="header-usernav-leftside"&gt;&lt;div id="header-usernav-rightside"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;Register&lt;/li&gt;
                      &lt;li&gt;Signin&lt;/li&gt;
                      &lt;li&gt;Signout&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>--- test.CSS ---</p>
  
  <pre><code>#container #header-usernav {
      background: url('http://www.webcredible.co.uk/i/bg-i-resources.gif');
      height: 28px;
      background-repeat: repeat;
  }
  #container #header-usernav-leftside {
      background: url('http://www.webcredible.co.uk/i/nav-l-h.gif');
      background-position: top left;
      background-repeat: no-repeat;
  }
  #container #header-usernav-rightside {
      background: url('http://www.webcredible.co.uk/i/nav-r-h.gif');
      background-position: top right;
      background-repeat: no-repeat;
  }
  
  #container #header-usernav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      margin-left: 10px;
  }
  
  #container #header-usernav li {
      float: left;
      padding: 0;
      margin: 0 0.2em;
  }
  </code></pre>
  
  <p>The images are different so the html/css can be copied pasted to test it.</p>
  
  <p>What's the deal?  What am I doing wrong?</p>