I worked on a site a week ago or so and checked it with IE 8 but not IE 7...

The customer then contacted me saying that some images were "completely" off. (about 30 pixels)

The image being off was actually centered. IE 7 and older does NOT properly reset the text-align CSS settings. So the parent setting leaks in the children instead of the chidren using the default as they should. So that one was easy, I just added a text-align: left; in the next <div> statement and got that to work right!

Next, I notice that the shadow from the sides was leaking at the bottom. Hmmm... What the heck. The <div> block stops some 100 or so pixels before!

The fact is, I had a footer which was defined with a negative margin. You never know. So I removed that margin, no effect. The leak was still there. So... imagine something like this:

  <div id="page">
    <div id="shadow">
    </div>
    <div id="footer">
    </div>
  </div>

The shadow CSS included the following:

  background: url(image/shadow.png) repeat-y 0 0;

At first, I thought that the repeat-y may have a problem. But frankly, I used it many times before, so I don't see why that would be a problem.

Searching some more, I recalled that I had a large margin on one of my <div> tags. That tag was inside the <div id="shadow">. Removing that margin completely actually fixed the problem!

The fact is that any element after a large margin are supposed to be rendered inside the margin space. But older Internet Explorer versions were not capable of that feat. I'm glad they fixed it, in 10 years we'll be able to ignore that crap!

So the problem was something like this:

  <div id="page">
    <div id="shadow">
      <div style="margin-bottom: 100px;"> Creates leak of id="shadow" background
      </div>
    </div>
    </div>
    <div id="footer">
    </div>
  </div>

Note that there are thousands of reasons why IE6 and IE7 will break. This is really just one of them.