title: CSS table height overflowing container div in IE8
body: <p>I'm having an issue where I have a dynamically built table inside of a parent div.</p>
  
  <p>I have set the parent div with a max-height but the if the table is larger then the div the table completely ignores the max-height of it's parent div and overflows over the page</p>
  
  <p>The following is the CSS for the table:</p>
  
  <pre><code>#navigator_table
  {   
  table-layout: fixed;
  font-family: Arial;
  font-size: 10px;
  margin: 5px 5px;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #000;
  Width: 95%;
  }
  </code></pre>
  
  <p>The following is the CSS for the div:</p>
  
  <pre><code>.navigator_overflow
  {
  max-width: 650px;
  height: expression(this.scrollHeight &gt; 599 ? "600px" : "auto");
  max-height: 600px;
  overflow: scroll;
     }
  </code></pre>
  
  <p>I have tried any adding the following to no result in both the div and the table:    </p>
  
  <pre><code>overflow: hidden, auto, scroll
  clear: both; 
  float: left;
  display: block;
  </code></pre>
  
  <p>overflow hidden just removed the scroll bars, but the table still went outside the bounds of the page.</p>
  
  <p>I have tried adding: </p>
  
  <pre><code>height: expression(this.scrollHeight &gt; 599 ? "600px" : "auto");
  /* supposed to be the workaround for max-height in IE*/
  </code></pre>
  
  <p>to the table</p>
  
  <p>max-height works great in Firefox and Chrome. It's just IE </p>
  
  <p>I am using the following doctype:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;
  </code></pre>
  
  <p>Any help would be appreciated on this.</p>