26

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?

Variant
  • 17,279
  • 4
  • 40
  • 65
  • In firefox the green `indicator` div is located in the first row and it should be in the 3rd row as in chrome and IE. – Variant Jan 09 '12 at 14:15
  • Looks like you're using [tables for layout](http://www.hotdesign.com/seybold/everything.html). Are you? – Šime Vidas Jan 09 '12 at 14:22
  • unfortunalty I do. I am using jqGrid which uses tables internally. I have to position an indicator inside a cell. – Variant Jan 09 '12 at 14:25

3 Answers3

21

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

banners
  • 444
  • 3
  • 4
  • 1
    It indeed works now although the TD stops behaving like a table cell... I have to specify explicit height for the cell to align with the rest of the cells. – Variant Jan 09 '12 at 14:22
  • 2
    To expand, the td element's default display value is typically "table-cell" (and given Firefox's support for the "table-cell" display value, this is likely what it defaults to). – Shauna Jan 09 '12 at 14:23
  • Just ran into this issue - does that mean you can't `positon: absolute` inside a table layout? – George Mauer Sep 26 '13 at 19:40
  • 3
    In fact, this is a [Firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=63895), which has already been fixed (since version 31, Firefox will position absolute descendants relative to table cells just like other browsers do). – Ilya Streltsyn Jul 08 '14 at 09:10
15

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.

David Woods
  • 648
  • 7
  • 8
1

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

Ashraf Sabry
  • 3,081
  • 3
  • 32
  • 29