row.offsetHeight of a table row different in FireFox?

In the following code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<style>
tr
{
    background-color:red;
    font-size:10pt;
}
</style>
<script language="javascript">
function onLoad()
{
    var div=document.getElementById("divCont");
   
    /*****************************/
    var NumOfRows = 1;
    /*****************************/
   
    var s = new Array();
    s.push("<table border=1 cellspacing=0 cellpadding=0>");
    for(var i=0; i<NumOfRows; i++)
    {
      s.push("<tr id='row_" + i + "'>");
      s.push("  <td>Row " + i);
      s.push("  </td>");
      s.push("<tr>");
    }
    s.push("</table>");
    div.innerHTML = s.join("\n");
   
    var row = document.getElementById("row_0");
    NumOfRows = (div.offsetHeight / row.offsetHeight);
   
    var s = new Array();
    s.push("<table border=1>");
    for(var i=0; i<NumOfRows; i++)
    {
      s.push("<tr id='row_" + i + "'>");
      s.push("  <td>Row " + i);
      s.push("  </td>");
      s.push("<tr>");
    }
    s.push("</table>");
    div.innerHTML = s.join("\n");
}
</script>
</head>
<body onload="onLoad();">
<div id="divCont" style="position:absolute;left:10px;top:10px;width:400px;height:200px;border:solid 1px blue;">
</div>
</body>
</html>

I've create a table with the number of rows depending on the height of the "divCont".
In IE and Opera it works perfectly and the table keeps inside the div exactly, but in FireFox the rows overflow the div.

What can be happening and how can I fix it for FireFox?

Thanks
mak730Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZylochCommented:
First of all, when you grab the height of the row, I would recommend getting the entire height of the table, especially since you add borders to the table. Thus, set an ID on the table and use getElementById() on that instead of row_0.

To fix for Firefox, make sure to set cellpadding and cellspacing in your second table to zero as well.
0
Pravin AsarPrincipal Systems EngineerCommented:
No points necessary.........



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<style>
tr
{
    background-color:red;
    font-size:10pt;
}
</style>
<script language="javascript">
function onLoad()
{
    var div=document.getElementById("divCont");
   
    /*****************************/
    var NumOfRows = 1;
    /*****************************/
   
    var s = new Array();
    s.push("<table border=1 cellspacing=0 cellpadding=0>");
    for(var i=0; i<NumOfRows; i++)
    {
      s.push("<tr id='row_" + i + "'>");
      s.push("  <td>Row " + i);
      s.push("  </td>");
      s.push("<tr>");
    }
    s.push("</table>");
    div.innerHTML = s.join("\n");
   
    var row = document.getElementById("row_0");
    NumOfRows = parseInt (parseInt(div.offsetHeight) / parseInt(row.offsetHeight));
   
    var s = new Array();

    ////////// TAKE CARE HERE...

    s.push("<table border=1 border=1 cellspacing=0 cellpadding=0>");
    for(var i=0; i<NumOfRows; i++)
    {
      s.push("<tr id='row_" + i + "'>");
      s.push("  <td>Row " + i);
      s.push("  </td>");
      s.push("<tr>");
    }
    s.push("</table>");
    div.innerHTML = s.join("\n");
}
</script>
</head>
<body onload="onLoad();">
<div id="divCont" style="position:absolute;left:10px;top:10px; width:auto; height:200px; border:solid 1px blue;">
</div>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.