title: HTML/CSS div not aligning at top of page
body: <p>Sorry for what seems like a repetitive question but none of them have solved my issue.</p>
  <p>All the margin, border, and padding settings are set to 0px. The margin-left and margin-right of the main page div are set to 15px on either side. At least I can't see anywhere I have forgotten to set one of those to 0px.</p>
  <p>For some reason, the top div of the page will not align at the top of the page.</p>
  <p>If I put any text between the <code>&lt;body&gt;</code> tag and the <code>&lt;div class=&quot;main&quot;&gt;</code> tag, that will be hard up against the top of the screen, but any text within the div &quot;main&quot; tag or the div &quot;header&quot; tag will have a margin of about 15px from the top of the screen.</p>
  <p>header.php:</p>
  <pre><code>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
  &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
  
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  
  &lt;head&gt;
  &lt;?php header('Content-Type: text/html; charset=utf-8'); ?&gt;
  &lt;title&gt;&lt;?php echo $title; ?&gt;&lt;/title&gt;
  &lt;link href='css/main.css' rel='stylesheet' type='text/css' /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class='main'&gt;
      &lt;div class=&quot;header&quot;&gt;
  
          &lt;img src=&quot;images/header1.png&quot; id=&quot;header&quot; /&gt;
      &lt;/div&gt;
      
      &lt;p class='heading_1'&gt;Welcome to D T Hourn Photography&lt;/p&gt;
      &lt;p class='bodycontent'&gt;
          Introduction blob
      &lt;/p&gt;
      &lt;p class='bodycontent'&gt;
          Albums:
      &lt;/p&gt;
  </code></pre>
  <p>css.main:</p>
  <pre><code>html
  {
  border:0px;
  padding:0px;
  margin:0px;
  }
  
  body
  {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-style: normal;
  background-image: url('../images/bg1.png');
  background-attachment:fixed;
  padding:0px;
  margin:0px;
  border:0px;
  }
  
  .main
  {
  top:0px;
  margin-top:0px;
  margin-right:15px;
  margin-left:15px;
  margin-bottom:0px;
  border-top:0xp;
  border-left: 2px outset #445566;
  border-right: 2px outset #445566;
  width:93%;
  max-width:1400px;
  background: rgb(222, 222, 222);
  background-color:rgba(255, 255, 255, 0.6);
  }   
  
  
  .header
  {
      border-bottom: 2px groove red;  
      margin:0px;
      background-image:url('../images/header1.png');
      background-size:100% 100%;
      height:200px;
  }
  
  
  img#header
  {
      width:100%;
      height:200px;
      vertical-align: bottom;
      border:0px;
      padding:0px;
      margin:0px;
      
  }
  
  .heading_1 
  {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      height:1.5em;
      font-weight: bold;
      color: #000000;
  }
  
  .heading_2
  {
      font-weight: bold;
  }
  
  table
  {
      border:1px solid #0000ff;
      padding:0px;
      border-collapse:collapse;
      background-color:#ffffff;
      
  }
  .tables_heading 
  {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: bold;
      background-color: #99ccff;
      border-bottom:1px solid #0000ff;
  }
  </code></pre>
  <p>EDIT: added extra code from the header.php file. as said if I put plain text between <code>&lt;body&gt;</code> and <code>&lt;div class=&quot;main&quot;&gt;</code> then that text is hard against the top of the browser. but anything between the div's has a border of ~15 pixels.</p>
  <p>The actual site (what I've done so far) can be seen at <a href="http://dthourn.com/photography" rel="nofollow noreferrer">http://dthourn.com/photography</a></p>
  <p>The live version renders as I want it in firefox (at least on my computer) but not on I.E or google chrome. it doesn't render as I want it in any browser on my local computer.</p>