title: CSS sprite problem, screwing up layout
body: <p>I'm trying to update some code to use CSS sprites. In some situations it works fine, in others it screws up the page layout, and I can't figure out what I'm doing wrong.</p>
  
  <p>Here's a fragment of the html ....</p>
  
  <pre><code>  &lt;div id="footer"&gt;&lt;!-- footer --&gt;
    &lt;div class="footer-top"&gt;
     &lt;div class="footer-left"&gt;
      &lt;div class="footer-right"&gt;
       &lt;a href="/index.php" id="footer-logo"&gt;&lt;img src="footer-logo.gif" /&gt;&lt;/a&gt;
  
       &lt;br /&gt;&lt;br /&gt;
       &lt;div&gt;
  &lt;p&gt;blah blah blah&lt;/p&gt;
  
       &lt;div class="clearfloat"&gt;&lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>... and the CSS:</p>
  
  <pre><code>.footer-left {
          background: url(/images//footer-left_.gif) no-repeat left top;
  }
  </code></pre>
  
  <p>I've created my sprite, and tried changing the CSS to:</p>
  
  <pre><code>.footer-left {
  
        background:url('/images/sprites.gif')  -66px -2px no-repeat;
        width:20px;
        height:99px;
  }
  </code></pre>
  
  <p>The dimensions and offsets are correct, but the result isn't pretty. The sprite region shows in roughly the right place, but footer-logo.gif and the <p> text are messed up.</p>
  
  <p>Any ideas please?</p>