Dec 26, 2012

ASP.Net : Masterpage and HTML Table height 100% issue

Recently, In a test project I was facing a strange problem.
The webpage layout was supposed to be as follows :

 
 The layout was supposed to cover the entire browser real estate.. and should be resizable... so no hard coded heights or widths...
I wanted to render it using a HTML table approach instead of the standard Div approach.
The first hurdle was that the Height attribute of the HTML Table isn't strictly followed during rendering in the browsers, even though the Width attribute works just fine. This was due to the fact that for the height attribute the browsers also  depend on the containers height. So the oft repeated suggstion is to use a style to spread the height and weight of the 2 outermost containers of a page, i.e., the HTML and the BODY.
So I added the following style to my stylesheet:

html, body
{
height:100%;
width: 100%;
}

Followed by this in the webpage:

<table style="height: 100%px; width: 100%px;">
<tbody>
<tr>
  <td colspan=2 height=80>Header</td>
</tr>

<tbody>
<tr>
  <td  width=25% height=*>Navigation Links</td>
  <td  width=75%>Body</td>
</tr>


<tbody>
<tr>
  <td colspan=2 height=50>Footer</td>
</tr>

</tbody>
</table>

<br />


I noticed that webpages, both aspx and plain htmls, works fine with this code..
 But the moment I modify it to be used in a masterpage, all the row height formatting goes for a toss..

<table style="height: 100%px; width: 100%px;">
<tbody>
<tr>
  <td colspan=2 height=80>Header</td>
</tr>

<tbody>
<tr>
  <td  width=25% height=*>Navigation Links</td>
  <td  width=75%>
   <asp:contentplaceholder height:100="height:100" id="ContentPlaceHolderBody" runat="server />
</td>
</tr>


<tbody>
<tr>
  <td colspan=2 height=50>Footer</td>
</tr>

</tbody>
</table>

<br />
I tried all the suggested help on this matter  on the net, like 

1. Puttng the table inside a div and increasing the height of the div.
 
2. Adding a div within the   asp:contentplaceholder tags. Viz.,     


<asp:contentplaceholder height:100="height:100" id="ContentPlaceHolderBody" runat="server>
<div style="height:100%">
....
</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</asp:contentplaceholder>

    
3. Adding min-height and min width styles to the html, body and tables.
4. Setting the CellPadding and CellSpacing attributes of the table to zero 
5. I analysed the pages generated by the aspx/htmls vs that using the masterpage..
..etc..etc...

During my efforts at removing this aberration, I was trying multiple things and during one such run Voila! I struck gold!!!

The page was rendering just as expected even inside the masterpage and what did I do...?
Just deleted the Doctype tag, which is generated by default by the IDE.
FYI, this is how the usual doctype tag looks like ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I just deleted it from the top.. and that's it!!!

Hope it helps!!!

Posted by
Labels: , ,