Margin for footer being applied at top of page!?

[mjb2000]

Hi all, long time reader, first time poster...

I am working on this site: http://beta.neovoca.com/Home.aspx

The original css layout is based on the 960 layout system, but I am having a problem getting space between my main block block of content and the footer.

Take a look at #footerBG - It has a margin-top of 100px - Which it is honouring as you would expect - but it is also allocating this space at the very top of the page too (You can see this by flicking this class on and off in Firebug).

I'm pretty sure I am making some silly mistake, but I just can't work it out.

Interestingly placing a <br clear="all" /> between the #content div and the #footerBG div does fix the problem - But adding a clearing div doesn't work.

Finally this problem only shows for me in FF3 - IE7 shows the page as I would like it to appear.

Any thoughts?

Thanks

[azoomer]

It is a little bit strange and i couldn't explain what is happening. What seems to fix the issue is to take away the margin-top:100px, like this

#footerBG {
	background:#0b1f36;
	margin: 0 0 75px 0;
}

and the somewhere add this

#content{
	padding-bottom:100px
}

Just a suggestion and I can't be sure if it works, but you can try it.

[mjb2000]

Thanks azoomer - I have made the change as you suggested and it is working.

I also tried

#content {
margin-bottom: 100px
}

But this also had the same problem as before???