页面顶部的奇怪空白 - HTML，CSS和PHP

Alright, this is a weird problem I'm having. I have two pages, which are slightly different, but that share several of the same elements (two images, basically).

These images are both controlled by the same CSS style sheet, however, they both seem to be about 20-30 pixels lower on the second page.

The second page is different in the fact that it uses PHP before the Doctype Declaration. However, as said later on, I don't think this is the problem.

To see this effect, look at both of these pages consecutively: http://www.codecreek.biz/login and http://www.codecreek.biz/registration/register.

Just to be clear, I've looked at many possible answers on this already. This doesn't appear to be my case, as I'm not using a table on these pages.

Here's what I've tried:

  • Checking for whitespace in the code. However, if you view the sources for both of these pages, you'll actually notice that the second, problematic one has one less line of whitespace at the top, before its Doctype Declaration.
  • Removing the PHP code from the second page. This didn't have any effect either.
  • Reducing the apparent space between the closing PHP tag ?> and the <!DOCTYPE HTML> to nothing. This again didn't have any effect.
  • Checking for a BOM. I did this using vim, and the results confirmed that no BOM was used.
  • Checking my CSS. I didn't find anything strange, but I'm quite a novice at CSS, so, as this might be the problem, here's the link to my style sheet: http://www.codecreek.biz/resources/main.css. (Disclaimer: I'm in the process of rewriting that page, so if it looks quite strange, there you go !).

Additionally, Safari's developer inspection tool clearly shows that the <body> tag on my second page only begins around 20 pixels down.

I'm honestly quite lost. I'm hoping there is a simple fix for this, but I've been working on this for several hours to no avail.

EDIT: Here's the CSS, both for the 'title' image, and the 'squiggly line' image.

#login_title { position:absolute; width:1000px; top:100px; }
#login_line { position:absolute; width:500px; top:330px; left:250px; }

The H1 on the register page has a default Margin to it. Sometimes, I don't know why, if you give the first element a margin, it applies it to the parent.

By giving the H1 #register_title a top margin of 0, you should fix your problem.

#register_title { margin-top: 0; }

Always remember to use a reset.css implementation or keep in mind that elements are styled by default.

Edit: I'd like to point out that this was an issue because of all your previous elements were absolutely positioned. You really should not be using absolute positioning the way you are. You should use margin-top, padding-top to move elements down the page. Absolute positioning should only be used when no other avenues of positioning an element are available.

One major difference is that the first page has title animation javascript which moves the title to its final position. The register page has no such logic.

In http://www.codecreek.biz/registration/register, the logo (login_title) has a position of absolute, but in the other page it's relative.

When set to relative in http://www.codecreek.biz/registration/register, it fixes the gap.

(You're overriding it inline on http://www.codecreek.biz/login with relative by the way, so the 'top: 100' isn't taking effect, where as it is on the other page)