Positioning Context on Table-Cell Element in Firefox

Positioning context on table-cell element in Firefox

A table-cell is meant to be inside a table, so:

See this working Fiddle!

div {
    display: table;      /* this line */
    line-height: 28px;
    padding: 0 20px;
    background: #ddd;
    position: relative;
}

Note:
Since you don't have a table in there, set it.

You can see this quirksmode for the The display declaration.

---

EDITED

From the W3C recommendation :: Tables it reads

The computed values of properties 'position', 'float', 'margin-*', 'top', 'right', 'bottom', and 'left' on the table element are used on the table wrapper box and not the table box; all other values of non-inheritable properties are used on the table box and not the table wrapper box. (Where the table element's values are not used on the table and table wrapper boxes, the initial values are used instead.)

This is not a bug, is more like a status-bydesign thing! Please see this!

---

EDITED

To include the work around placed on the comment as requested on the question:

So, is this a bug? If so, is there anyway to work around it?

Possible work around are:

Wrap the element with a div as position:relative; See Fiddle!

#wrapper {
    position: relative;
}

Note: most practical solution!

Wrap the inner elements with a div as position:relative; See Fiddle!

#innerWrapper {
    position: relative;
}

Note: requires some definitions from the original element to be declared on the innerWrapper!

Firefox position absolute in table-cell

Firefox has a problem with relative/absolute positioning whenever tables or display: table-cell is involved. This has been reported to the Firefox devs but so far no fix has been implemented. Bug report 1 - Bug Report 2

Because of this, the width: 100% on your td:hover::after is seen relative to the body instead of the cell.

You can fix this by setting your td to display: inline-block and specifying a width.

Fix can be seen here: http://jsfiddle.net/EwUnt/27/

CSS absolute positioned object inside table-cell displayed object in Firefox

Firefox has issues with absolute positioning and display:table-cell - see this

You need to wrap the element in a block element with relative positioning and then it will work:

Example

Firefox can't handle absolute positioning within 'display:table-cell'?

By adding an extra inner wrapper and using some JS you can achieve this: http://jsfiddle.net/David_Knowles/wyTga/

//  This clean plugin layout provieds typical jQuery syntax such as $("element").plugin() or $.plugin("element")
(function($) {
    if (!$.equalHeights) {  //  checks to make sure this namespace is not already used in jQuery object (its not!)
        $.extend({  //  allows you to add methods to jQuery Object to be called, such as $.ajax
            equalHeights: function(elm) {   //  our function to be added
                //  the following simply checks to see if a jQuery Object is being passed in, or an element tag name/id/class
                if (typeof elm === "string") elm = $(elm);  //  now convert possible string to object
                //  the following maps all of our elements passed in and returns an array of their heights,
                //  then by using the math max method, we grab the biggest one
                var maxHeight = Math.max.apply(null, $(".inner").map(function () { return $(this).height(); }).get());
                //  the following maintains with jQuery's "chainability"
                return elm.each(function(index){ $(this).height(maxHeight); });
            }
        });
        $.fn.extend({   //  here we add element object methods, such as $("element").toggle
            equalHeights: function() {
                //  simply return our already made function, maintaining chainability
                return $.equalHeights($(this));
            }
        });
    }
})(jQuery);

$(function(){ 
    $(".inner").equalHeights();
    //  force resize on window height change if needed
    $(window).resize(function(e) { $(".inner").equalHeights(); });
});

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>

Firefox css table cells don't respond like other browsers with position:absolute

Your basic issue is that specifying position: relative on a table cell in Gecko does not make the cell a containing block for absolutely positioned kids. See https://bugzilla.mozilla.org/show_bug.cgi?id=63895

The spec's take on this is at http://www.w3.org/TR/CSS21/visuren.html#choose-position:

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.

What you want to do in the short term is put your position:relative on a block inside the cell (e.g. your "wrap" block).

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?

---

Related Topics