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