I'm trying to have two rows - in separate tables - be equal in height. The problems are that:
a) The height tag is deprecated, so it's not a viable long term solution
b) the height is not known at runtime - it's based on the content.
I have 2 examples of code, the first doesn't work, the second one does. What I'm trying to determine is why...
This doesn't work:
http://www.pdgmedia.com/ee/dom_check1.html
function sizeRows()
{
document.getElementById('r
ow1').heig
ht = document.getElementById('r
ow2').offs
etHeight;
}
This does work:
http://www.pdgmedia.com/ee/dom_check2.html
function sizeRows() {
var height;
document.getElementById('r
ow1').heig
ht = document.getElementById('r
ow2').offs
etHeight;
height = document.getElementById('r
ow2').offs
etHeight;
document.getElementById('r
ow2').heig
ht = height;
document.getElementById('r
ow1').heig
ht = height;
}
Both are called onload:
<body onload="sizeRows();">
The table code is the same in both cases
<table cellspacing="0">
<tr>
<td>
<table id="table1" cellspacing="0">
<tr id="row1">
<td>
Data in Table One
</td>
</tr>
</table></td>
<td>
<table id="table2" cellspacing="0">
<tr id="row2">
<td>
Data in Table Two<br />
Data in Table Two<br />
Data in Table Two<br />
Data in Table Two<br />
</td>
</tr>
</table></td>
</tr>
</table>
So:
1. Why does the second example work - it seems like unecessary duplication - to the untrained eye :-)
2. Nether work in Mozilla - which is a problem.
Thanks - your input is greatly appreciated.
Sean