CSS Positioning Absolute Within Table Cells Not Working in Firefox

CSS Positioning Absolute within table cells not working in Firefox

Change ID's to classes and also displaying it as blocks fixes it:

http://jsfiddle.net/GchWZ/

It is better and more "proper" to user an inner div though as quoted from this stack overflow post: Does Firefox support position: relative on table elements?

<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 ignores absolute positioning in table cells

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

Positioning div absolute inside td does not work in firefox

Instead of using <table> <tr> <td> </td></tr> </table>, try to design div as a table.

For your reference http://snook.ca/archives/html_and_css/getting_your_di . After this try your code, it may help you out.

Design div as table is best approach. This may be used for responsive design too.

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(); });
});

css absolute position inside table-cell: strange Firefox display

Without changing html - anyway.

position:absolute forces display: block, read here: http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Solution: wrap your menu item content to other element:

<li> 
    <div class="menu-item-container">
        <a href="#">Item</a>

        <ul>
            <li>
                <a href="#">First</a>
            </li>
            <li>
                <a href="#">Second</a>
            </li>
        </ul>
    </div>
</li>

And css for wrapper:

.menu-item-container {
    position: relative;
}

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).

---

Related Topics