title: Element offsetHeight always "0"
body: <p>Why I am getting Element offsetHeight "0"? even element original height is not showing</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style&gt;
  /* Added for Menu    */
  .navbar
  {
    list-style: none;`enter code here`
    padding: 0 10px;
    margin: 0;
    float: left;
    width: 980px;
    background: url(images/navbar.gif) repeat-x;
  }
  .navbar ul
  {
   list-style: none;
    padding: 0px;
    margin: 0;
    float: left;
    width: 260px;
  }
  .navbar ul li
  {
      float:left;
      position:relative;
      z-index:1000;
      margin:0px;
      padding:0px;
  }
  .navbar ul li ul
  {
      display:none;
      border:none;
      width: 260px;
      padding:0 0px 0px 0px;
  }
  .navbar ul li a
  {
       font-size: 12px;
       float:left;
       display:block;
       line-height:3.1em;
       padding:0 16px 0 16px;
       text-decoration:none;
       color:#FFF;
  }
  .navbar ul li:hover
  {
      width:auto;
  }
  .navbar ul li:hover a
  {
      background:url(images/navbar_subnav.png)  repeat-x scroll 0 0 transparent;          text-decoration:none;
  }
  .navbar ul li:hover ul
  {
      display:block;
      position:absolute;
      z-index:998;
      top:0px;
      margin-top:25px;
      left:0;
  }
  .navbar ul li:hover ul li ul
  {
      background-position: center bottombottom;
      cursor: pointer;
  }
  .navbar ul li:hover ul li a
  {
      display:block;
      line-height:1.3em;
      padding:4px 16px 4px 16px;
      border-bottom:1px solid #205284;
      border-left:1px solid #205284;
      border-right:1px solid #205284;
      border-top:1px solid #205284;
      z-index: 10000;
      width:200px;
    }
  .navbar ul li:hover ul li a:hover
  {
       background-color:#000;
       text-decoration:underline;
       color: #0099FF;
       cursor: hand;
  
  }
  .navbar ul li a:hover ul
  {
      display:block;
      position:absolute;
      z-index: 998;
      top:3.1em;
      t\op:3.0em;
      left:0;
      marg\in-top:0.1em;
  }
  .navbar ul li a:hover ul li a
   {
      display:block;
      height:1px;
      line-height:1.3em;
      padding:4px 16px 4px 16px;
      background-color:#000;
      font-weight:normal;
      color:#FFF;
  }
  .navbar ul li a:hover ul li a ul
  {
      visibility:hidden;
      height:0px;
      width:0px;
      position:absolute;
      z-index: 997;
  }
  .navbar ul li a:hover ul li a:hover
  {
      background-color:#000;
      text-decoration:underline;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="navbar"&gt;
  &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;menu item 1&lt;/a&gt;
                  &lt;ul style="top:0px" &gt;
                      &lt;li style="width:288px;"&gt;&lt;center&gt;&lt;a href="#" onmouseover="movedown()" onmouseout="stopscroll()"&gt;&lt;img src="images/menu-arrow-down.png" width="8" height="6"   alt="Down"&gt;&lt;/a&gt;&lt;/center&gt;&lt;/li&gt;
  &lt;script&gt; //&lt;![CDATA[
  var speed=2
  iens6=document.all||document.getElementById
  ns4=document.layers
  if (iens6){
  document.write('&lt;div id="container" style="position:relative;width:310px;height:165px;overflow:hidden;border:0px solid #205284"&gt;')
  document.write('&lt;div id="content" style="position:absolute;width:290px;left:0px;top:-1px;"&gt;')
  }
  //]]&gt;&lt;/script&gt;
  &lt;ilayer name="nscontainer" width="190"&gt;
  &lt;layer name="nscontent" width="290" height="155" visibility="hidden"&gt;
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu item 1  menu item 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu item 2  menu item 1&lt;/a&gt;&lt;/li&gt;                    &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu item 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu item 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu item 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu item 2&lt;/a&gt;&lt;/li&gt;              
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu item 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu item 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu &lt;/a&gt;&lt;/li&gt;
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu &lt;/a&gt;&lt;/li&gt;
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu &lt;/a&gt;&lt;/li&gt;
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu &lt;/a&gt;&lt;/li&gt;              
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu &lt;/a&gt;&lt;/li&gt;
                      &lt;li style="top:-1px;"&gt;&lt;a href="#"&gt;sub menu&lt;/a&gt;&lt;/li&gt;
  
  &lt;/layer&gt;
  &lt;/ilayer&gt;
  &lt;script&gt; //&lt;![CDATA[
  if (iens6)
  {
  document.write('&lt;/div&gt;&lt;/div&gt;')
  var crossobj=document.getElementById? document.getElementById('content') : document.all.content
  //alert("document.getElementById('content').offsetHeight :"+ document.getElementById('content').offsetHeight);
  alert("crossobj.prototype.outerHeight" + crossobj.prototype.outerHeight);
  var contentheight=crossobj.offsetHeight
  //var contentheight=document.getElementById('content').style.height;
  //alert("ContentHeight :"+contentheight);
  }
  else if (ns4)
  {
      var crossobj=document.nscontainer.document.nscontent
      var contentheight=crossobj.clip.height
  }
  function movedown(){
  if (window.moveupvar) clearTimeout(moveupvar)
  {
      if (iens6&amp;&amp;parseInt(crossobj.style.top)&gt;=(contentheight*(-1)+100))
      {
          crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
      }
      else if(ns4&amp;&amp;crossobj.top&gt;=(contentheight*(-1)+100))
      {
          crossobj.top-=speed
      }
      /*else
      {
          crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
      }*/
  }
      movedownvar=setTimeout("movedown()",20)
  }
  function moveup()
  {
      if (window.movedownvar) clearTimeout(movedownvar)
      {
          if (iens6&amp;&amp;parseInt(crossobj.style.top)&lt;=0)
          {
          crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
          }
          else if (ns4&amp;&amp;crossobj.top&lt;=0)
          {
          crossobj.top+=speed
          }
          moveupvar=setTimeout("moveup()",20)
      }
  }
  function getcontent_height()
  {
      if (iens6)
      {
          //alert("getcontent_height : "+document.getElementById("content").style.height);
          //contentheight=document.getElementById("content").style.height;
          contentheight=crossobj.offsetHeight
      }
      else if (ns4)
      {
          document.nscontainer.document.nscontent.visibility="show"
      }
  }
  window.onload=getcontent_height;
  //]]&gt;&lt;/script&gt;
                      &lt;li&gt;&lt;center&gt;&lt;a href="#" onmouseover="moveup()" onmouseout="stopscroll()"&gt;&lt;img src="images/menu-arrow-down.png" width="8" height="6" alt="Down"&gt;&lt;/a&gt; &lt;/center&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
             &lt;/ul&gt; 
        &lt;/div&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>