CODEWITHSUNDEEP
cssbackground-image
Rezzie
Rezzie

Reputation: 4993

IE6 background-image margin/padding/spacing issue

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:

Good

...except IE6, where it looks like:

Bad

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.

Upvotes: 0

Views: 963

Answers (3)

Bundyo
Bundyo

Reputation: 2193

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

Upvotes: 3

Roger Walsh
Roger Walsh

Reputation: 339

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">

Upvotes: 0

Liggi
Liggi

Reputation: 744

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.

Upvotes: 0

Related Questions