title: Chrome and IE display diffrence
body: <p>I have a table </p>
  
  <pre><code>&lt;tr&gt;Page header goes here&lt;/&gt;
  &lt;tr valign="top"&gt;
          &lt;td align="center" height="100%" valign="top"&gt;
              &lt;center&gt;
                  &lt;table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"&gt;
                      &lt;tbody&gt;
                          &lt;tr height="29%"&gt;
                              &lt;td height="29%"&gt;
                                   // to display the below tr in center of page
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr height="31%"&gt;
                              &lt;td bgcolor="FFFFFF" height="31%" align="center" valign="top"&gt;
                                  &lt;table width="40%" height="31%" border="0" align="center" cellpadding="0" cellspacing="0"&gt;
                                      &lt;tbody&gt;
                                          &lt;tr&gt;
                                              &lt;td width="16"&gt;
                                                  &lt;img src="@Href("~/Content/themes/base/images/top_lef.gif")" width="16" height="100%" /&gt;
                                              &lt;/td&gt;
                                              &lt;td height="16" style="background-image: url('@Url.Content("~/Content/themes/base/images/top_mid.gif")')"&gt;
                                                  &lt;img src="@Href("~/Content/themes/base/images/top_mid.gif")" width="16" height="100%" /&gt;
                                              &lt;/td&gt;
                                              &lt;td width="24"&gt;
                                                  &lt;img src="@Href("~/Content/themes/base/images/top_rig.gif")" width="24" height="100%" /&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td width="16" style="background-image: url('@Url.Content("~/Content/themes/base/images/cen_lef.gif")')"&gt;
                                                  &lt;img src="@Href("~/Content/themes/base/images/cen_lef.gif")" width="16" height="100%" /&gt;
                                              &lt;/td&gt;
                                              &lt;td bgcolor="#F7F8FB" valign="top"&gt;
                                                  &lt;div style="height: 30px;"&gt;
                                                  &lt;/div&gt;
                                                  @using (Html.BeginForm())
                                                  {
                          //login details username and password
                                                  }
                                              &lt;/td&gt;
                                              &lt;td width="24" style="background-image:url('@Url.Content("~/Content/themes/base/images/cen_rig.gif")')"&gt;
                                                  &lt;img src="@Href("~/Content/themes/base/images/cen_rig.gif")" width="24" height="100%" /&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td width="16" height="16"&gt;
                                                  &lt;img src="@Href("~/Content/themes/base/images/bot_lef.gif")" width="16" height="16" /&gt;
                                              &lt;/td&gt;
                                              &lt;td height="16" style="background-image: url('@Url.Content("~/Content/themes/base/images/bot_mid.gif")')"&gt;
                                                  &lt;img src="@Href("~/Content/themes/base/images/bot_mid.gif")" width="16" height="16" /&gt;
                                              &lt;/td&gt;
                                              &lt;td width="24" height="16"&gt;
                                                  &lt;img src="@Href("~/Content/themes/base/images/bot_rig.gif")" width="24" height="16" /&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr height="39%"&gt;
                              &lt;td height="39%"&gt;
                                   // to display the above tr in center of page
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/center&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;Page footer goes here&lt;/&gt;
  </code></pre>
  
  <p>I have added a tr and td with with 20 and 31% above and below the main body where my login controls go</p>
  
  <pre><code>@using (Html.BeginForm())
  {
  }
  </code></pre>
  
  <p>but in IE the login control is displayed in center but in chrome the login is displayed right after page header. Its seems as if the height of 29% is not considered. I tried adding <br/> but the result is not the same in both browsers.</p>
  
  <p>I was looking for a neater way to solve this. If any one can help me figure this out.</p>