Rendering colors in Firefox using hexadecimal codes

I have a section set up on this webpage: (located about midway down the page).

The partition in the column displays as light grey in CHROME and Safari, yet it shows up as BLACK when viewed in Firefox. How do I go about solving this issue? It's frustrating because I copied this code from here: http://www.w3schools.com/cssref/css3_pr_columns.asp - leading me to believe that it would function flawlessly.

This is the code snippet:

.newspaper
{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:1px outset #C6C6C6; /* Firefox */
-webkit-column-rule:1px outset #c6c6c6; /* Safari and Chrome */
column-rule:1px outset #c6c6c6;
font-size: 14px;
line-height: 1.5em;
color: #000000;
font-family: "museo-sans", sans-serif;
font-style: normal;
font-weight: 400;
padding: 8px 0px 8px 0px;
}

Answer №1

consider using

-moz-column-rule:1px solid #C6C6C6
in place of
-moz-column-rule:1px outset #C6C6C6
you should see positive results

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

Adjusting the header background color and inserting a logo once a specific threshold is reached

Currently, I am designing a website where I need the background color to transition from transparent to black and display a logo once the user scrolls down to a certain point. I am a beginner in javascript and I am facing some difficulties with this task. ...

Switch between different classes with JavaScript

Here is the code that I am working with: This is the HTML code: <div class="normal"> <p>This is Paragraph 1</p> <p>This is Paragraph 2</p> <p>This is Paragraph 3</p> <p>This is Paragraph 4&l ...

Unable to spin solely the outer edge of the circle without affecting the inner image or content

Is there a way to rotate just the border of the circle around an image, without rotating the image itself? I am trying to achieve this look, with only the blue border rotating and not the image inside: https://i.sstatic.net/02az9.png This is what I have ...

Highlighting the active nav-item in Bootstrap-5 is proving to be a challenge

I'm having trouble with the Bootstrap navbar. I want to change the color of the active nav-link, but it's not working as expected. I am currently using Bootstrap-5. Below is the CSS code I have: .nav-link { color: #666777; font-weight: 4 ...

Guide to dynamically altering the header logo as you scroll further

I'm attempting to dynamically change the logo in my header based on how far I've scrolled down the page. While I have experimented with libraries like Midnight.js, I specifically need to display an entirely different logo when scrolling, not just ...

Guide to dynamically adding two CSS files in a single component in Angular 8

Within this component, there is a form that needs to support two languages, each with its own unique CSS style - one for left-to-right (ltr) direction, and the other for right-to-left (rtl) direction. Is there a way to conditionally apply two different CS ...

Tips for locking the button in the navigation bar while scrolling

I noticed that when I have 6 fields in my navbar, with 5 of them being links and one as a dropdown, the scrolling of the page causes all fields to remain fixed except for the dropdown field.Check out this image description for reference https://i.stack.im ...

Experiencing distinct webpage designs on 127.0.0.1 versus localhost

As I work on creating a responsive website using my laptop, I have encountered an unexpected issue. Using live reload at 0.0.0.0 port 3000 allows me to preview my project on my mobile device. However, the layout appears differently when viewed at 127.0.0.1 ...

Unable to display the outside table border in CSS styling

Lately, I've been relying on 'border = 1' in my HTML for styling, but I've come to the realization that using CSS would be more efficient. So, I went ahead and created a simple border class like this... .basicborder table, .basicborder ...

The clash between screens measuring 1024px in width and tablets with the same width is causing issues

Utilizing MediaQuery to develop a responsive website layout has been mostly successful, aside from one particularly vexing issue. The default core.css stylesheet is applied to the site, serving as the style-sheet for the desktop version. However, when the ...

Ensuring the bottom border of an element extends to the edge of the screen when utilizing a 960 grid in HTML/CSS

I am currently working on creating a website layout using the 960 grid system developed by Nathansmith. I am facing an issue in extending the bottom border of an element to reach till the end of the screen while keeping the element inside a container div. ...

Choose either immediate offspring or immediate offspring of immediate offspring

I am struggling to create a CSS Selector that follows DRY principles. The selector needs to target elements within a group but not those within a subgroup of the main group. Elements should only be direct children of the main group or wrapped in an addit ...

Using jQuery to toggle the image of a button based on its id

I have a jQuery function that opens another section when clicking on a div with the class 'open', and changes the image of a button by switching its id for CSS. However, I now need to change the button's image back when it is clicked again. ...

In the mobile view of the jumbotron, there is a noticeable blank area on the right side

I've searched high and low for a solution to this issue, but nothing seems to pinpoint the cause of the problem. The white space that's causing trouble is evident in the following image: https://i.sstatic.net/95Rh6.jpg Could you help me identif ...

The necessary min-width for the media query has not been implemented

Despite creating a basic example using media queries, I'm puzzled that the effect is not being applied at the exact min-width, but rather at (offset + min-width). The HTML document is currently empty. <!DOCTYPE html> <html lang=""> <h ...

Achieving effective targeting of the second segment within a string enclosed in a span tag through increased specificity

When it comes to styling elements, the easiest way is to use classes and assign the properties needed. However, 1. I'm not a huge fan of creating classes all over the place. That's what specificity and CSS mapping are for. 2. Going thro ...

"Implement a feature that allows for infinite scrolling triggered by the height of

Looking for a unique solution to implement a load more or infinite scroll button that adjusts based on the height of a div. Imagine having a div with a height of 500px and content inside totaling 1000px. How can we display only the initial 500px of the div ...

Bootstrap select box gracefully fits within a dynamically adjusting height div

Can someone help me troubleshoot the issue with displaying/overflowing the .drop-down outside of the .item box in this demo? I need to keep the height of the .item as auto but for some reason, I can't enable overflow visible on it. .item{ backg ...

Fluid design: prevent alteration in body width caused by vertical scrollbar

I have successfully implemented a liquid layout for my website by setting the body tag width to 100%. <html> <head> </head> <body> <div id="container"> some content </div> </body> body { mar ...

Eliminating the boundaries of Bootstrap accordion

I'm currently working on creating Bootstrap accordion menus and I'm attempting to remove the border that appears when it's collapsed and expanded. Below is the code I've been working on: <div class="accordion"> <div ...