CSS sprite problem, screwing up layout

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.

Here's a fragment of the html ....

  <div id="footer"><!-- footer -->
  <div class="footer-top">
   <div class="footer-left">
    <div class="footer-right">
     <a href="/index.php" id="footer-logo"><img src="footer-logo.gif" /></a>

     <br /><br />
     <div>
<p>blah blah blah</p>

     <div class="clearfloat"></div>
    </div>
   </div>
  </div>
  </div>

... and the CSS:

.footer-left {
        background: url(/images//footer-left_.gif) n开发者_开发知识库o-repeat left top;
}

I've created my sprite, and tried changing the CSS to:

.footer-left {

      background:url('/images/sprites.gif')  -66px -2px no-repeat;
      width:20px;
      height:99px;
}

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

text are messed up.

Any ideas please?

The only things that have any effect on the logo and the text, are the dimensions you added; you set the width of the footer to 20px and if that wasn´t there before, that definitely has an effect on your bla bla bla text and .footer_right.

Note that .footer_right and the text are both located inside your 20px wide footer_left.

Are you sure your nested div structure is correct?