style.height not changing the control size in a content page

I have changed an asp.net 2.0 web page to use a masterfilepage, and previous javascript is no longer working.  Here is my masterpagefile:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MyMaster.master.cs" Inherits="WebProject.Mymaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <link href="StyleSheet/MyStyle.css" type="text/css" rel="stylesheet"/>
      <script language="javascript" src="Libraries/setResolution.js" type="text/javascript"></script>
</head>
<body topmargin="0" leftmargin="0" onload="setHeight();">
<!--Custom control here/-->
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Here is my content page:

<%@ Page language="c#" Codebehind="MyPage.aspx.cs" AutoEventWireup="True" MasterPageFile="~/MyMaster.Master" Inherits="WebProject.MyPage" %>
<asp:Content runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
                  <asp:Table id="tblBody" CellPadding="0" CellSpacing="0" Width="90%" CssClass="page_body"
                        HorizontalAlign="Center" Runat="server">
                        <asp:TableRow>
                              <asp:TableCell VerticalAlign="Top">
                                    <!-- <asp:Table for all the content starts here -->
                                    <asp:Table id="ContentTable" CssClass="page_link" cellspacing="0" cellpadding="0" width="100%" Runat="server" height="100%">
                                          <asp:TableRow ID="Row1" Runat="server" >
                                                <asp:TableCell HorizontalAlign="center"  VerticalAlign="Middle" height="15%" >
                                                      <asp:LinkButton ID="Link1" Runat="server">TestLink</asp:LinkButton>
                                                </asp:TableCell>
                                          </asp:TableRow>                   
                                          <asp:TableRow ID="Row2" Runat="server" >
                                                <asp:TableCell HorizontalAlign="center"  VerticalAlign="Middle" height="15%">
                                                      <asp:LinkButton ID="Linke2" Runat="server">Test2</asp:LinkButton>
                                                </asp:TableCell>
                                          </asp:TableRow>
                                          <asp:TableRow ID="Row3" Runat="server" >
                                                <asp:TableCell HorizontalAlign="center"  VerticalAlign="Middle" height="15%">
                                                      <asp:LinkButton ID="Link3" Runat="server">Test3</asp:LinkButton>
                                                </asp:TableCell>
                                          </asp:TableRow>
                                                                                    <asp:TableRow height="10%">
                                                <asp:TableCell>&nbsp;</asp:TableCell>
                                          </asp:TableRow>
                                    </asp:Table>
                              </asp:TableCell>
                        </asp:TableRow>
                  </asp:Table>
</asp:Content>

Here is my stylesheet:
.page_body
{
      background-color:#ffffff;
      border-left: 2px solid;
      border-right: 2px solid;
      border-top: 2px solid;
      border-bottom: 2px solid;
      border-color:navy;
      margin-left: 25px;
      margin-right:25px;
}
/* End  */
      
/* Start of Style for Page Links */      
.page_link{      
         font-family: Arial;      
         font-size: 12px;      
         Color:#3161A9;      
         font-weight: Normal;
         }
        
   .page_link a:link{color:#3161A9; font-family: Arial; font-size:12px; text-decoration: none;}
   .page_link a:visited{color:#800080;font-family: Arial; font-size:12px;text-decoration: none;}
   .page_link a:active{color:#0000FF;font-family: Arial; font-size:12px; text-decoration: none; }
   .page_link a:hover{color:#0000ff;font-family:Arial;font-size:12px; text-decoration: underline;}

And finally, here is my javascript:
function setHeight()
{
  var y=screen.height;
  var obj = document.getElementById('ctl00_ContentPlaceHolder1_tblBody');

  if(obj==null)
  {
  //Do Nothing
  }
  else
  {
      obj.style.height=(y==768?'64%':'50%');
  }
}

Before I added the master page, tblBody expanded to the correct size on the onload event.  However, now the table does not change height.  I've stepped through the javascript, and obj is assigned to the correct element.  Am I trying to go about this the wrong way?
sarah_newcomAsked:
Who is Participating?
 
GoofyDawgConnect With a Mentor Commented:
Cool. Then you should just cancel this question.
0
 
GoofyDawgCommented:
do an alert(obj.offsetHeight);

Does that give you a value at all?
0
 
sarah_newcomAuthor Commented:
alert(obj.offsetHeight) gives me a value of 64.  Should I be changing that property intead of style.height?  Thanks!
0
 
sarah_newcomAuthor Commented:
FYI.. found a workaround at least.  For some reason, the percentage did modify the control height, just not the way I wanted.  I changed the code to calculate the number of px the control should be and everything is working again.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.