Firefox ignores absolute positioning in table cells

Question

I am trying to absolutely position an element inside a table cell. The TD has position:relative and the element has position:absolute .

This works great in all browsers except in Firefox where it is positioned relative to an ancestor relative container.

You can see this reproduced in this fiddle: http://jsfiddle.net/ac5CR/1/

Does anyone know if I miss some CSS setting that can fix that in Firefox?

Answer 1

the element is not a block element. add to the style display:block, you will get the needed behavior.

Answer 2

A possible work around would be to wrap the position:absolute element with another position:relative div. It requires an extra div, which is lame, but will give you the right result.

Example: http://jsfiddle.net/pTJUk/

Note -- this still won't give a completely correct result, as the position:relative div will be relative to the text position in the td -- crazy, right? Giving the cell a vertical-align:top will make it orient to 0,0, but of course this could be at the cost of other formatting your design requires.

Answer 3

It was a very old Firefox bug that have been fixed about 13 years after being reported!

You may refer to the entertaining history here: https://bugzilla.mozilla.org/show_bug.cgi?id=63895