Need help with mystery space

HTML & CSS
1

I’d be grateful if someon could take a quick look at this: http://www.fightforsight.org.uk/sightlosspsp

It’s a bit of a mess, as work in progress. But What is is: there is a space at the top of the page, and I cannot figure out why. The body has been set to 0 margins and padding. The Header DIV should really be positioned at the top of the page. I just cannot work out why it isn’t.

Can somebody spot what’s going on here?

Many thanks.

2

When you say “a bit of a mess”, do you mean like this?

I can’t see any gap. (:

3

Thanks for looking.

When I look at with with Firebug, the there is a white gap above the BODY element even. See attached. I have no idea what that extra space is. I would expect the DIV (id=“partnership”) with the background image to be bang against the top of the page.

4

Hello :). You are experiencing collapsing margins. Inside the partnership div, you have a <h1> which has top and bottom margins set. It’s seeping out through the parent containers and causing the collapse. You have a few different options.

  1. Remove margins on <h1> (you should use a reset to avoid this in the future)
  2. Stop the margin collapse by setting either a 1px top padding or 1px top border on the partnership div
5

Thank you, RyanReese, my hero!

6

Don’t make me blush :blush:.

Glad I could help. You’re welcome.