Correctly determine height of div with dynamic content

[djr33]

I'm working on a site that is too complex to link to because it requires user accounts and the issue only shows up sometimes, though if someone would like to try it out I can PM you the information.
But for the moment I'm just looking for general information anyway.


Let's assume this is my function (irrelevant aspects removed):

setdimensions(mydiv.offsetWidth,mydiv.offsetHeight);


For some completely unexplained reason, it is determining the height inconsistently and causing, indirectly, the user to be able to drag the div beyond the border of a div. (That math is handled elsewhere and works.)
This is only a problem for the height since that depends on the content inside the div. The width is standardized for all divs.

Do you have any idea what might be causing this? Is offsetHeight not a good property?

I'm just looking for ideas, since this is way beyond my range of Javascript.


The reason I'm so confused is that it is apparently randomly interpreting it incorrectly in some cases. These two divs appear identical to me (except img src, IDs, and top/left positions), yet one (the first) can move beyond the div that should be the boundary and the other cannot (the second).


<div style="left: 595px; top: 349px;" class="unit edit link" id="iu4">
<a href="#" onclick="deliu(4);return false;">
<img src="/shared/images/close.gif" alt="Clear" class="clearunit">
</a>
<img src="/userimgs/1e0999d838c055fb451b12b2c646fc094.jpg" alt="Carnegie Hall">
<p class="title">Carnegie Hall</p>
</div>


<div style="left: 458px; top: 349px;" class="unit edit link" id="iu11">
<a href="#" onclick="deliu(11);return false;">
<img src="/shared/images/close.gif" alt="Clear" class="clearunit">
</a>
<img src="/userimgs/1d7b5b2f1f00248cfd18e380411dba2fe.jpg" alt="Cedar Tavern">
<p class="title">Cedar Tavern</p>
</div>

Note that all of these divs are generated dynamically (in Javascript) and the images and/or text may take up more or less space. All images are jpgs dynamically generated by PHP uploads. In other words, everything should be consistent except the size of elements.
However, as those two examples above represent, even similarly sized divs may operate differently. And I haven't found a pattern related to size (or anything else). In fact, some short divs and some long divs (though often it's the long divs) have this problem.

But again, if there's just another way around this instead of offsetHeight, that is the simplest answer.

Thanks!

[djr33]

I discovered more information and a workaround (not exactly a solution).

I found that clearing the cache made the problem worse and that the margin of error in height calculation corresponded to the height of the image.

This lead me to check what happens when the height of the image is explicitly included in the img tag. Either by the height/width attributes or style's height/width properties, a specified height fixes the problem.

In order words, Javascript's offsetHeight cannot determine the height (or width) of an image without either 1) explicit information in the tag; or 2) having the image already in the cache.


My workaround involves storing the image's height and width in the database and printing those explicitly into all of the image tags. This is required because the images vary in size. This isn't pretty or simple, but it works.

It doesn't solve the original problem though: is there an accurate way for JS to determine an element's height?