Why doesnt jQuery offset() work with table based layout in IE?
<p>I am having some quirky problems with IE7+ (yes big surprise) when trying to find the position of an element in order to render a translucent div on top of that element.</p>

<p>jQuery's offset() and position() functions work in the documented and expected ways when using DIVs or other layout markup.  The problem arises when using table based layout.</p>

<p>Example:</p>

<pre><code>&lt;html&gt;
    &lt;body style="margin: 0px;"&gt;

    &lt;input type="button" onclick="addlayer('tobeOverlayed')" value="Add Layer" /&gt;
    &lt;div style='position: absolute; left: 40px; top: 30px;'&gt;
      &lt;table cellpadding="0" cellspacing="0" style="position: relative; top:15px;"&gt;
        &lt;tr&gt;
          &lt;td style="width: 100px;' /&gt;
            &lt;td style="width: 400px;'&gt;

              &lt;table cellpadding="0" cellspacing="0" &gt;
                &lt;tr style='height: 70px;"&gt;
                  &lt;td style='width: 5px;'&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr style='height: 70px;"&gt;
                  &lt;td style='width: 5px;'&gt;&lt;/td&gt;
                  &lt;td&gt;
                    &lt;div id="tobeOverlayed" style="background: Red;"&gt;Render a translucent layer over me&lt;/div&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;               
              &lt;/table&gt;
            &lt;/td&gt;
         &lt;/tr&gt;
       &lt;/table&gt;
    &lt;/div&gt;    

    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>When I try to position a layer on top of the div with id=tobeOverlayed --- neither offset or position are giving me the correct top/left values.</p>

<p>The layer that I am positioning has to end up as a sibiling of the element it is overlayed on top of (if the element's container is scrolled, I want my overlay to be scrolled with it).</p>

<p>Example markup after adding my overlay:</p>

<pre><code>&lt;html&gt;
    &lt;body style="margin: 0px;"&gt;

    &lt;input type="button" onclick="addlayer('tobeOverlayed')" value="Add Layer" /&gt;
    &lt;div style='position: absolute; left: 40px; top: 30px;'&gt;
      &lt;table cellpadding="0" cellspacing="0" style="position: relative; top:15px;"&gt;
        &lt;tr&gt;
          &lt;td style="width: 100px;' /&gt;
          &lt;td style="width: 400px;'&gt;

            &lt;table cellpadding="0" cellspacing="0" &gt;
              &lt;tr style='height: 70px;"&gt;
                &lt;td style='width: 5px;'&gt;&lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr style='height: 70px;"&gt;
                &lt;td style='width: 5px;'&gt;&lt;/td&gt;
                &lt;td&gt;
                  &lt;div id="tobeOverlayed" style="background: Red;"&gt;Render a translucent layer over me&lt;/div&gt;
                  &lt;div class="Overlay" style="position: absolute; top: 0px; left; 40px" /&gt;               
                &lt;/td&gt;
              &lt;/tr&gt;
             &lt;/table&gt;
           &lt;/td&gt;
         &lt;/tr&gt;
       &lt;/table&gt;
    &lt;/div&gt;    

    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The top/left settings are an example - dont take it literally.</p>

<p>In this example calling:</p>

<pre><code>var offsetPos = $("#tobeOverlayed").offset();
</code></pre>

<p>gives me coordinates of left,top = ( 40, 122 )</p>

<pre><code>var pos = $("#tobeOverlayed").position();
</code></pre>

<p>gives me coordinates of left,top = ( 0, 7 )</p>

<p>Neither of these is the right top,left values to use for my overlay --- which isnt completely unexpected... offset() gives you the coordinates relative to the document - which sense I'm inserting my element as a sibling wouldnt be the right to use.</p>

<p>However position() - should give the right coordinates to use, shouldn't it?  0,7 does not position the overlay correctly - maybe this is an IE bug due to the container being a table cell --- but the overlay gets positioned relative to the table element - not the table cell.</p>

<p>Is this a known quirk of IE?  Or is my understanding wrong of position and offset?</p>
