Similar Question:
Is Firefox compatible with position: relative on table elements?
Check out this example: a full-width menu formatted as a table with ul dropdown menus.
Everything works as expected in IE and Opera, but in Firefox the dropdown uls expand to fill the entire screen!
Can anyone provide assistance with this issue?
position: relative does not have any effect on table cells like <td> or elements with display: table-cell.
According to the specifications: http://www.w3.org/TR/CSS21/visuren.html#propdef-position
The impact of using '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 not defined.
Therefore, Firefox is not at fault here, even though it would be nice if it behaved like other browsers in this aspect.
To achieve the desired result, you should enclose each td within a wrapper div (and then modify your CSS selectors accordingly):
<table id="mainmenu">
<tr>
<td>
<div style="position: relative;">
<a href="#">..</a>
<ul>
..
</ul>
</div>
</td>
..
</tr>
</table>
As mentioned by @Jared Farrish, utilizing tables for layout is considered a poor practice and is the root of the issue here.
#mainmenu ul li {
width: 100%;
}
The problem lies in the fact that the li elements are set to display at 100% width of the screen. To address this, I recommend wrapping the menu in a container div instead of using a table. A better approach would be to structure the menu with an unordered list like the following example:
<ul>
<li class="parent_node"> Menu Header 1
<ul class="sub_node">
<li> Sub item 1</li>
</ul>
</li>
<li class="parent_node"> Menu Header 2
<ul class="sub_node">
<li> Sub item 1</li>
</ul>
</li>
</ul>
I'm trying to create an expanding bubble-like circle of various colors when clicked on a blank page. The circle should continue increasing in size each time it is clicked, only stopping when the mouse click is released. I am looking to use HTML, CSS, ...
My primary navigation menu is managed by WordPress and can be seen below. I aimed to modify the active state when a user clicks on a link in the menu by adding background-color and color for styling purposes. Although changing the background-color upon cl ...
My DOM structure is generated by a JS framework and may appear like this: span:nth-child(odd) { background-color: lightblue; } span { display: block; } <div id="parent"> <div class="child"> <span>Some text to color in alte ...
When I accidentally place my cursor earlier in the text area, it starts writing from that point, leaving some unwanted spaces at the beginning. I prefer it to start from the extreme left, similar to how it behaves in input boxes. Below is the code snippet ...
I'm currently working on a project where I have several description blocks that are meant to fade in when the corresponding image is clicked. The fading effect works fine, but there's an issue with the page scrolling up each time a new image is c ...
I have both an English and French version of my website located at: *website.com/fr/index.php *website.com/index.php Currently, I have a direct link to switch between the two versions: -website.com/fr/index.php -website.com/index.php. However, I ...
One of the challenges I am facing involves a webpage with multiple submit buttons. My goal is to iterate through each button and click on them one by one. While I am aware that this can be achieved using xpath like this (//button[@class='submit' ...
Check out this quick demonstration on Safari only: http://jsfiddle.net/2late2die/8AJnD/ If you remove the perspective style, all checkboxes will appear normal. When using -webkit-transform-style:preserve-3d, the checkboxes disappear. This issue seems to af ...
How can I prevent a paragraph in one of two adjacent div containers from having a line break without changing the container's size? The surrounding div uses display: flex to position its children side by side. Currently, I've applied the followin ...
Here's the code I'm working with: .frm-find-people table td:nth-child(1) { padding: 5px 15px; width: 100px } .frm-find-people table td:nth-child(2) { border: 1px solid red; } <form class="frm-find-people"> <table> ...
<span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot">< ...
Initially, I attempted using regular HTML for the dropdown button but encountered issues. As a result, I switched to jsfiddle to troubleshoot. Despite my efforts, the dropdown feature still refused to work. If you'd like to take a closer look, here&a ...
Is there a way to easily track and summarize all of my live CSS changes in the Chrome browser? I've searched on Stack Overflow, but haven't found a solution that works for me. This specific answer seems like it could be the most helpful for achie ...
When attempting to include an h3 element on the website, it remains stuck at the top. I have tried using CSS properties like position, top, and left but it does not respond to them. Additionally, I experimented with a gallery template from w3schools to see ...
I need assistance with integrating a uib-datepicker into a table: <div class="table-responsive"> <table class="table table-striped" > <thead> <tr> <th class="col-md-2"><span>Date ...
When creating a dropdown using ul and li tags, I am faced with the dilemma of determining the ideal time to hide the dropdown menu. The dropdown menu is designed to display values based on user input as they type, updating dynamically. Initially, I had se ...
The situation at hand is quite straightforward. <input type="date /> When viewed on Firefox (both desktop and mobile), it appears as follows: https://i.stack.imgur.com/S2i0s.png While the internet provides a solution specifically for Chrome: ...
I'm currently using PhpStorm version 2016.3.2. Occasionally, I come across <style> tags in my HTML files containing minified CSS code. Is there a way to create a shortcut for unminifying the code within these tags? For instance, the following ...
I am currently working on implementing edit, update, and discard functions in an angular material table. While I have been able to successfully edit and update the table row wise, I am struggling with how to discard table rows. If you would like to see wh ...
I have been using Chrome dev tools to work on a code base that was not created by me. There are numerous deeply nested elements scattered throughout the code. I find myself having to manually search through the HTML structure in order to select them with ...