asked on

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();">

<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 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> </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?

GoofyDawg

do an alert(obj.offsetHeight);

Does that give you a value at all?

sarah_newcom

ASKER

alert(obj.offsetHeight) gives me a value of 64. Should I be changing that property intead of style.height? Thanks!

sarah_newcom

ASKER

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.

ASKER CERTIFIED SOLUTION

GoofyDawg

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial