9

I have found an issue when using absolutely positioned content within a td element. The td element is not being recognised as a positioned element so the content is being positioned relative to the body. This issue is only in FireFox and the expected layout is visible in other browsers - jsfiddle.

Doing a little digging around it seems that the issue is related to FireFox using display:table-cell as the default display type for table cells. I can resolve the issue by changing the display to block or by adding a div container to act as a positioned container to the content.

Is there any reason to avoid changing the display type of the cell to block? I would prefer to use this method rather than adding additional elements to correct an issue in one browser.

This is not the same issue as described in either div style absolute in a table cell or Why "display: table-cell" is broken when "position: absolute".

Community
  • 1
  • 1
detaylor
  • 7,112
  • 1
  • 27
  • 46
  • +1 i had the same problem a few days ago, i was forced to change what i was trying to do. – Ricardo Binns Aug 31 '11 at 11:41
  • @ric_bfa - It's more an annoyance than anything else now that I know what triggers it. I thought that the world was coming to an end when even IE7 behaved as expected and FireFox didn't. – detaylor Aug 31 '11 at 11:47
  • same here, IE = work's, other's will do better for sure, but in that case, was a big surprise. – Ricardo Binns Aug 31 '11 at 11:52
  • I've hit the same problem. What's curious though is that it works in one cell (the last in the row), but not another. FF 15.0.1 It seems to be positioning relative to the table, not body though. – Peter Bagnall Sep 20 '12 at 14:59
  • +1 having this issue right now, I will have to change the design to accommodate. This is the second display issue Ive found unique to Firefox this week, really disappointed. – Shauno Jan 09 '13 at 05:39

2 Answers2

11

If you set the display of the cell to block it will get wrapped in an anonymous table cell. The resulting CSS box tree is the same as if you created a <div> inside the cell and set all the cell's styles and attributes on that block.

This might be OK for many purposes. It'll break if the cell has a rowspan or colspan (because those don't mean anything on blocks) or if the cell has border styles that you expect to take part in border collapsing or if you have two such cells next to each other (because then the two blocks will be wrapped in a single table cell, not in two separate table cells). There are probably other situations where the behavior will be unexpected. But if you have enough control over the styles and content and aren't doing too much styling of the cell, this will work.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • Thanks, great answer. I noticed that if other cells wrapped to two lines then the cell with `display:block` didn't expand as expect, which would be explained by what you explained. – detaylor Aug 31 '11 at 19:30
  • @Boris Zbarsky: issue with the rowspan and colspan usage any fix for that? – Krish Apr 28 '12 at 08:30
  • Not that I know of, short of putting an actual block inside your cell and putting the `position:relative` style on that. Or Firefox fixing the bug involved, of course. – Boris Zbarsky Apr 28 '12 at 18:23
-2

Did you try to set the position of the TD explicitly to relative?

This should reset the positioning. Actually, it is correct behavior what you are getting, and should not be only related to TD, but you know, browsers are fun.

For details on why you need to explicitly set it, check:
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

..

Update:

This answer suggested trying an option. It's written earlier than accepted answer, and is not deleted just for archival reasons and as it is another related possibility for those coming here from search engines for slightly similar but not same problem. I appreciate your understanding.

Meligy
  • 35,654
  • 11
  • 85
  • 109
  • 1
    yes, the position of the `td` is explicitly set to `relative`. All browsers except FireFox position the content relative to the `td`, FF positions relative to `body`. `position:table-cell` seems to stop the `td` from being an offset parent. – detaylor Aug 31 '11 at 12:54
  • 2
    I have the exactly same issue. All browsers except firefox puts the "position: absolute;" content related to the closest "position: relative;" parent, but if the object has "display: table-cell;" firefox ignore it, and sets the absolute content related to body. Annoying. – miguel.camba Jun 10 '12 at 17:58