Discrepancies in CSS3 Column Rendering Between Firefox and Chrome

My website includes an unordered list structured like this:

      <ul class="subnav-links">
        <li class="">
          <a href="/de/t/new">New In</a>
        </li>
        <li class="">
          <a href="/de/t/sale">Sale</a>
        </li>
        <li class="">
          <a href="/de/pages/best_looks">Looks</a>
        </li>
        .... more lis omitted
  </ul>

Additionally, the CSS code looks like this:

.subnav-links {
     -webkit-columns: 8 auto; /* Chrome, Safari, Opera */
    -moz-columns: 8 auto; /* Firefox */
    columns: 8 auto;
}

While viewing my website, I noticed that Chrome displays the list items in 8 columns correctly, but Firefox only shows 1 column.

I'm puzzled as to why that is happening. Can anyone shed light on this issue and offer a solution?

P.S. I attempted to wrap the subnav-ul within a div.subnav-columns and apply styling with the columns property, but Firefox stubbornly continues to display just one column.

htmlcss

Answer №1

Have you ever experimented with utilizing this method and implementing it into your CSS coding:

.subnav-links li { 
    display:inline-block; width:100% 
}

Answer №2

Great, finally located the issue! Turns out there was a mistake in my stylesheet with the nested @-moz-document url-prefix().

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

Layering elements using the z-index property in Internet Explorer 7,

Issue with text placement in a dialog div only occurring in IE 7. To see the problem, visit this page and click on any of the text boxes on the left side. Attempts to fix by adjusting z-index in the skin.css file for div.dialogFromAndTo did not resolve ...

cssinternet-explorer-7

Understanding the distinction between assigning a value and setting text through JSE in Selenium using C#

Utilizing the IJavaScriptExecutor to set the attribute value can sometimes result in the text box containing the set value, but not displaying it as text. In some cases, the input is sent normally to certain text boxes, while for others, it is only setting ...

javascripthtmlseleniumselenium-chromedriver

I'm having trouble getting this button and icon to align properly. How can I fix this misalignment

Take a look at the HTML code snippet I'm currently working on... <div id="projects"> <H1 class="projects">PROJECTS</H1> <div class="box"></div> <div class="box"></div> <div class="box"></ ...

htmlcss

Default Documents on Login.aspx are being displayed even though it hasn't been specified in the web.config file

When I decided to move my website from the built-in web server (Cassini) to IIS, I encountered an issue with my Login.aspx page. The web.config file was showing an error "The requested page cannot be accessed because the related configuration data for the ...

asp.netdefaulthtml

Having trouble applying CSS to SVG icons from defs file in Webkit Browser

I've been tinkering with a project that incorporates SVG icons, hoping to style them using CSS for various scenarios and hover effects. However, my attempts are falling short in Webkit, while Firefox is displaying the icons as intended: http://codepe ...

htmlcsssvg

Tips for adjusting the width of ngx bootstrap modal?

Is there a way to adjust the width of my ngx bootstrap modal so that it is not fixed? I have attempted to modify it in the HTML code below but without success: Here's the HTML snippet: <div bsModal #childModal="bs-modal" class=" ...

cssmodal-dialogstyles

How can I achieve a floating effect for a div element that is contained within another element?

I have a container located within the body of my webpage. This container has margins on the left and right, as well as a specified width. Inside this container, there is a div element that extends beyond the boundaries of the container to cover the entire ...

htmlcssweb

What is the best way to arrange a number of inline-block elements with equal size in a vertical alignment?

My goal is to display a set number of items in a container, all with the same fixed size. The challenge arises when the content of each item varies in length, causing misalignment vertically: .child { display: inline-block; background: #bbbbbb; marg ...

htmlcssflexbox

Eliminating inline JavaScript code

Hello everyone, I need some help with my website. I have a series of image comparisons and I've currently used inline JS to manage them. However, as the number of comparisons has increased, I realize that inline JS is not the best solution for this. C ...

javascripthtml

Having trouble with passing post data from jQuery ajax to a php page?

Attempting to retrieve post data using an alert() function, but encountering an issue where the data is not being passed to the PHP page. The result always shows {"success":false,"result":0} The goal is to transmit a password to the PHP page, hash it usin ...

javascriptphphtmljquery

Utilizing browser local storage in web development

Currently, I am in the midst of working on an e-commerce platform, a project that holds significant importance for me as it marks my debut into major projects. For the first time, I am delving into the realm of local storage to manage basket data such as q ...

javascripthtml

Understanding which page is being rendered through _app.js in React/Next.js is crucial for seamless navigation and

Currently, I am working on rendering my web navigation and footer on my _app.js file. My goal is to dynamically adjust the style of the navigation and footer based on the specific page being accessed. Initially, I considered placing the navigation and foot ...

javascripthtmlcssreactjsnext.js

Enhancing the internal styling of ngx-charts

While working on the ngx-charts Advanced Pie Chart example, I noticed that the numbers in my legend were getting cut off. Upon inspecting the CSS, I discovered that a margin-top of -6px was causing this issue: https://i.stack.imgur.com/oSho1.png After so ...

htmlcssangularngx-charts

Using JQuery to hide elements by setting CSS display as none instead of block

Is there a way to change the display of a content div to block when a specific tab is selected by the user, while hiding all other content divs? Here is the JQuery code I have tried so far: $(document).ready(function() { function resetTabs() { $("# ...

javascriptjqueryhtmlcss

Expand the dimensions of the shinydashboard dashboard page

Currently, I am using shinydashboard and have formatted my ui code in the following way: ui = dashboardPage(skin="black", dashboardHeader(disable = T), dashboardSidebar(width=300), dashboardBody() ...

htmlcssrshinyshinydashboard

Launching Firefox using Bootstrap on a Mac for media query breakpoints

I'm facing a major issue with my website. Running on Mac OS with Firefox version 29 (and previous versions). The site is responsive and built with Bootstrap. It functions perfectly on all browsers EXCEPT... On Mac using FF, right at the point where ...

csstwitter-bootstrapresponsive-designmedia-queries

Raising the css value for each element that is impacted

I am faced with an infinite number of elements that I need to arrange next to each other. Each element has a class called "box". My goal is to separate each box by 10px increments, meaning the first element will have a left property of 0px, the second 10px ...

javascriptjqueryhtmlcsselement

Designing borders for tables

My current table styling approach is as follows: #content table { width: 100%; margin-top: 1em; border-collapse: collapse; border: 1px solid #222; } #content table td { border: 1px solid #888; padding: .3em; } I aim to create tab ...

htmlcsscss-tables

The CSS code isn't functioning properly on both desktop and mobile views

Here is what I desire to achieve: https://i.sstatic.net/8H4fv.png The CSS code I have is: And the HTML code looks like this: <body> <div class="contanier"> <div id="rightcol">Right Section</div> <div id="content">Cont ...

htmlcssiphone

Update text displayed on radio button selection using jQuery

Is there a way to change the label text on a selected radio button from "Set default" to just "default" using jQuery? I think I need to use the class radio-default as the selector, but I'm not very familiar with jQuery. <div class="radio-default ...

javascriptjqueryhtml