The moz-column feature is experiencing issues in Firefox and is not functioning properly

I am facing an issue with creating a four-column grid using the code below. The code functions perfectly in Chrome, but it fails to generate the columns in Firefox.

You can view the live demonstration of the code here: http://jsfiddle.net/rfTXX/1/

I have referred to this tutorial http://css-tricks.com/almanac/properties/c/columns/, and I believe my code is correct. However, it still doesn't work in Firefox.

Could you please advise me on how to adjust the CSS so that it works across different browsers?

CSS 

#wrapper {
width: 90%;
max-width: 1100px;
min-width: 800px;
margin: 50px auto;
}

#columns {
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 4;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 4;
column-gap: 15px;
column-fill: auto;
}
</style>

HTML

<div id="wrapper">
<div id="columns">

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>


    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>

       <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>

 </div>
 </div>
css

Answer №1

Give it a shot without the use of the column-fill property, and see if that resolves the issue.

Alternatively, you can opt for -moz-column-fill: balance; as an alternative solution.

Answer №2

To ensure safety, make sure to add -moz-column-count:"your value" in your CSS code and also insert this JavaScript code 

document.getElementById("lstAccessList").style.MozColumnCount = "your value";
I can guarantee that this method worked wonders for me after a thorough search.

Answer №3

Starting from version 3.5, Firefox supports the -moz-column-rule property. Visit this link for more information.

Answer №4

To enhance the layout, simply eliminate column-fill and introduce -moz-columns:4;. This method has proven to be effective in my experience.

Answer №5

Swap out -moz-column-fill:auto with -moz-column-fill:balance

I can't explain it, but this change seems to do the trick!

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

A guide on navigating full images using CSS

I am searching for a code that will enable scrolling through entire images on my landing page. It is a bit challenging to explain, but it is similar to the style of scrolling on tesla.com. Each scroll of the mouse wheel moves down one complete image. Can ...

javascripthtmlcss

My CSS seems to be causing an issue and preventing the function from running correctly. Now I just need to

I'm currently working on a project and following a tutorial to help me create a navigation bar. The tutorial I am using can be found here: https://www.youtube.com/watch?v=gXkqy0b4M5g. So far, I have only reached the 22:05 mark in the video. I have su ...

javascriptcssonclicktoggle

Is there a way to transform a hover dropdown menu into a sidebar dropdown menu that can be clicked on mobile devices?

Currently working on enhancing the navigation menu of my website, and I have encountered a challenge with a dropdown sub-menu when viewed on mobile devices. In reference to w3Schools, I successfully implemented a hover-based sub-menu for desktop users. Ho ...

javascripthtmlcssdropdownsubmenu

Using the contents of a text file as text in an HTML document

I've come up with a clever time-saving trick for my website template project. I want to streamline the process of changing large text files by having a separate plain text document that will automatically transfer its contents to a designated paragrap ...

javascriptjqueryhtmlcsstext

Is there a way to adjust the "click priority" for buttons that overlap?

I am facing an issue with a project where I have two buttons overlapping: a red button at the bottom and a yellow button on top. The problem lies in the fact that the yellow button is covering part of the red button. I want the red button to remain visibl ...

htmlcssangularuser-interfaceclick

What causes the size of an image to decrease when placed within an anchor tag?

Trying to add clickable social media icons, but when wrapped in an anchor tag the images shrink significantly. <span class="iconspan"> <a href="https://www.instagram.com/lil_ijoez/" target="_blank" ...

htmlcss

What is the proper way to convert the Vue3 ::v-deep SASS syntax to utilize :deep?

HTML: <template> <form class="bg-white"> <div class="source-field"> ... The original SASS code looks like this: .form::v-deep .source-field width: 129px display: inline-block margin: 0px 2px 5px 2px ...

cssvue.jssassvuejs3

Image with a custom background color and div overlay

Is it possible to have a colored background with an image in the content div? <body style="background-color: black; "> <div id="header" style="background: url('xxx11.png') repeat left top;"> </div> <div id="#containe ...

htmlcss

Stylesheet for a React component

Why is the CSS code in my React component file not working even though I have imported it? import React from 'react'; import { Carousel } from 'react-bootstrap'; import './Banner'; ...

cssreactjs

Allowing the primary content to span the entire width of the mobile screen

I have scoured various forums in search of answers, but unfortunately, I haven't found a solution that fits my specific query. I am looking to ensure that the .main-content (article text and images) occupies the full width of the mobile screen without ...

javascripthtmlcssmobileresponsive

Combining Versioning with BundleConfig.cs: A Comprehensive Guide

Encountering a recurring issue where changes made to CSS or Javascript files do not reflect in client browsers unless they manually refresh the page with ctrl+F5. This poses a challenge, especially in a school system with numerous users who may not be awar ...

javascriptcssversioningbundling-and-minification

Tips for choosing an option from a custom dropdown menu in CSS using Selenium WebDriver and Java

I'm attempting to programmatically select an item in a CSS dropdown using Selenium, specifically on the Google hotel review page. On this particular page here, I am trying to select the most recent reviews instead of the default "most useful" sorting. ...

javacssseleniumxpathweb-scraping

`Selecting the ideal dropdown menu placement`

I've been working on creating a drop-down menu using CSS, and I've managed to hide the drop down menu successfully. However, I'm facing difficulty in making it reappear. I suspect that the issue lies with the :hover tag, which I have removed ...

htmlcss

The CSS selectors ::v-deep, /deep/, and >>> are functional when used locally, but appear to be malfunctioning on GitHub pages

Looking to spice up my website with a typer animation using: https://github.com/cngu/vue-typer The issue arises when the text remains black on GitHub Pages, despite applying style rules that work locally with deep selectors. Following the documentation, ...

cssvue.js

Dragging a React <div> using useRef

As a beginner in React, I decided to challenge myself by recreating a classic game like 'space invader'. It seemed like a fun and simple project for someone at my skill level. My goal is to have a spaceship at the bottom of the screen that can s ...

cssreactjsuse-ref

Tips on how to apply styling to child components that are nested within parent components in a

My parent component HTML code is below: <div class="col-md-6"> <div class="categories"> <div class="title">All Categories</div> <nested-cat [data]="data" [key]="key" (action)="onClicked($event)" ...

cssangular

Creating a centered arrow using CSS within boxes

Here is the CSS class that I have applied to my divs: .rightarrow{ width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #aaaaa9; } This is ...

htmlcss

Pseudo elements disappear when utilizing Flexbox

I am looking to create two divs that each take up 100% width, but I am open to other configurations. Additionally, the active tab should have an arrow displaying below it. Despite using flex-grow in my flexbox setup, the placement of the after pseudo-elem ...

cssflexboxpseudo-elementflex-grow

Search box enlargement obstructing navigation bar links

I've been experimenting with a Javascript feature that starts with a search monocle icon. When clicked, the search box expands over the navigation bar. However, I'm running into an issue where even when the search box is not covering the navbar, ...

javascriptcsssearchz-index

Utilize a YouTube video as a background within a wrapper that is not set to a full 100

I am trying to set a Youtube video as the background of a container block that is not 100vw. I have attempted using a different approach with the following code snippet: https://codepen.io/daiaiai/pen/ygeyLG $color_1:rgb(25,29,184); $color_7:rgb(241,90,11 ...

htmlcssyoutube