Firefox does not support padding-top in pseudo elements, unlike Chrome and Safari which do

I am aiming to create three square boxes that adjust their size based on the browser's dimensions. Each box will contain only one line of text, so I plan to use padding to fill any extra space.

My website utilizes flexbox, and I initially thought I had found a clever solution by using a :before pseudo-element to inherit the width of the parent element and set the length as padding-top:

.square:before {
content:''; 
padding-top:100%;
}

While this method works well in most browsers, I discovered an issue in Firefox. Below is the complete code and a link to a JSFiddle. Any advice or suggestions would be greatly appreciated.

http://jsfiddle.net/uLqqop0q/5/

The CSS styles:

#container {
display: flex;
width: 100%;
flex-direction: row;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}

.square {
display: flex;
flex: 1 0 auto;
margin: 10px;
border: 10px solid blue;
justify-content: center;
align-items: center;
color: #111111;
font-size: 1.7rem;
height: auto;  
text-align: center;
vertical-align: middle;
}

.square:before {
content:''; 
padding-top:100%;
}

UPDATE: A simple fix involves adding "display: table" to the pseudo-element.

Answer №1

That's why using percentages can lead to unexpected results.

When dealing with block layout, percentages in paddings are calculated based on the width of the container block, even if the padding is in the vertical direction.

Flexbox tried to address this issue by resolving paddings based on the width or height of the container block, depending on the padding direction.

However, there was disagreement among browsers. Firefox interprets padding-top: 100% based on height, while Chrome does so based on width.

In Firefox, the height of the container block is determined by the content's height, and since the padding is considered part of the content, a percentage value leads to a circular reference and results in 0. This is similar to the scenario of height: 100% in a block layout with a parent having height: auto.

To resolve this issue, it is recommended to use an explicit length instead of a percentage.

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

How to capture text outside of a HTML tag using Selenium with Python?

I need help extracting the specific text inside a div element that is not enclosed by a label. <div style="color:red;"> <label> Total Amount Due:</label> $0.00 </div> Only interested in retrieving the $0.00 amount from th ...

How can I align two tags horizontally using HTML and CSS?

I've been diving into HTML and CSS lately and making some progress, but I've hit a snag. I'm trying to create a horizontal ul list with li elements on the same line at the top of the screen, similar to Stack Overflow's layout. Although ...

When hovering over one div, both it and another div should be displayed simultaneously. The second div should continue to be displayed even when hovered over

I am looking to keep another div displayed when hovering over it - in this example, it says "hello." The div I want to remain visible is not a child element of the main div where I initiate the hover event. document.write("<base href=\"" + docum ...

Developing web applications using a combination of PHP, MySQL, and

I am in need of creating an HTML form that functions as CRUD. This form should be able to record inputs such as "row_number", "channel_name", and "ip_address". It will store all the data in a MySQL table using the "ORDER BY row_number" function. The form i ...

Utilizing the position relative property with Firefox browser

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

Instructions for activating a button in the absence of any inputs

I need help enabling a button in angularjs based on whether any of the inputs are filled out. I was successful in disabling a button when only one input is checked, but how can I do this for all inputs affecting one button? This is what I've attempted ...

Tips for safeguarding primary design elements from modifications by user-contributed styles in a text entry box

Currently utilizing Wordpress, but I believe my inquiry pertains to any platform where users are granted frontend posting capabilities. I am interested in enabling users to customize the style of their posts, specifically limited to the description area. ...

Is there a method to track the progress of webpage loading?

I am working on a website built with static HTML pages. My goal is to implement a full-screen loading status complete with a progress bar that indicates the page's load progress, including all images and external assets. Once the page has fully loaded ...

Tooltip remains visible even after formatting in highcharts

I have successfully hidden the datalabels with 0 values by formatting them. However, after formatting the tooltips for 0 valued data in a pie chart, there is an issue where hovering over the 0 valued portion shows a white box as shown in the picture. I hav ...

Creating a stripped box shadow with just HTML and CSS - a simple guide

Hey there! I'm trying to create a navbar button with a cool stripped box shadow effect when hovered, similar to what you see in this image link. I attempted to achieve this using CSS box-shadow and linear gradient, but unfortunately it didn't qui ...

Two divs with floated attributes and equal heights

My unique HTML is below: <div class="container"> <div class="box"> <div class="float"> <img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' /> </div> ...

In my HTML document, I have three identical Id's and I need to figure out how to target the third one using CSS. Can you help

I am working on an HTML document that contains multiple instances of ids and classes. Here is a snippet of the code: <!DOCTYPE html> <html> <body> <div id="Caption_G" class="editor-group"> editor-group<br /> ...

Issues with Laravel 8's datatable scripts causing dysfunction

In my practice with the AdminBSB template, I am facing an issue where the Jquery datatable plugin JS is not functioning properly in my blade template. I aim to achieve a datatable layout similar to this example: https://i.sstatic.net/krfPl.jpg However, t ...

When dynamically adding rules to jQuery validate, I encountered an unexpected error

My dynamic form validation with jQuery validate involves a drop-down menu on my HTML that includes values 1, 2, 3, and 4. Depending on the selection made from the drop-down, different div elements are displayed with corresponding fields. All the input fie ...

What is the most effective method for transferring data to a concealed input field?

I currently have a webpage with dual forms - one on the main page and another within a Bootstrap modal. The primary form includes fields like "Neck, Chest, Waist," while the modal's form only has an email field. To streamline the submission process, ...

What is the correct way to present the results of a result set in a textbox?

I am having trouble displaying data from the database in a textbox. It seems to be adding new lines and white spaces. Any thoughts on how to fix this issue? Here is the code snippet: <td width="200"> <textarea rows="3" cols="25" style="text-alig ...

Is it possible for links to remain clickable even if they pass underneath a div

I have implemented a shadow using a div element to cover some content beneath it. However, I am facing an issue where the div that is under the shadow cannot be interacted with. Is there any solution to this problem? Thank you ...

The button is unable to contain all the text, causing it to spill out instead of wrapping to

Need help with creating an HTML button that opens a link. The button consists of a title and a short description, but when the description is too long, it overflows outside the button. Currently implementing bootstrap and jquery. Code: body { backgr ...

Customize the Header Background Color in React Table

I'm working on customizing a re-useable table component using vanilla CSS. I have defined six color variables and want users to be able to select one of them to change the table header background color. However, I am unsure how to make this color choi ...

Maintain the expanded sub-menu when the mouse leaves the area, but a sub-option has been

Implementing a side menu with parent and child options that dynamically display content in the main div on the right when a child option is selected. The parent options are initially shown upon page load, and the child options appear when the mouse hovers ...