title: TD height expands on dynamic content in Internet Explorer
body: <p>First; I've searched for this here and on the net, but couldn't find a working solution. I'm working on this problem literally for two days now, so I have to ask.</p>
  
  <p>I've following problem :</p>
  
  <pre><code>    &lt;table width="650px" border="1" &gt;
      &lt;tr&gt;
          &lt;td style="height :5px"&gt;stay as you are&lt;/td&gt;
          &lt;td rowspan="3" id="content"&gt;
              empty
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td style="height :5px"&gt;please dont expand&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td style="background: red;height : 100%;"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;input type="button" value="do" onclick="dontExpand()"&gt;
  &lt;script language="Javascript"&gt;
      function dontExpand() {
          var html = "";
          for (var i = 0; i &lt; 100; ++i)
              html += "lorem ipsum&lt;br&gt;";
          document.getElementById("content").innerHTML = html;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/3xSRu/" rel="nofollow">JSFiddle example of the problem, works only in Chrome</a></p>
  
  <p>The upper left and the left cell in the middle are expanding after the content dynamically gets modified by Javascript.</p>
  
  <p>I guess it does have something to do with the DocTypes, but I'm no expert.</p>
  
  <p>Is there a way of making Internet Explorer and Firefox to only expand the lower left cell; the other two cells above should stay as they are.</p>
  
  <p>Need help please.</p>