Blank space at top of page

HTML & CSS
1

Hi. I have some extra white space at the top of my page in IE8, FF, Chrome and Opera but not in IE7 at http://gandalf458.co.uk/test/test.php

I have used Chrome’s inspect element feature to try to find what’s wrong but the white space doesn’t seem to “belong” to any element. I have put zero padding and margin on just about everything.

Any ideas please? Thanks.

2

html element can also haz padding : )

  • {
    margin: 0;
    }

html, body, ul, ol {
padding: 0;
}

is what I often use (don’t use the margin one if you are already setting your own margins on everything already, but I usually like things at 0 anyhoo).

3

Sorry, this isn’t what’s happening in your case.

Your top-goober is being caused by that p#breadcrumb. P’s have natural margins, which is why my * {margin: 0;} always catches them. It’s hard for you to see that it’s from the p because you relatively positioned it elsewhere.

Let the breadcrumb get naturally pushed down by the stuff in <header>… or better yet, move the breadcrumb outside of and after the header. No reason to make everything more weird and difficult with relative positioning.

When you say “position: relative” on something, you’re actually creating a copy of that thing: a whole new box who sits on top of the old box.

When you move that box with top: 280px, you’re only moving the new box, which is visibly showing everything in it. The old box, however, is still there! Taking up space, and most importantly here, letting its margin get collapsed up into its parent, the <header>.

4

Hi and thanks. I was thinking of moving the breadcrumb outside the header…

5

But, if you can’t, just remove margin from p’s. Later on any you want, you add in to that specific element.

Or just remove margin from #breadcrumb specifically.

6

Thanks. It’s a lot cleaner with the breadcrumb div moved and also solves another problem with IE7…