title: Why would jquery return 0 for an offsetHeight when firebug says it's 34?
body: <p>So I have a div whose content is generated at runtime it initially has no height associated with it.  When it's generated according to firebug and from what I can alert with js the div still has a height of 0.  However, looking at the read-only properties with firebug I can see that it has an offset height of 34.  It's this value that I need.  Hopefully it's obvious but in case it isn't, this number is variable, it's not always 38.</p>
  
  <p>So, I thought that I could just get that by doing this via jquery...</p>
  
  <pre><code>$("#parentDiv").attr('offsetHeight');
  </code></pre>
  
  <p>or this with straight js...</p>
  
  <pre><code>document.getElementById("parentDiv").offsetHeight;
  </code></pre>
  
  <p>But all that is returned is 0.  Does it have anything to do with the fact that offset height is a read-only property in this instance?  How can I get this height?  I mean firebug is figuring it out somehow so it seems like I should be able to.  </p>
  
  <p><b>Edit:</b>
  Here's a sample of what the div looks like right now...</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"&gt;&lt;META http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  
  &lt;HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;BODY&gt;&lt;FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post"&gt;&lt;DIV id="container"&gt;
  
  &lt;DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px"&gt;
      &lt;DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center"&gt;
      &lt;/DIV&gt;
      &lt;DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center"&gt;
          &lt;DIV id="ctl00_BodyContentPlaceHolder_Navigation1" style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal"&gt;
              &lt;IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" /&gt; 
          &lt;/DIV&gt;
          &lt;DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl"&gt;
              &lt;IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="..." width="16" /&gt;
              &lt;IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="..." width="16" /&gt;
          &lt;/DIV&gt;
      &lt;/DIV&gt;
  &lt;/DIV&gt;
  
  &lt;/DIV&gt;&lt;/FORM&gt;&lt;/BODY&gt;&lt;/HTML&gt;
  </code></pre>
  
  <p>This code is being generated by a control in a separate library.  So here's the actual code creating it in my .aspx page.</p>
  
  <pre><code>&lt;blah:blahControl ID="control" runat="server" /&gt;
  </code></pre>
  
  <p>Ok, it's edited slightly but thats a whole lot more HTML than I had before.  The div I was referring to as "parentDiv" before is called "ctl00_BodyContentPlaceHolder_UserControl" up there.  That code includes the div in question, it's sibling, parent, grandparent and children.  It's almost a direct copy from firebug.</p>
  
  <p><b>Update:</b>
  I should have mentioned this is being done in IE 7.  It seemed to work fine one time in Firefox, but it's returning 0 now.  Does this provide any new insights of possible work-arounds or anything?</p>
  
  <p>... You all must think I'm nuts.</p>
  
  <p><b>Update:</b>
  Some styling...</p>
  
  <pre><code>.TransparentBg 
  {
      background-color: white;
      filter:alpha(opacity=50);
      -moz-opacity:0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
  }
  
  .Foreground
  {
      position: absolute;
      top: 0px;
  }
  </code></pre>