SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    Code:
    <!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.
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  3. #3
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    //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.
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You could get rid of all that and do:
    Code:
    window.onload = function() {
      myFunction(param1, param2);
    }
    and then you can pass parameters.

  5. #5
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  6. #6
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This issue is only about a nasty IE bug, so DOMContentLoaded can be used. Other browsers will return the correct offsetHeight.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •