The CSS arrow breadcrumbs appear slightly fuzzy when viewed in Firefox

My arrow breadcrumbs are appearing a bit fuzzy in Firefox, but they look crisp in Chrome, Opera, and IE. Check out the CODEPEN

Here is how it appears in Firefox:

https://i.sstatic.net/9iX0g.png

This is my HTML:

<div class="row">
  <div class="tab-progress btn-breadcrumb clearfix text-center">
    <div class="arrow-nav col-xs-4">1</div>
    <div class="arrow-nav col-xs-4">2</div>
    <div class="active-arrow arrow-nav col-xs-4">3</div>
  </div>
</div>

And the CSS:

body {
  padding: 3em;
  background: #B9B9B9;
}
.row {
  background: white;
}
.btn-breadcrumb .arrow-nav:not(:last-child):after {
  content: " ";
  display: flex !important;
  width: 0;
  height: 0;
  border-top: 27px solid rgba(255, 255, 255, 0);
  border-bottom: 27px solid rgba(255, 255, 255, 0);
  border-left: 10px solid white;
  position: absolute;
  top: 33%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .arrow-nav:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 27px solid rgba(255, 255, 255, 0);
  border-bottom: 27px solid rgba(255, 255, 255, 0);
  border-left: 10px solid #E6E6E6;
  position: absolute;
  top: 33%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .arrow-nav {
  padding: 15px 0 15px 0;
}
.btn-breadcrumb .arrow-nav:first-child {
  padding: 15px 0 15px 0;
}
.btn-breadcrumb .arrow-nav:last-child {
  padding: 15px 0 15px 0;
}
.active-arrow {
  background-color: #2a53a5;
  color: white;
  border-radius: 0;
}
.active-arrow .numberCircle {
  color: white;
}
.active-arrow:hover {
  color: white;
}
.active-arrow:after {
  display: flex !important;
  width: 0;
  height: 0;
  border-top: 17px solid rgba(255, 255, 255, 0);
  border-bottom: 17px solid rgba(255, 255, 255, 0);
  border-left: 10px solid #2a53a5 !important;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  border-radius: 0;
  left: 100%;
  z-index: 3;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="tab-progress btn-breadcrumb clearfix text-center">
    <div class="arrow-nav col-xs-4">1</div>
    <div class="arrow-nav col-xs-4">2</div>
    <div class="active-arrow arrow-nav col-xs-4">3</div>
  </div>
</div>

htmlcsstwitter-bootstrapfirefoxbreadcrumbs

Answer №1

It seems like I have a grasp of your requirements, but there are some issues with your CSS implementation.

I have designated the active-arrow class to handle the creation of arrows so that it can target the correct element regardless of its position.

body {
  padding: 3em;
  background: #B9B9B9;
}
.row {
  background: white;
}
.btn-breadcrumb .arrow-nav {
  padding: 15px 0 15px 0;
}
.btn-breadcrumb .arrow-nav:first-child {
  padding: 15px 0 15px 0;
}
.btn-breadcrumb .arrow-nav:last-child {
  padding: 15px 0 15px 0;
}
.active-arrow {
  background-color: #2a53a5;
  color: white;
  border-radius: 0;
}
.active-arrow .numberCircle {
  color: white;
}
.active-arrow:hover {
  color: white;
}
.active-arrow:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 25px solid rgba(255, 255, 255, 0);
  border-bottom: 25px solid rgba(255, 255, 255, 0);
  border-left: 10px solid white;
  position: absolute;
  left: 0;
  top: 0;
}
.active-arrow:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 25px dotted white;
  border-bottom: 25px dotted white;
  border-left: 10px dotted rgba(255, 255, 255, 0);
  position: absolute;
  top: 0;
  right: 0;
}
.arrow-nav:last-child.active-arrow:after {
  border: none;
}
.arrow-nav:not(.active-arrow):before {
  content: '';
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 10px solid grey;
  position: absolute;
  right: -10px;
  top: 0;
}
.arrow-nav:not(.active-arrow):after {
  content: '';
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  right: -9px;
  top: 0;
}
.arrow-nav:last-child:not(.active-arrow):after,
.arrow-nav:last-child:not(.active-arrow):before {
  border: 0;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="tab-progress btn-breadcrumb clearfix text-center">
    <div class="arrow-nav col-xs-4">1</div>
    <div class="arrow-nav col-xs-4">2</div>
    <div class="active-arrow arrow-nav col-xs-4">3</div>
  </div>
</div>
<div class="row">
  <div class="tab-progress btn-breadcrumb clearfix text-center">
    <div class="arrow-nav col-xs-4">1</div>
    <div class="active-arrow arrow-nav col-xs-4">2</div>
    <div class="arrow-nav col-xs-4">3</div>
  </div>
</div>
<div class="row">
  <div class="tab-progress btn-breadcrumb clearfix text-center">
    <div class="arrow-nav col-xs-4">1</div>
    <div class="arrow-nav col-xs-4">2</div>
    <div class="arrow-nav col-xs-4">3</div>
  </div>
</div>

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

What is the best way to organize divs in a grid layout that adapts to different screen sizes, similar to the style

Is there a way to align multiple elements of varying heights against the top of a container, similar to what is seen on Wolfram's homepage? I noticed that they used a lot of JavaScript and absolute positioning in their code, but I'm wondering if ...

javascriptjquerycss

How to prevent mousewheel scrolling on an HTML page with the exception of a specific div using jQuery

Is there a way to prevent mousewheel scrolling on an HTML page while still allowing it on a specific element? I've tried using the code below: $('html').bind("mousewheel, touchmove", function(e) { e.stopPropagation(); return false; ...

javascriptjqueryhtml

The performance of my SVG Filter is dismal

Here is the SVG filter I am using: <svg style="visibility: hidden; height: 0; width: 0;"> <filter id="rgbShift"> <feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" /> <feFlood flood-color="#FF0000" result=" ...

javascriptcsssvgsvg-filters

Is there a way to display Bootstrap 4 progress bars next to each other in two distinct columns within a single container?

I am struggling with controlling the positioning of Bootstrap 4 progress bars. It seems that Bootstrap's progress bars are based on Flexbox components, which is causing confusion for me. I have provided an image showcasing my issue here Within my cur ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4-beta

Is there a way to incorporate both duration and easing effects when using slideToggle()?

I am currently working on a sliding menu with jQuery and the bounce jQuery UI effect. The issue I am encountering is that the hover event does not trigger when I hover over the first li element. Here is the snippet of my JavaScript code: $(document).ready ...

javascripthtmljqueryjquery-events

Redirecting Permalinks on a WordPress Website

I run a WordPress website called example.com and I have set up a redirect to beta.example.com. My goal is to display my links as example.com/link1 instead of the previous beta.example.com/link1. I am currently using <?php echo get_permalink(id); ?> ...

phphtmlwordpress

Issue with Bootstrap dropdown functionality when used in conjunction with typical JS and CSS implementations

When it comes to front-end development, I feel lost and confused. Recently, I tried to create a Bootstrap dropdown menu that appears upon clicking an anchor tag using the following HTML: <div class="dropdown"> <a data-target="#" class="dropdo ...

javascripthtmlcsstwitter-bootstrap

Tips for customizing tab pane color using HTML/CSS

I am looking to customize the color scheme of my tab-pane. My goal is to have each tab turn "orange" when clicked, while keeping the rest of the tabs in a "gray" color. Below is the code I am currently experimenting with: <!-- Nav tabs --> <ul ...

htmlcsstwitter-bootstrapbootstrap-4

Steps for aligning two input elements side by side in Bootstrap 4

I need help positioning the text input and button side by side, with a margin of about 10px between them. The code I have right now is producing the result shown in the attached photo. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/c ...

htmlcssbootstrap-4

Exploring the World of Design in Next JS

When styling a Next.js app, is it necessary to use import styles from "./stylesheet.css" and apply classes with className={styles.aClassName}? If so, what if I need to style an element by ID or tag name? Is there a way to style a Next.js app li ...

cssreactjsnext.js

Newly added rows to the table after filtering remain visible

I am currently using the DataTable API and jQuery to create a table by fetching rows from the server. However, I encounter an issue when I click a button to load additional rows and append them to the end of the table. The problem arises when I try to hide ...

javascripthtmljquerycssdatatables

Design a PHP tool for generating custom CSS frameworks

After attempting to create a CSS frame generator similar to this one, I stumbled upon a solution that works well with one exception. PHP Code: <?php function print_css($parentTag, $prefix, &$dup_checker) { if ($parentTag->nodeName == &apos ...

phphtmlcss

Unable to control the content within the Repeater DIV

When working inside a repeater's ItemTemplate, I encountered an issue where only the first image/div toggled visibility when the toggle button/link was pressed. The images are dynamically loaded from the database and the toggle function seems to only ...

javascriptjqueryhtmlasp.netrepeater

Guide for using a CSS variable in a dynamic CSS class within a dynamic component

I'm working with library components and running into an issue with CSS when importing the same component multiple times within a parent component with different styles. import "../myCss.css" const CircleComponent = ({size , color}) => { ...

cssreactjsnext.jsmodulestyles

What are some alternative methods to achieve the same styling in CSS for IE6 without using

Can you please provide the standard equivalents for the following IE6 css hacks? .header { zoom: expression(runtimeStyle.zoom=1); z-index: 1; } .hmenu ul li { float: left !important; } ul.hmenu li { margin-left: expression(this.previousSibling= ...

cssinternet-explorer-6css-expressions

Using jQuery to retrieve child elements and assign numerical values to them

Looking for a jQuery function that can apply different CSS attributes to children elements of a div. <div class="container"> <div class="autogenerated-div"></div> <div class="autogenerated-div"></div> <div class="aut ...

javascriptjqueryhtmlcsschildren

Retrieve the $_POST data from form elements that have a class attribute instead of an id

Is there a way to extract the $_POST data from all the selects on the page when the user can use Javascript to add an undefined number of sorts, given that $_POST expects ids instead of classes? html file - include_sorts.php <div class="sorts"> ...

phphtmlpost

Preventing Div items from rearranging during size transitions using toggleClass

When I click on an element with the ID "id", I use toggleClass to resize a div from 10px to 500px in width. This is done partly to show/hide content. However, the issue arises when the transition occurs and the contents of the div start rearranging, overfl ...

javascriptjqueryhtmlcss

Tracking progress with a dynamic bar from the beginning to the end

Struggling to develop a progress bar that corresponds to project start dates and end dates. With a roster of 100 projects, spanning from mid-2017 to future launches, the aim is to depict progress between 2018, 2019, and 2020. If a project commenced in 2017 ...

htmlangularjsprogress-barbootstrap-4

The loaded sprite file is currently unused and a duplicate request is being sent for it

I have a CSS code snippet that looks like this: .is--stratus .icon__nav-threats.is--gray { background: url('/resources/img/navIcons_RiskInsight.png') no-repeat -1px -41px; width: 30px; height: 30px; } .is--stratus .icon__nav-thr ...

htmlcss