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; }
