Position Relative in Firefox

Positioning problems in Firefox? position:relative for a display:table element

If you change display:table to display:block throughout, it renders fine as you can see here. Is there a reason you're using display:table?

firefox position absolute inside a relative container issue

Positioning of table cells is problematic. The usual solution is to leave the style of the td alone, and put a div in it which you make position:relative. Then place the content inside that div.

<td> <!-- no style at all -->
 <div style="position:relative;">
  <div style="position:absolute"> <!-- original div -->
   <contents>
  </div>
 </div>
</td>

Edit:

I don't know which effect you're after, but here's a jsFiddle demonstrating the problem: http://jsfiddle.net/ygP7k/5/

It has a table with little absolutely positioned divs in each table cell, that are supposed to align to the bottom right corners. It works in all browsers except Mozilla ones.

But here is an updated one with the extra divs as I mentioned: http://jsfiddle.net/ygP7k/7/

This works exactly the same, except that it also does the trick in Firefox.

Can you work with this? Does this answer your question?

Does Firefox support position: relative on table elements?

Easy and most proper way would be to wrap the contents of the cell in a div and add position:relative to that div.

example:

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>

Position relative not working in Firefox on table-cell elements?

The CSS spec states that:

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.

As it is undefined what do to here, Firefox rightfully choose to ignore the position on your table-cell elements, making the container the nearest anchor.

Either do not use table displays, or wrap the positioned elements again in a block element and put the position: relative there instead of the table-cell element.

Fiddle.

<style>
nav {
    position: absolute;
    display: table;
    width: 100%;
}
nav a {
    display: table-cell;
    border: 1px solid #d8d8d8;
    height: 50px;
}
nav div {
    position: relative;
}
nav a .num {
    left: 0;
    position: absolute;
}
nav a .name {
    right: 0;
    position: absolute;
}
</style>
<nav>
    <a><div><span class="num">1</span><span class="name">Words</span></div></a>
    <a><div><span class="num">2</span><span class="name">Words</span></div></a>
    <a><div><span class="num">3</span><span class="name">Words</span></div></a>
</nav>

Firefox absolute position different then Chrome

add to the absolute element this CSS because firefox need a explicit position when you use position:absolute;

left: 0;
right: 0;
top: 50%;

Absolute and Fixed Positioning bug on Firefox?

I opened your page in firefox's inspect and added this position: relative;:

#holder {
    height: 100%;
    width: 100%;
    position: relative;
}

It is working, but I didnt test back in chrome

---

Related Topics