CSS精灵问题，布局混乱

我正在尝试更新一些代码以使用CSS精灵。在某些情况下，它工作正常，在另一些情况下，它会破坏页面布局，我无法找出我做错了什么

这是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>

我已经创建了我的精灵，并尝试将CSS更改为：

.footer-left {

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

尺寸和偏移是正确的，但结果并不理想。精灵区域大致显示在正确的位置，但是footer-logo.gif和文本被弄乱了

---

有什么想法吗？

唯一对徽标和文字有影响的是您添加的尺寸；您将页脚的

宽度设置为
20px
，如果之前没有设置，则肯定会影响
bla-bla-bla
文本和
.footer\u right

请注意，
.footer\u right
和文本都位于
20px
wide
footer\u left
中

您确定嵌套的
div
结构正确吗？
代码中有一个未关闭的
。是吗？有时候最简单的东西是最难看到的。你能定义“结果不漂亮”吗？对不起，复制/粘贴时缺少是我的错。对不起，复制/粘贴时缺少是我的错。“结果不太好”：我很难找到单词。页脚右侧div的内容显示在它们应该位于的左侧（页脚左侧图像的左侧），文本段落将自身压缩到一个单词的最小宽度。实际上，这是因为我正在设置div的宽度和高度，不是吗？而不仅仅是图像。如何设置图像尺寸而不影响div尺寸？@Harold Moberg，你不能设置背景图像的尺寸。
.footer-left {

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