title: overflow auto not working in ie with 100%
body: <p>This is my code.
  I want the div with class=main to overflow vertical when it exceeds the height limit i set by percentage. Overflow auto doesn't work in internet explorer. I am going crazy with the microsoft sh##t.</p>
  
  <pre><code>&lt;body&gt;
  &lt;table class="container" border="0"&gt;
  &lt;colgroup&gt;
  &lt;col width="5%"&gt;&lt;col width="5%"&gt;
  &lt;col width="5%"&gt;&lt;col width="5%"&gt;
  &lt;col width="5%"&gt;&lt;col width="5%"&gt;
  &lt;col width="5%"&gt;&lt;col width="5%"&gt;
  &lt;col width="5%"&gt;&lt;col width="5%"&gt;
  &lt;col width="5%"&gt;&lt;col width="5%"&gt;
  &lt;col width="5%"&gt;&lt;col width="5%"&gt;
  &lt;col width="5%"&gt;&lt;col width="5%"&gt;
  &lt;col width="5%"&gt;&lt;col width="5%"&gt;
  &lt;col width="5%"&gt;&lt;col width="5%"&gt;
  &lt;/colgroup&gt;
  
  &lt;tr class="header"&gt; 
      &lt;td colspan="1"&gt;&lt;/td&gt;
      &lt;td colspan="4"&gt;
          &lt;a href=""&gt;&lt;/a&gt;
      &lt;/td&gt;
      &lt;td colspan="15"&gt;
          &lt;?php include '../include/menu.php';?&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="top_gap"&gt;
      &lt;td colspan="20"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="title"&gt;
  &lt;td colspan="1"&gt;&lt;/td&gt;
  &lt;td colspan="11"&gt;&lt;/td&gt;
  &lt;td colspan="7" valign="bottom"  style="height:0;" &gt;
  &lt;div class="transparent"&gt;
          &lt;?php   DisplayTitle($option,$mysqli);  ?&gt;
          &lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  
  &lt;tr class="main"&gt;   
      &lt;td colspan="1"&gt;&lt;/td&gt;
      &lt;td colspan="11"&gt;&lt;/td&gt;
      &lt;td colspan="7" valign="top"  style="height:0;" &gt;
          &lt;div class="main"&gt;
          &lt;div class="transparent"&gt;
              &lt;?php DisplayText($option,$mysqli);?&gt;   
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="bot_gap"&gt;
      &lt;td colspan="20"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="footer" nowrap&gt;
      &lt;td colspan="20"&gt;&lt;p&gt;&lt;/p&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is the css</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  html,body {
      height: 100%;
      font-family: Century Gothic, Arial, Courier New, Sans-Serif; 
      font-size: 0.5em;
      overflow:hidden; 
  }
  table{
      border-collapse: collapse;
      table-layout: fixed;
  }
  table.container{
      width:100%;
      height: 100%;
      min-height: 100%;
  }
  tr.header{
      height:15%;
      background-color: rgba(255,255,255,0.8);
  }
  tr.title{
      height:10%;
  }
  tr.main{
      height:60%;
  }
  tr.footer{
      height:5%;
      background-color: rgba(255,255,255,0.8);
  }
  tr.top_gap{
      height:5%;
  }
  tr.bot_gap{
      height:5%;
  }
  div.main{
      width:100%;
      height:100%;
      display:block;
      position:relative;
      overflow:auto;
  }
  div.transparent{
      padding:3em;
      background-color: rgba(255,255,255,0.7);
      display:block;
  }
  </code></pre>