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
How to Position Div Below Another Div
Formatting Numbers (Decimal Places, Thousands Separators, Localization, etc) With CSS
Split Div into 2 Columns Using CSS
Css Change Button Style After Click
Vuetify: Fit V-Image Within the Screen Size
How to Set the Height of Vuetify Card
How to Make an Element Fill the Remaining Viewport Height
Angular Material Mat-Drawer in Full Height Flex, Content Overflow Auto
How to Remove Border of Drop Down List:Css
Swap Div Position With CSS Only
Make a Div Fill an Entire Table Cell
Angular 5 - Failed to Load Resource: the Server Responded With a Status of 404 (Not Found)
How to Change Paper Size in Headless Chrome - Print-To-Pdf
How to Create a Flexible Vertical Line in Between Two Divs
Detect If a Browser in a Mobile Device (Ios/Android Phone/Tablet) Is Used
Fullcalendar: Change the Color for Specific Days
Pure CSS to Make Font-Size Responsive Based on Dynamic Amount of Characters