title: PNG background image not showing in IE 8< using html5?
body: <p>I have the following html code:</p>
  
  <pre><code>&lt;section class="first-content-top"&gt;
      &lt;img src="images/img-diner.png" /&gt;
      &lt;h1&gt;Menu&lt;/h1&gt;
  &lt;/section&gt;
  &lt;section class="first-content-middle"&gt;
           &lt;article class="menu"&gt;
       &lt;/article&gt;
  &lt;/section&gt;
  &lt;section class="first-content-bottom"&gt;&lt;/section&gt;
  </code></pre>
  
  <p>With the following type of css:</p>
  
  <pre><code>.first-content-middle 
  {
      background: url("images/bg-black.png") repeat;
      margin: 0 0 0 37px;
      padding: 0 20px;
      width: 595px;
  }
  </code></pre>
  
  <p>But in IE8 i still can't see a background image, like i see in IE9 or firefox:</p>
  
  <p><strong>Here's a picture of IE8:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/pr6r0.jpg" alt="Here&#39;s a picture of IE8"></p>
  
  <p><strong>And here is a picture of firefox, how it should be:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/hW7YM.jpg" alt="And here is a picture of firefox, how it should be"></p>
  
  <p><strong><em>I tried the follwing solutions:</em></strong></p>
  
  <p>To prevent the problem i added the following html5shiv code to the head of the page:</p>
  
  <pre><code>&lt;!--[if IE]&gt;
  &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  </code></pre>
  
  <p>And in firebug i checked to make sure that the section element has the <code>display:block;</code> property set.</p>
  
  <p>Edit: Adding the <code>height</code> css property to the section fixes the background problem. But the section height is variable. So how do i fix that?</p>
  
  <p>Any suggestions?</p>