Link to home
Start Free TrialLog in
Avatar of Member_2_3703398
Member_2_3703398Flag for United Kingdom of Great Britain and Northern Ireland

asked on

document.getElementById("Id").style.top Not Working In Firefox

Hi,

I can for the life of me work out why this code works in IE and not Firefox. I am sure it is going to be something simple but I can not see the wood for the trees!

Summary: All this code does is put a message at the bottom of the browser based on the browsers active display area. I need to do this as height:100% no longer works with the new XHTML standards.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!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>Dynamic Message Footer</title>
</head>
 
<script language="javascript" type="text/javascript">
/*<![CDATA[*/
function ScreenSize()
{
	offset = 24;
	if (window.innerWidth) //if browser supports window.innerWidth
	{
		var myWidth = window.innerWidth;
		var myHeight = window.innerHeight;
		}
	else
	{
		if (document.all) //else if browser supports document.all (IE 4+)
		{
			var myWidth = (document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.clientWidth;
			var myHeight = (document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.clientHeight;
		}
	}
	document.getElementById("divMain").style.top = (myHeight - offset);
}
/*]]>*/
</script>
 
<body onload=ScreenSize() onresize=ScreenSize() style="margin: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px; height: 100%;">
	<form id="formMain" runat="server">
		<div id="divMain" style="left: 0px; position: absolute; top: 183px;">
			<table bordercolor="#ffcc00" bordercolordark="#ff9900" bordercolorlight="#ffcc99"
				border="1" width="100%" bgcolor="#cccccc" id="tableMain" cellpadding="0" cellspacing="0">
				<tr>
					<td>
						System Message:&nbsp;<asp:Label ID="LabelSystemMessage" runat="server" Text="Label"></asp:Label>
					</td>
				</tr>
			</table>
		</div>
	</form>
</body>
</html>
 
******************************************
CS file Code
******************************************
 
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
			LabelSystemMessage.Text = "Test Message Should Appear At The Bottom Of The Screen";
    }
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of TimCottee
TimCottee
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Member_2_3703398

ASKER

Hi Tim,

Nice one - I have actually spent over 2 hours looking for an answer. Next time I will just come straight to those who are in the know.

Regards,


Ted.
The divMain div should have position relative or absolute.