title: IE8 not displaying positioned div correctly
body: <p>I am having some trouble with a layout in IE8 only. I have a large background image which is fine. Then I want my header details to sit on top of this. I used absolute positioning with a z-index to get it sitting on top. All other browsers its perfect, only IE8 is giving me problems. Its is positioning my header below the large image.</p>
  
  <p>Here is my code </p>
  
  <pre><code>&lt;div id="homepage-banner"&gt;
       &lt;img class="home-carousel" src="images/banner.jpg" /&gt;
  &lt;/div&gt;
                &lt;header&gt;
                      &lt;div id="logo"&gt;
                              &lt;img src="images/logo.png" /&gt;
                      &lt;/div&gt;
  
                      &lt;div id="header-text"&gt;
                              &lt;p&gt;&lt;span style="font-weight:bold; color: white"&gt;&gt;&lt;/span&gt; Call us now on &lt;strong&gt;0800 785 7348&lt;/strong&gt;&lt;/p&gt;
                              &lt;p&gt;&lt;span style="font-weight:bold; color: white"&gt;&gt;&lt;/span&gt; &lt;a href="#"  style="font-weight: bold; text-decoration: none; color: black"&gt;Click here&lt;/a&gt; to enquire online&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;div id="nav-bar"&gt;
                              &lt;img src="images/nav.png"  width="980" height="45"/&gt;
                      &lt;/div&gt;
              &lt;/header&gt; &lt;!-- header --&gt;
  </code></pre>
  
  <p>And my CSS</p>
  
  <pre><code>header {
      height: 120px;
      width: 980px;
      z-index: 1000;
      position: absolute;
      top: 25px; }
  
  
  #homepage-banner {
      height: 555px;
      width: 3000px;
      margin-left: -1000px;
      margin-bottom: -210px;
      background-color: rgb(0,173,239); }
  </code></pre>
  
  <p>How can I change my code so that IE8 displays my header on top of the image?</p>