title: Background image left margin problem
body: <p>I have a series of background images that need to fade in and out and appear in the background. This background image appears behind my content, is centered, and is wider than my content. I do not want this image to affect the width of my page so there is no width set on the container div, ul, or li elements. I need to determine why there is a white left margin showing up over my background image. This margin shows up no matter how wide the browser window is as shown by my "test" li. The problem appears across browsers (tested: FF, Safari, Chrome, IE8) and has nothing to do with the javascript used for the rotation and fade.</p>
  
  <p>I'm sure this is something dead simple that I'm overlooking. Many MANY thanks to anyone who can point me in the right direction here.</p>
  
  <p><a href="http://starklmc.com/clients2/test/test.jpg" rel="nofollow">Link to an screenshot showing the problem.</a></p>
  
  <p><a href="http://starklmc.com/clients2/test/test.html" rel="nofollow">Live example of the problem.</a></p>
  
  <p>The HTML for this is:</p>
  
  <pre><code>&lt;div id="hdrHomeWrap"&gt;
  &lt;ul id="hdrHome"&gt;
      &lt;li class="hdrHome1"&gt;&lt;/li&gt;
      &lt;li class="hdrHome2"&gt;&lt;/li&gt;
      &lt;li class="test"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>#hdrHomeWrap {
  margin: 0 auto;
  position:relative;
  top:-20px;
  }
  #hdrHome #hdrHome li {
  margin:0;padding:0;
  position:relative;
  list-style:none;
  }
  #hdrHome li {
      display: block;
      height: 400px;
      display:none; /* hide the items at first only */
      list-style:none;
      }
      #hdrHome li.hdrHome1 {
      background: url('images/hdr-home1.jpg') no-repeat top center;
      }
      #hdrHome li.hdrHome2 {
      background: url('images/hdr-home2.jpg') no-repeat top center;
      }
      #hdrHome li.hdrHome3 {
      background: url('images/hdr-home3.jpg') no-repeat top center;
      }
      #hdrHome li.test {
      background: #F00;
      }
  </code></pre>