Does Firefox Support Position: Relative on Table Elements

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>

position relative in firefox

position: relative does not work on table cells (<td> or display: table-cell).

From the spec: http://www.w3.org/TR/CSS21/visuren.html#propdef-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.

So, Firefox is doing nothing wrong, although I do wish it would copy other browsers and make this work.

To make this work, you need to add a wrapper div inside each td (and adjust your CSS selectors):

<table id="mainmenu">
<tr>
<td>
<div style="position: relative;">
<a href="#">..</a>
<ul>
..
</ul>
</div>
</td>

..
</tr>
</table>

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



Leave a reply



Submit