.offsetParent() returns wrong element in Firefox

[jdege@…]

.offsetParent() is supposed to return the nearest positioned element, where "positioned" means it has a css position attribute of "relative", "absolute", or "fixed".

The problem is that in Firefox "position:relative" is ignored, when applied to table elements. A <td> element is never "positioned", even if it does have a position:relative css attribute. Yet JQuery's .offsetParent() returns the <td>, and .offset() returns coordinates relative to the <td>.

In IE8, "position:relative" in a <td> is processed, .offsetParent() returns the <td> and .offset() returns coordinates relative to the <td>.

In other words, JQuery behaves the same for both browsers. But since Firefox is handling the <td> very differently, it shouldn't.

The result is that using .offset on elements within a position:relative <td> returns incorrect values, and attempts to place position:absolute elements based on those values will draw them in the wrong position.

Example:

 http://jsfiddle.net/K48r2/

Tested with:

JQuery version 1.5

JQuery version 1.4.4

Firefox 3.6.13 on Linux

Firefox 3.6.13 on Windows

IE 8.0.7600.16385 on Windows

[jitter]

You really shouldn't be trying to position: relative a td, that doesn't make much sense.

Your test case already includes the correct way to go about this (including a div with position relative inside the td).

The CSS specification say the following in the  positioning schemes section:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.