Strange IE7 Spacing Appearing Under DIV

Question

http://www.downloadadeal.com.au/

The site above fine in all browsers except IE7 where a strange space appears between the content and the footer at the bottom of the layout? The two footer lines should match up. Has anybody experienced unexplained spacing before?

Answer 1

The ‘margin-bottom’ on ‘#home-content’ collapses through the bottom of the ‘#page-content’ on IE, whereas on other browsers it correctly sits above the floats just after ‘#home-content’ instead.

Margin-collapsing is quite hard to get right, especially given IE's bugs, so it's often best avoided if you can (using padding-top/bottom instead).

In any case I would strongly advise you not to try to make your page heights an exact number of pixels like on this page. Any change in font settings/size will break it badly; for example if I zoom the text size up a bit half the text falls out of its containers, making the page entirely unusable.

Answer 2

You use the p tag in your footer. This may have a margin set on it. (The default for HTML4 is 1.12 em). Try adding margin-bottom: 0px; to the styles for the p elements in the footer.

You also have some stray space characters between the various div tags.

Answer 3

No idea for sure, but you've a css rule 'div#page-content' with a height value set to "auto !important" which may be the problem since it is overriding a more specific rule named 'body#home div#page-content' that is trying to set the height to 636px. I can see you are trying to be pixel-accurate on the left and right sides of this page and that item might be foiling you?

Just something to look at.

Answer 4

With IE, its a good idea to close your divs immediately after your content: Instead of this:

<div>
  My Content
</div>

Do this:

<div>
  My Content</div>

I know, it messes up your nice indenting, but i find it works for me.