Does Firefox support position: relative on table elements?

Question

When I try to use position: relative / position: absolute on a or in Firefox it doesn\'t seem to wo

Answer 1

Since every web browser including Internet Explorer 7, 8 and 9 correctly handle position:relative on a table-display element and only FireFox handles this incorrectly, your best bet is to use a JavaScript shim. You shouldn't have to rearrange your DOM just for one faulty browser. People use JavaScript shims all the time when IE gets something wrong and all the other browsers get it right.

Here is a completely annotated jsfiddle with all the HTML, CSS, and JavaScript explained.

http://jsfiddle.net/mrbinky3000/MfWuV/33/

My jsfiddle example above uses "Responsive Web Design" techniques just to show that it will work with a responsive layout. However, your code doesn't have to be responsive.

Here is the JavaScript below, but it won't make that much sense out of context. Please check out the jsfiddle link above.

$(function() {
    // FireFox Shim
    // FireFox is the *only* browser that doesn't support position:relative for
    // block elements with display set to "table-cell." Use javascript to add
    // an inner div to that block and set the width and height via script.
    if ($.browser.mozilla) {

        // wrap the insides of the "table cell"            
        $('#test').wrapInner('<div class="ffpad"></div>');

        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;

            // remove any height that we gave ffpad so the browser can adjust size naturally.
            $ffpad.height(0);

            // Only do stuff if the immediate parent has a display of "table-cell".  We do this to
            // play nicely with responsive design.
            if ($parent.css('display') == 'table-cell') {               

                // include any padding, border, margin of the parent
                h = $parent.outerHeight();

                // set the height of our ffpad div
                $ffpad.height(h);

            }

        }


        // be nice to fluid / responsive designs   
        $(window).on('resize', function() {
            ffpad();
        });

        // called only on first page load
        ffpad();

    }

});

Answer 2

I had a table-cell element (which was actually a DIV not a TD)

I replaced

display: table-cell;
position: relative;
left: .5em

(which worked in Chrome) with

display: table-cell;
padding-left: .5em

Of course padding usually is added to width in the box model - but tables always seem to have a mind of their own when it comes to absolute widths - so this will work for some cases.

Answer 3

The accepted solution kind of works, but not if you add another column with more content in it than in the other one. If you add height:100% to your tr, td & div then it should work.

<tr style="height:100%">
  <td style="height:100%">
    <div style="position:relative; height:100%">
        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>
</tr>

The only problem is that this only fixes the column height problem in FF, not in Chrome and IE. So it's a step closer, but not perfect.

I updated a the fiddle from Jan that wasn't working with the accepted answer to show it working. http://jsfiddle.net/gvcLoz20/

Answer 4

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>

Answer 5

Try using display:inline-block it worked for me in Firefox 11 giving me positioning capability within the td/th without destroying the layout of the table. That in conjunction with position:relative on a td/th ought to make things work. Just got it working myself.

Answer 6

Adding display:block to the parent element got this working in firefox. I also had to add top:0px; left:0px; to the parent element for Chrome to work. IE7, IE8, & IE9 are working as well.

<td style="position:relative; top:0px; left:0px; display:block;">
    <table>        
        // A table of information here. 
        // Next line is the child element I want to overlay on top of this table
    <tr><td style="position:absolute; top:5px; left:100px;">
        //child element info
    </td></tr>
   </table>
</td>