Firefox Issue with Display:Absolute in a Table Cell

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.

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/

Firefox issue with position absolute inside an item with display: table-cell

use position relative for blank-slate-steps div.

#blank-slate-steps {
    background-color: #E8E8E8;
    bottom: 0;
    font-family: OpenSansCondensedBold,sans-serif;
    text-align: center;
    width: 100%;
    position: relative;
}

Firefox issue with display:absolute in a table cell

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.

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

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>

---

Related Topics