IE6 background-image margin/padding/spacing issue

Question

I'm currently designing a page with a footer split into two divs. The top div displays a background-image to separate it from the main page, and the second div contains the actual footer content.

It looks like the following in all browsers:

...except IE6, where it looks like:

I'm guessing it's a margin/padding issue, but I can't identify which div is causing it (it's working in all browsers except IE6!).

The work-in-progress site is available here, if anyone can identify where the extra space is coming from.

Answer 1

First of all, nice design!

Secondly, have you tried setting the line-height to 0 in the top div? Occasionally fixes the issue for me.

Answer 2

try removing any spaces between the tags. This has happened to me before in IE 6. So instead of:

<div id="footerTop"></div>

        <div id="footer">

do:

<div id="footerTop"></div><div id="footer">

Answer 3

In IE6 font-size has direct effect on block elements. So, to fix this, set font-size: 0 to the #footerTop DIV.