title: How do I remove whitespace from stacked DIVs in IE?
body: <p>I have two DIVs stacked on top of eachother and enclosed by a third DIV. Then below the stacked DIVs I have a "red" DIV.</p>
  
  <p>In Chrome, the DIVs show up correctly. In IE6 and IE7, there is a whitespace between the stacked DIVs and the red DIV.  </p>
  
  <p><img src="https://i.stack.imgur.com/LOt49.png" alt="enter image description here"></p>
  
  <pre><code>&lt;style&gt;
  div.imgbox {
      position:relative;
      top:0;
      left:0;
      bottom:0;
      right:0;
      width:103px;
      height:58px;
  }
  
  div.imgthumb {
      position:relative;
      background:#000000;
      z-index:3;
      width:103px;
      height:58px;
  }
  
  div.imgplay {
      position:relative;
      top:-58;
      color:red;
      z-index:4;
  }
  
  div.imgplay a {
      width:103px;
      height:58px;
      display:block;
  }
  
  div.imgplay img {
      width:25px;
      height:25px;
  }
  &lt;/style&gt;
  
  &lt;div class="imgbox"&gt;
  &lt;div class="imgthumb"&gt;&lt;/div&gt;
  &lt;div class="imgplay"&gt;&lt;a href="#"&gt;&lt;img src="http://freetvpower.com/attachments/Image/play_up.gif" /&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="width:103px; height:58px; background-color:red;"&gt;&lt;/div&gt;
  </code></pre>