Home/ Questions/Q 7814103
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T05:05:26+00:00

Alright, this is a weird problem I’m having. I have two pages, which are

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0