spirelli — 2012-04-05T09:53:39-04:00 — #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?
technobear — 2012-04-05T10:00:33-04:00 — #2
When you say "a bit of a mess", do you mean like this?
I can't see any gap. (:
spirelli — 2012-04-05T10:09:28-04:00 — #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.
ryanreese — 2012-04-05T10:20:35-04:00 — #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
spirelli — 2012-04-05T10:27:38-04:00 — #5
Thank you, RyanReese, my hero!
ryanreese — 2012-04-05T10:31:32-04:00 — #6
Don't make me blush .
Glad I could help. You're welcome.