Having trouble with -moz-box-flex not flexing? It works perfectly with (Chrome/Webkit) browsers!

I have been searching for hours to figure out why Firefox is not flexing my page content in HTML/CSS. It's working fine in Chrome, and I've double-checked that each -webkit-box-flex has a corresponding -moz-box-flex. Can anyone point out what I might be missing? Any help would be greatly appreciated!

*
    {margin: 0px;
    padding: 0px;
    }

body
    {width: 100%;
    height: 1000px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    background-color: #696969;
    background-image: url(squairy_light.png);
    background-repeat: ;
    background-position:;
    }

header, footer, article, nav, section, hgroup, aside
    {display: block;
    }

#banner
    {display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 0px 0px 0px;
    }

#fullpage_box
    {max-width: 1000px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    }

#page_box
    {display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    }

#content_box
    {-webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horisontal;
    box-orient: horizontal;
    padding: 10px 10px 10px 20px;
    padding: 10px 10px 10px 20px;
    margin: 5px 0px 5px 0px;

    }

Answer №1

Success! I have discovered the solution to the issue at hand.

The key is to ensure that the following CSS properties are only present in the parent folder, specifically #page_box and not both as previously implemented. After several attempts, this adjustment proved to be effective for me. The order of CSS display should follow from parent to child elements. Below is the corrected code for reference, hopefully, it can assist others facing a similar challenge.

#fullpage_box
{max-width: 1000px;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;}

#page_box
{display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-flex: 1;}

#content_box
{-webkit-box-flex: 1;
-webkit-box-orient: horizontal;
padding: 10px 10px 10px 20px;
margin: 5px 0px;}

Answer №2

#content_box
{-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-box-orient: horizontal;
-moz-box-orient: **horisontal**; <------------
box-orient: horizontal;
padding: 10px 10px 10px 20px;
padding: 10px 10px 10px 20px;
margin: 5px 0px 5px 0px;

}

Perhaps that was the error you made ;)

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

The CSS code for creating a typing effect is not functioning properly

I'm having some trouble with a code snippet I wrote to create a typing effect on hover within a div. Here's the code: .about-panel:hover p { color: white; font-size: 1em; white-space: wrap; overflow: hidden; -webkit-animat ...

Feasible: Embedding my complete website using custom HTML code into an iframe

I have the HTML for a website saved in a JavaScript string and I want to display it within an iframe. How can I insert this HTML string into the iframe and make the website appear? I have attempted to use this.src = HTML_STR; this.innerHTML = HTML_STR; but ...

Arranging text in a grid pattern surrounding an image

I'm new to CSS and experimenting with grids, but I'm struggling to create a grid with two rows and two columns. Here's what I'm looking for: Upper left cell: button and TEXT Upper right cell: picture Lower left cell: TEXT continues Low ...

Aligning a single component in the center vertically with the appbar positioned at the top of the screen using Material

As a beginner with material UI, I am facing challenges in centering a component both horizontally and vertically on my screen while including an AppBar for navigation at the top. While I have come across solutions like this example using a grid system, i ...

Exploring the jungle. Cursor acting strange while dragging

I am currently working on implementing drag-and-drop functionality in my project, utilizing slip.js from slip.js. To enhance the cursor during dragging, I have assigned class="draggable" to each draggable <tr>. The CSS code for this class is: .drag ...

What is causing the slight space between the navbar and the edges of my webpage?

tiny opening Here is the HTML and CSS code snippet: body { background-color: green; } .navbar { overflow: hidden; background-color: #333; text-align: center; width: 100%; } .navbar a { float: left; font-size: 18px; color: white; tex ...

Update the class of the panel immediately prior to a click event

Is it possible to change the class before the animation starts or when opening/closing the panel? Currently, the class only changes after the animation has finished and the panel is already open or closed. Here is an example: http://jsfiddle.net/0b9jppve/ ...

The footers on each page are not consistent

I have noticed that two pages utilizing the same CSS are displaying differently. Check them out here: 128.48.204.195:3000 128.48.204.195:3000/formats If you look closely, you'll see that below the footer, the /formats page appears to have no extra s ...

Use multiple lines to create a stunning visualization using morris.js. Let your data

I need help creating a graph using morris.js with 2 lines. I have two sets of data in one array, but I can't seem to display both lines on the graph simultaneously. When I use todos[0], only the first line is visible, and when I use todos[1], only the ...

Automatically scrolling down a div as new content is added using XMLHTTPRequest.openConnection

https://jsfiddle.net/kv5gbamg/ - I created a jsfiddle to demonstrate the functionality of the system Essentially, I am seeking a way to automatically scroll the scrollbar to the bottom every time a new message is received. My system updates the div with ...

Extend child flex boxes vertically when the main axis is horizontal

My flex boxes have the flex-direction set to row and align-items set to stretch. Despite setting align-self to stretch for the child boxes, they only fill the top part of the browser window. Can someone help me troubleshoot this issue? #containerDiv { ...

JQuery Glitch when Deleting Element Function

No responses have been found for this specific situation. CMS: Joomla I am utilizing jquery on a page that will be iframed to hide the logo, menu items, and other content contained in the central index.php header class. The code below on the page to be i ...

Aligning two flex items vertically

I am working with a flex container called .container and two flex items: item-one and item-two. My goal is to center the first item vertically and anchor the second item to the bottom. Struggling to figure out how to vertically align the first item within ...

How to apply new CSS styles to override the existing ones for an element

I have a website with custom CSS styling applied to an <A> tag, including styles for A:hover. However, I need to remove these hover effects for one specific instance of the tag. Is there a way in CSS to set a property so that it does not change? Let ...

The image is designed to stretch specifically on an iPad

I have been working on a new website project, check it out here: One issue I've run into is the banner image at the top not scaling properly for iPads. I tried using screenfly to test it but it seems like the simulator isn't accurately reflectin ...

The CSS classes for the dropzonejs are not being properly updated for editing purposes

I'm currently facing an issue where I am attempting to include an editable area inside a dropzone, but for some reason, the editable area is not visible within the dropzone and the CSS classes are not being applied. <a href="#" editable-text="us ...

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Wouldn't it be cool to have a magic line that follows your mouse as you navigate through the header menu? Take a look at this example: It works seamlessly and smoothly. I tried implementing a similar jQuery script myself, but it's not as smoot ...

Stop the bootstrap accordion from expanding when a button in its header is clicked

Currently, I am facing an issue with two action buttons located in the header of an accordion. Here is the setup: https://i.sstatic.net/HU2Kp.png Whenever I click on one of these buttons, it toggles the accordion's state. I have attempted to use e.p ...

Measuring the test coverage of Jest for evaluating the useEffect that modifies the styling of an HTML element

As a newcomer to Jest and React, I am currently working on developing a scroll button component in React using the useEffect function. Here's a snippet of my code: useEffect(() => { square && (square.style.transform = `translate ...

reverting the effects of a javascript animation

I am expanding the size of a carousel on a specific pane by adjusting its height and position. Here is how I achieve this: if(currentPane==2) { $("#carousel").animate({height:320},1000); $("#carousel").animate({top:411},1000); $("#dropShadow") ...