Offsetheight displays 0 in IE

i’ve got a .net page with a table sitting in it that has no specified height.
I want to be able to grab the height of a specific table (ID=“printIntro”). Firefox spits out a number, but IE regardless of version spits out a big fat 0.

from what i understood, IE should be able to understand offsetheight, no?
here’s a snippet of a VERY simplified version of what .net generates, as you will see IE will return 0:


<!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>
<title></title>
<script type="text/javascript">
function changetablewidths(id) {

    if(!document.getElementById || !document.getElementById(id)) return;

    var myTable = document.getElementById(id);
    var tableheight = parseInt(myTable.offsetHeight);
    alert(tableheight)

}</script>
</head>
<body >
<form name="aspnetForm" method="post" action="history2.aspx?print=true" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm" style="display: inline">
  <table style="width: 100%; height: 100%;" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td  valign="top" style="height:100%">
        <table style="width: 840px; height: 100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="greyBG" style="width: 798px; height: 100%" align="left" valign="top">
              <table style="width: 798px" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="left" valign="top">
                    <table style="width: 798px" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td style="width: 778px;" align="left" valign="top">
                          <table style="width: 778px;" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <td align="left" valign="top">
                                <table style="width: 778px;" border="0" cellspacing="0" cellpadding="0">
                                  <tr align="left" valign="top">
                                    <td style="width: 440px;">
                                      <table style="width: 440" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                          <td align="left" valign="top" style="width: 15px;">&nbsp; </td>
                                          <td align="left" valign="top" style="width: 408px">
                                            <!--ControlPlace Holder Starts-->
                                            <table border="0" cellpadding="0" cellspacing="0" style="width:408px;">
                                              <tr>
                                                <td align="left" valign="top"><img src="http://localhost:50007/www/images/trans.gif" alt="" style="height: 15px; width:1px" /></td>
                                              </tr>
                                              <tr>
                                                <td>
                                                  <table id="printIntro" style="width: 516px;" border="0" align="center" cellpadding="0" cellspacing="0" class="container">
                                                    <tr>
                                                      <td class="header">
                                                        <p>Historical Profile </p>
                                                      </td>
                                                    </tr>
                                                    <tr>
                                                      <td class="intro_mid"> Join us for a trip back in time as we explore our roots and milestones from the beginning in 1971 to the present.</td>
                                                    </tr>
                                                    <tr>
                                                      <td class="introfooter">&nbsp;</td>
                                                    </tr>
                                                  </table>
                                                  <table style="width: 516px;" border="0" align="center" cellpadding="0" cellspacing="0" class="container">
                                                    <tr>
                                                      <td class="header">
                                                        <p>1990</p>
                                                      </td>
                                                    </tr>
                                                    <tr>
                                                      <td class="middle">
                                                        <div class="fun"> <img src="../flashobjects/timelinepics/1990.jpg"> </img> </div>
                                                        <div class="bodytxt">
                                                          <h1>Milestones</h1>
                                                          <ul>
                                                            <li> 120,000 clients.</li>
                                                            <li>, with more than 7,000 clients on the new service, which provides the payment of payroll taxes and automatic filing of payroll tax returns.</li>
                                                          </ul>
                                                        </div>
                                                      </td>
                                                    </tr>
                                                    <tr>
                                                      <td class="footer"></td>
                                                    </tr>
                                                  </table>
                                                  <table style="width: 516px;" border="0" align="center" cellpadding="0" cellspacing="0" class="container">
                                                    <tr>
                                                      <td class="header">
                                                        <p>1991</p>
                                                      </td>
                                                    </tr>
                                                    <tr>
                                                      <td class="middle">
                                                        <div class="fun"> <img src="../flashobjects/timelinepics/1991.jpg"> </img> </div>
                                                        <div class="bodytxt">
                                                          <h1>Milestones</h1>
                                                          <ul>
                                                            <li>its 20th anniversary.</li>
                                                          </ul>
                                                          <h1>New Products and Services</h1>
                                                          <ul>
                                                            <li>Services, its fourth new division in five years, offering products and services including employee handbooks, insurance, employee evaluations and testing tools, and section 125 plans.</li>
                                                          </ul>
                                                          <h1>Awards and Accolades</h1>
                                                          <ul>
                                                            <li><b>"200 Best Small Companies in America," </b> <i>Forbes</i> magazine.</li>
                                                          </ul>
                                                        </div>
                                                      </td>
                                                    </tr>
                                                    <tr>
                                                      <td class="footer"></td>
                                                    </tr>
                                                  </table>
                                                </td>
                                              </tr>
                                              <tr>
                                                <td align="left" valign="top" class="contentnorblue"><img src="http://localhost:50007/www/images/trans.gif" alt="" style="width: 17px; height:1px" /></td>
                                              </tr>
                                              <tr>
                                                <td align="left" valign="top" >&nbsp;</td>
                                              </tr>
                                            </table>
                                            <script type="text/javascript">changetablewidths('printIntro')</script>
                                            <!--ControlPlace Holder Ends-->
                                          </td>
                                          <td align="right" valign="top" style="width: 17px;">&nbsp; </td>
                                        </tr>
                                        <tr>
                                          <td>&nbsp; </td>
                                          <td align="center" class="smallcontentboldb"> </td>
                                          <td>&nbsp; </td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
            <td style="width: 21px; height: 100%" align="left" valign="top"> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</form>
</body>
</html>


please don’t comment about the horrible use of tables, we are working on transitioning to a css driven site…but for now this is what i’m working with.

thanks for the help.

IE will returns 0 offsetHeight since you call the script before the table has rendered. It will return a real value once the table has properly loaded.

Crap huh?

yeah, i suppose i could accept that if other browsers failed too, but dang you IE!

i did find a work around that waits for the page to load before the script execution.


//create onDomReady Event
window.onDomReady = DomReady;

//Setup the event
function DomReady(fn)
{
	//W3C
	if(document.addEventListener)
	{
		document.addEventListener("DOMContentLoaded", fn, false);
	}
	//IE
	else
	{
		document.onreadystatechange = function(){readyState(fn)}
	}
}

//IE execute function
function readyState(fn)
{
	//dom is ready for interaction
	if(document.readyState == "complete")
	{
		fn();
	}
}

//execute as soon as DOM is loaded
window.onDomReady(myFunction);

the slight limitation is the myFunction can’t pass any parameters…but oh well.

You could get rid of all that and do:

window.onload = function() {
  myFunction(param1, param2);
}

and then you can pass parameters.

Raffles, window.onload also waits for images to load. onDomReady triggers before, once the DOM tree has finished loading.

I ended up adding an ugly hack myself when I fixed this. Not using any of the above method. Basically waiting for the value to not be 0. That triggered before the above solutions. Ugly, but buggy ugly browsers require ugly solutions.

And oh yeah, this is still not fixed in IE 7. Maybe version 8… or maybe… zzz…

yeah, the page code is very VERY convoluted (tables anyone?) and has a lot of other JS going on, so the lag would have been crazy, and the code to execute didn’t need to wait for images.

But, in the future depending on the situation i will definitely use the nice simple raffles code.

anyway, problem solved. thanks sitepoint!

Yes, the disadvantage of window.onload is that it waits for everything before firing, so it’s no good for something you are changing visually without user interaction (normally to make up for something CSS or IE can’t do). I wasn’t really paying attention to what you’re actually doing with this. What you can do, is try to use DOMContentLoaded solutions and fall back to window.onload if it’s not supported (though all the major browsers support something of the sort). I like this one.

i am sure you can find a small code on the internet to prevent this
the trick is it works in different browsers in different ways.

i lost the code somehow but it was easy to get.

This issue is only about a nasty IE bug, so DOMContentLoaded can be used. Other browsers will return the correct offsetHeight.