title: CSS problem with silverlight component position. Cannot set height that i want
body: <p>I want to make simple content page with silverlight with next requirments:
  Page must contains:</p>
  
  <ol>
  <li>top space for banners(html)</li>
  <li>center - silverlight component. and he will stretch to fitt page.</li>
  <li>bottom space for banners(html)</li>
  </ol>
  
  <p>Looks quite easy but i faced problem with internet explorer 8.
  Silverlight component have small size and doesnot stretch. In others browsers its works fine.</p>
  
  <p>Styles:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      html, body
      {
          height: 100%;
          overflow: auto;
      }
      body
      {
          padding: 0;
          margin: 0;
      }
      #silverlightControlHost
      {
          height: 100%;
          text-align: center;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" style="overflow: hidden;
      height: 100%; width: 100%;"&gt;
      &lt;table  frame="none" cellpadding="0" cellspacing="0" style="height: 100%; width: 100%; border:0px solid White;
          padding: 0px;"&gt;
          &lt;tr style="background-color: Red; height: 30px; width: 100%;"&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr style="background-color: Blue; height: 100%; width: 100%;"&gt;
              &lt;td&gt;
                  &lt;div id="silverlightControlHost" style="height: 100%; width: 100%; background-color: Black;"&gt;
                                &lt;object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
                      width="100%" height="100%"&gt;
                      &lt;param name="source" value="ClientBin/test.xap" /&gt;
                      &lt;param name="onError" value="onSilverlightError" /&gt;
                      &lt;param name="background" value="white" /&gt;
                      &lt;param name="minRuntimeVersion" value="4.0.50401.0" /&gt;
                      &lt;param name="autoUpgrade" value="true" /&gt;
                      &lt;a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=4.0.50401.0" style="text-decoration: none"&gt;
                          &lt;img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Получить Microsoft Silverlight"
                              style="border-style: none" /&gt;
                      &lt;/a&gt;
                  &lt;/object&gt;
                  &lt;iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
                      border: 0px"&gt;&lt;/iframe&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr style="background-color: Red; height: 30px; width: 100%;"&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Chrome(works perfect):</p>
  
  <p><img src="https://i.stack.imgur.com/1akTb.png" alt="alt text"></p>
  
  <p>IE8(not so good):</p>
  
  <p><img src="https://i.stack.imgur.com/1LNol.png" alt="alt text"></p>
  
  <p>What wrong with it? How to fix it?</p>