title: Strange Blank Space at Top of Page – HTML, CSS, and PHP
body: <p>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).</p>
  
  <p>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.</p>
  
  <p>The second page is different in the fact that it uses PHP <strong>before</strong> the Doctype Declaration. However, as said later on, I don't think this is the problem.</p>
  
  <p>To see this effect, look at both of these pages consecutively: <a href="http://www.codecreek.biz/login" rel="nofollow noreferrer">http://www.codecreek.biz/login</a> and <a href="http://www.codecreek.biz/registration/register" rel="nofollow noreferrer">http://www.codecreek.biz/registration/register</a>.</p>
  
  <p>Just to be clear, I've looked at many possible answers on this already. <a href="https://stackoverflow.com/questions/9630240/mysterious-white-space-at-top-of-page" title="This">This</a> doesn't appear to be my case, as I'm not using a table on these pages.</p>
  
  <p>Here's what I've tried:</p>
  
  <ul>
  <li>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 <em>less</em> line of whitespace at the top, before its Doctype Declaration.</li>
  <li>Removing the PHP code from the second page. This didn't have any effect either.</li>
  <li>Reducing the apparent space between the closing PHP tag <code>?&gt;</code> and the <code>&lt;!DOCTYPE HTML&gt;</code> to nothing. This again didn't have any effect.</li>
  <li>Checking for a <a href="http://en.wikipedia.org/wiki/Byte_order_mark" rel="nofollow noreferrer" title="BOM">BOM</a>. I did this using vim, and the results confirmed that no BOM was used.</li>
  <li>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: <a href="http://www.codecreek.biz/resources/main.css" rel="nofollow noreferrer">http://www.codecreek.biz/resources/main.css</a>. (Disclaimer: I'm in the process of rewriting that page, so if it looks quite strange, there you go !).</li>
  </ul>
  
  <p>Additionally, Safari's developer inspection tool clearly shows that the <code>&lt;body&gt;</code> tag on my second page only begins around 20 pixels down. </p>
  
  <p>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.</p>
  
  <p>EDIT: Here's the CSS, both for the 'title' image, and the 'squiggly line' image.</p>
  
  <pre><code>#login_title { position:absolute; width:1000px; top:100px; }
  #login_line { position:absolute; width:500px; top:330px; left:250px; }
  </code></pre>