Struggle with Firefox: Table-cell with Relative Positioning Not Acting as Parent

Upon investigation, I have come across a unique layout issue that seems to only affect Firefox.

It appears that elements with display:table-cell; do not act as the positional parent for descendants with position:absolute;.

It is surprising to discover that Firefox struggles with absolutely positioning a small icon creature in the corner of a table-cell element compared to other browsers.

Check out this jsFiddle demonstration for more insight.

Expected Outcome (Chrome):

Actual Outcome in Firefox:

Surprisingly, even IE8 shows the expected result.
What workaround do you prefer?

Answer №1

Up until now, I have come across a rather simplistic and unoriginal solution.

To achieve the desired outcome in Firefox, one can simply insert a plain wrapper <div> with display:block; and position:relative attributes within the table-cell.

View Wrapper Solution on jsFiddle

I am hopeful that someone will be able to propose an alternative solution that does not necessitate me manipulating the DOM solely for Firefox compatibility.

Answer №2

The guidelines in the CSS specification are quite clear:

The impact of 'position:relative' on table elements such as table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption is not defined.

Due to this undefined nature, Firefox will simply disregard your position-relative setting. This means that your .container now acts as the closest positioned ancestor for the absolutely-positioned .icon elements.

It appears that both Firefox and Chrome handle this in a similar manner, which can be considered either correct or incorrect depending on perspective. Ultimately, it's best to rely on established practices and use the required wrapper for better adherence to specifications and compatibility across different browsers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fade out the content using jQuery and simultaneously change the div

I stumbled upon this interesting code snippet here: http://jsfiddle.net/7hqyq/ Being a novice in the realm of jQuery, I am curious to learn how one can modify the background color of the selected square (including the first square on page load) and implem ...

jquery html fade

Using routerLink for linking to multiple components

Below is the anchor tag provided: <a class="uppercase" routerLink="settings/pressure" routerLinkActive="text-success" (click)="closeModal()" > <div class="pad-btm"> PRESSURE </div> </a> I need to include another route ...

html angular typescript routes angular-routing

Issue with OBJLoader showing a blank screen

Does anyone have experience with rendering OBJ files using three.js? I'm having trouble getting them to display on the screen and would appreciate any help or advice. The strange thing is that a simple cube renders perfectly in my project. For those ...

javascript html three.js objloader

What is the best way to align the items in the center of this container?

Check out this link: http://jsfiddle.net/zCXMv/18/ I'm having trouble getting this to work properly. Any assistance would be greatly appreciated. Here is the HTML code snippet: <div id="button" > <a class="button1 active" rel="1">&l ...

html css

Utilize Css3 MediaQueries to nudge @Media switch for hyperlinks

My website currently utilizes css3-mediaqueries.js for a mobile-friendly design, which is working well. However, some users are still requesting to view the "web-version" instead. Is there a way to override the current CSS on the homepage, specifically the ...

css media-queries

Reordering Divs in Bootstrap 3 Specifically for Small Screens

Just getting started with my first responsive design project, and I'm wondering if it's possible to achieve something like this using Bootstrap 3. The goal is to switch from the current layout: https://i.stack.imgur.com/lABXp.jpg To https://i. ...

css twitter-bootstrap sorting mobile

In PHP, the symbol "!=" is used to compare if a string is not equal to a

Seeking feedback on why setting a string variable prevents me from calling it within a function. For instance: $name = "name"; $quote_name = "'".$name."'"; //echo of $name = name //echo of $quote_name = 'name' In PHP, I encounter iss ...

php html

DjangoPDFViewer

I need help figuring out how to integrate a PDF Viewer into my Django website. Right now, I'm using an iframe to show the PDF, but I want to add annotation functionality directly on the site. I've looked into using PDF.js, but it means incorporat ...

html django pdf pdf.js ng2-pdfjs-viewer

Ways to show buttons as inline or block elements when a single button is enclosed within a form

Need help figuring out how to make two buttons display as block elements on small screens and inline elements on larger screens, especially when one button is wrapped inside a form? I am struggling with displaying two buttons on my page. One of the button ...

css twitter-bootstrap responsive-design bootstrap-4

Transferring data from the Server-Side dataTable to a modal | Creating a personalized row button for dataTable

I have integrated a tutorial from datatables.net into my test page, which can be found at this link: . However, I am facing an issue where I am unable to pass selected data into a modal, and the modal does not open at all. EDIT: Here is the code snippet f ...

php html ajax datatable sqlsrv

What exactly defines a progressive mobile website?

Currently, I am involved in a project that focuses on creating a responsive website that can be accessed across different platforms and browsers, including Mobile, Desktop, and Tablet. While browsing through a blog, I came across the term "Progressive Mo ...

jquery html web responsive-design

JQuery not properly validating inputs with required attributes after creation

I am currently developing a contact form that includes an "alternative address" <div id='alt'> with toggleable visibility. Inside this div, there is a required <input> field. I encountered an issue where toggling #alt twice (thus hidi ...

javascript jquery html css cakephp

The Bootstrap navigation bar is experiencing functionality issues when viewed on Chrome mobile browsers

I'm currently testing out the bootstrap 3 navbar feature on my meteor application, but I'm encountering some issues specifically on mobile devices. The problem seems to be that the toggle button is not showing up as expected. Interestingly, it wo ...

javascript html css twitter-bootstrap meteor

Scrolling the y-axis with a fixed height limit to prevent overflow

My current dilemma is a seemingly simple one: <div class="container"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> Within the container, there are 3 divs: A and B ...

javascript css html

Mastering the Art of Scrolling

Can someone please tell me the name of this specific scrolling technique? I am interested in using something similar for my project. Check out this example site ...

javascript jquery css html

Explore button that gradually decreases max-height

I have a "Show More" button that expands a div by removing the css attribute max-height, but I want to add an animation similar to jQuery's slideToggle() function to smoothly reveal the rest of the content. This is the code I am using: <div id="P ...

javascript jquery html css

Modify an element upon clicking the mouse on an image

I am looking to dynamically change the paragraph element with className="details" to an editable input field when a user clicks on the image with className="edit-icon" within the same grid container. How can I achieve this functionality ...

javascript html reactjs material-ui

CSS - Help! Seeing different results on Internet Explorer

I'm currently handling an OSCommerce website, and I'm trying to figure out why this issue is occurring. You can view the website at this link: The layout looks completely different on Internet Explorer, and I'm puzzled as everything should ...

javascript html css internet-explorer google-chrome

Error encountered while scrolling with a fixed position

I am currently in the process of developing a carousel slider that resembles what we see on Android devices. The main challenge I am facing at this early stage is applying the CSS property position: fixed; only horizontally, as vertical scrolling will be n ...

javascript jquery html css

Iterating through form elements for validation using jQuery

Is there any way to accomplish this using jQuery? This is the initial setup: <input type='checkbox' class='sk1' /> <input type='text' class='skill1' /> <input type='checkbox' class=' ...

javascript jquery html input

CSSer Q&A