Challenges with setting WIDTH and HEIGHT percentages in a DIV using CSS (firefox fails to properly render)

My mind is swirling with thoughts about this particular issue, and I am reaching out to share my frustration in the hopes of connecting with someone who has faced a similar experience and perhaps found a solution.

Here's the situation:

http://jsfiddle.net/w4d2E/

While percentages work seamlessly in Chrome, attempting the same in Firefox (latest version) results in the content div no longer expanding both horizontally and vertically.

I've combed through all related questions here, but unfortunately, I have yet to come across a satisfactory answer.

Thank you in advance for any assistance.

P.S.: I did experiment with using block display instead of the 'box' one in the 'content' layer, but encountered the same problematic behavior.

Answer №1

It appears you have implemented the XUL box layout. My recommendation would be to reconsider that choice. Contrary to popular belief, -moz-box does not operate in the same way as CSS flexbox layout.

Answer №2

The issue lies in using the CSS property display: -moz-box for the body element. The solution is to simply remove this line of code and everything should function properly. This seems to be a bug, therefore I recommend submitting a report on the dedicated bug tracker at bugzilla.mozilla.org.

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

Implementing inline scrolling using CSS

My objective is to have each article added to the container div, "inlineExample", load to the right without any vertical overflow. The CSS should be able to handle each additional article dynamically as they are added to the right. <div id="inlineExamp ...

Eliminate the bottom padding on the body in your HTML and CSS code

My Unique Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <style> /*RESET BLOCK START ------------------------------------------------------------------------------------------------------------------*/ ...

Breadcrumb floating to the right, yet it still manages to obstruct other content, forcing it into a

Within the Breadcrumbs section, I have the path home/profile The desired layout involves floating the Breadcrumbs to the right while keeping the Other contents unfloated to the left. Ver1 -------------------- home/profile -------------------- Ot ...

I'm curious why my background generator is only altering a portion of the background instead of the entire thing

I've been attempting to create a JavaScript random background changer, but I'm encountering some challenges. The main issue is that instead of changing the entire page's background, it only alters a strip of it. Additionally, I'm curiou ...

What are the steps to utilize vue.js for dynamically adjusting my sidebar based on a URL input?

Greetings to the amazing community of Vue.js enthusiasts, I am a novice looking to develop a single-page web application using vue.js. This application will consist of a fixed header and dynamic body content that changes based on user interactions. Here&a ...

Asymmetrical Edges for a Pair of Divisions

Is there a way to skew two divs without a white line in between, similar to this example: Desired outcome I have tried using a negative top margin, but it doesn't work well in responsive design. Current result Here is the code I am using: ... < ...

What is the best method for keeping this div at the bottom of the webpage?

I am facing a major issue with my website, which is built on Joomla and uses a free template. The problem arises when I visit this particular page: . I have found that adjusting the margin of { p.stickynote } to { margin-bottom:300px; } resolves the issu ...

Animating the opacity of elements using jQuery and CSS

Trying to put together a fading slideshow with five slides that will loop back to the beginning. My code seems like it should do the trick, but there's something not quite right. <script type="text/javascript"> $(document).ready(function( ...

Tips on choosing additional (sibling) elements with CSS?

My navbar has the following structure: <ul class="nav navbar-nav"> <li class="nav-item"><a href="#services">Services</a></li> <li class="nav-item"><a href="#work">Work</a></li> <li class ...

Concealing a Div Class with J Query upon page load

I've been attempting to use jQuery to hide a specific div class field, but unfortunately, I haven't had any success. This particular field is within a support form and should be hidden initially, only appearing when a certain value is selected. I ...

Dynamic Motion of HTML Elements

I'm facing a challenge where the elements on my website do not stay in place within their designated sections when I zoom out. Despite my efforts to inspect and adjust the properties of these elements, I can't seem to pinpoint the root cause of t ...

Modify the div's background color specifically with AngularJS

After creating a list using divs, my goal is to modify only the background color of the selected div when a user makes a choice from the list. I have accomplished this by defining two distinct CSS classes with the main difference being the background colo ...

As I scroll, I hope the texts will stay fixed against the backdrop image

Is it possible to make the #home section fixed to the background while scrolling, including all the texts and buttons? I envision it like having texts embedded in an image. The text is located in the middle left of the page (let's keep this as default ...

Revamping the Look: Refreshing Background of Div

I'm attempting to change the background image of the body element on a webpage when I hover over links with data-* attributes. It's working perfectly, but I can't seem to figure out how to create a smooth fade between the images when a link ...

Bootstrap allows for the use of video backgrounds, offering the option for borders to be included

Having trouble with a Bootstrap HTML page featuring a video background? The issue is that sometimes the video has borders on the left and right, and occasionally on mobile devices as well. Oddly enough, when the browser (Chrome or Firefox) is refreshed, th ...

Effortlessly glide to the form and center your attention on the textarea

Upon clicking the link, I aim to accomplish three tasks: Implement smooth scrolling down to #form Automatically focus on the textarea for immediate message writing Add extra top margin to account for a fixed top bar on the website. <a class="link" ...

The out directory is lacking Styled JSX integration for Next.js

I have a straightforward project in NextJs and I am looking to serve the files via NginX. Here are the dependencies listed in my package.json file: "dependencies": { "isomorphic-unfetch": "^2.0.0", "next": "^7.0.2", "next-routes": "^1.4.2", ...

You are unable to apply multiple customizations to Bootstrap in a React application

I'm currently working on a React application that consists of two distinct sections, referred to as Part A and Part B. Each part requires its own set of SCSS rules and Bootstrap Grid System Customization. Specifically, I need Part A to have a 24-colu ...

Show only the portion of the image where the cursor is currently hovering

Information in advance: You can check out the current code or view the live demo (hover image functionality not included) at . The concept: I would like to have it so that when I hover my cursor (displayed as a black circle) over the image, only the s ...

Looking to display an SVG icon and text side by side in HTML/CSS/Bootstrap?

I'm having trouble displaying an inline SVG image/icon and text on the same line. Here's the code snippet: .row.justify-content-left.icon1 { padding-left: 260px; padding-top: 36px; } <div class="row justify-content-left icon1"> <d ...