Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

“document.getElementById();” not working in Firefox!

Status
Not open for further replies.

langoo

Programmer
Jun 22, 2008
8
IL
Hi Folks,

I can’t get “document.getElementById();” to work properly in firefox!

Essentially, I am trying to make the size of a DIV the same size as another DIV.
I want DIV#1 = DIV#2, because DIV#2 expands dynamically ….

My code works fine in I.E but not in firefox:

This is my function:

function setheight () {
var myContainerDiv = document.getElementById('canvas');
// var myContainerDivHeight = myContainerDiv.offsetHeight + "px";
var myContainerDivHeight = myContainerDiv.clientHeight;
var myLeftNavDiv = document.getElementById('left');
myLeftNavDiv.style.height = myContainerDivHeight;
alert(myContainerDivHeight);
}

Note: I have used both methods “clientHeight” and “offsetHeight” both casue the same problem.

In I.E my alert gives me 1303 (pixels) and thus adjust the height accordingly, however in Firefox I get 0 pixels… and does not adjust the height accordingly.

How can I get the proper DIV height using firefox?

(By the way, if anyone knows how to do this using just CSS, it would be preferable anyways… I would have thought that height = 100% would have done the trick…)

If you want to check it out this is my stylesheet and HTML:

<style>

#canvas
{
width: 1000px;
height: 100%;
text-align: left;
padding:0px 0px 0px 0px;
margin: 0 auto;
background-color:Aqua;
}

#left
{
float:left;
width:250px;
height: 100%;
background-image: url('ColumnBG2.png');
background-repeat:repeat;

}

#header
{
float:right;
width:750px;
height:auto;
background-color:Yellow;
}
#main
{
float: right;
width:750px;
height:auto;
background-color: Red;
}
#footer
{
float: right;
width: 750px;
height: 100%;
background-color:Maroon
}

</style>


<body background="SiteBG.png" onload="setheight();" >

<div id = "canvas">
<div id = "left">
// My Left content – I want to expand!
</div>

<div id="header">
// Header Content:
</div>

<div id="main">
// Main, dynamically expanding content
</div>

<div id="footer">
// footer content
</div>

</div>

</body>

Thanks for any insight,
- Joel
 
Code:
<html>
	<head>
		<style>
		#canvas {
			width: 1000px;
			height: 100%;
			text-align: left;
			padding:0px 0px 0px 0px;
			margin: 0 auto;
			background-color:Aqua;
		}
		#left {
			float:left;
			width:250px;
			height: 100%;
			background-image: url('ColumnBG2.png');
			background-repeat:repeat;
			
		}
		#header {
			float:right;
			width:750px;
			height:auto;
			background-color:Yellow;
		}
		#main {
		float: right;
		width:750px;
		height:auto;
		background-color: Red;
		}
		#footer {
			float: right;
			width: 750px;
			height: 100%;
			background-color:Maroon
		}
		</style>
		<script language="JavaScript">
			function setheight () {
				var myContainerDiv = document.getElementById('canvas');
				var myContainerDivHeight = myContainerDiv.clientHeight;
				var myLeftNavDiv = document.getElementById('left');
				myLeftNavDiv.style.height = myContainerDivHeight;
				alert(myContainerDivHeight);
				alert(myLeftNavDiv.style.height);
			}
		</script>
	</head>
	<body background="SiteBG.png" onload="setheight();" >
		<div id = "canvas">
			<div id = "left">
				// My Left content – I want to expand!
			</div>
			<div id="header">
				// Header Content:
			</div>
			<div id="main">
				// Main, dynamically expanding content
			</div>
			<div id="footer">
			// footer content
			</div>
		</div>
	</body>
</html>
with the above code..which is all yours..

the first alert box gives me '746'
and the second gives me '746px'

both in firefox and explorer...
what is the problem exactly?



``The wise man doesn't give the right answers,
he poses the right questions.''
TIMTOWTDI
 
Hi, Thanks for your reply,

Well that's odd, in firefox, I was getting 0 for my result.
I have tested the new reformated code you posted and I do get some values back - 870 & 870px. Which I din't get before...
Why would that be?...

To be continued...

Thanks,
- Joel
 
i wouldn't know why..maybe some missing tags that firefox expects...maybe magic! :)

well if everything works ok...then no harm done...keep on javascripting...


``The wise man doesn't give the right answers,
he poses the right questions.''
TIMTOWTDI
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top