Menu icon Foundation
Orbit Bug Firefox

Hi Everybody,

Thanks to Foundation I can keep all my work on web design, and that's pretty cool.

However, I have a bug using Orbit Slider in Firefox (see image attached).

You will see that when I click either on next slide button or previous slide button, when I leave the button and push mouse in another area a white dotted border appears.

I checks in CSS but nothing fixed. The bug is not appearing on Chrome or IE.

Does anybody can help me fix it ?

Thank you all.

Se you .

Cous.

Sans titre

/* Orbit Graceful Loading */
.slideshow-wrapper {
  position: relative; }
  .slideshow-wrapper ul {
    list-style-type: none;
    margin: 0; }
    .slideshow-wrapper ul li,
    .slideshow-wrapper ul li .orbit-caption {
      display: none; }
    .slideshow-wrapper ul li:first-child {
      display: block; }
  .slideshow-wrapper .orbit-container {
    background-color: transparent; }
    .slideshow-wrapper .orbit-container li {
      display: block; }
      .slideshow-wrapper .orbit-container li .orbit-caption {
        display: block; }



.orbit-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: none; }
  .orbit-container .orbit-slides-container {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    height: 100% !important; }
    .orbit-container .orbit-slides-container img {
      display: block;
      max-width: 100%;
      height: 100%; }
    .orbit-container .orbit-slides-container > * {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      margin-left: 100%; }
      .orbit-container .orbit-slides-container > *:first-child {
        margin-left: 0%; }
      .orbit-container .orbit-slides-container > * .orbit-caption {
        position: absolute;
        bottom: 0;
        background-color: rgba(51, 51, 51, 0.8);
        color: white;
        width: 100%;
        padding: 10px 14px;
        font-size: 0.875rem; }
    	
		.slide-1 {
			background-image: url('../images/test-montre-1.jpg');
			background-size: cover;
			width: 100%;
			height: 100%;
			background-position: 50%;
		}
		
		.slide-2 {
			background-image: url('../images/test-montre-2.jpg');
			background-size: cover;
			width: 100%;
			height: 100%;
			background-position: 50%;
		}
		
		.slide-3 {
			background-image: url('../images/test-montre-3.jpg');
			background-size: cover;
			width: 100%;
			height: 100%;
			background-position: 50%;
		}
		
		.slide-4 {
			background-image: url('../images/test-montre-1.jpg');
			background-size: cover;
			width: 100%;
			height: 100%;
			background-position: 50%;
		}
		
		.slide-5 {
			background-image: url('../images/test-montre-2.jpg');
			background-size: cover;
			width: 100%;
			height: 100%;
			background-position: 50%;
		}
		
		.slide-6 {
			background-image: url('../images/test-montre-3.jpg');
			background-size: cover;
			width: 100%;
			height: 100%;
			background-position: 50%;
		}
		
		.orbit-container .orbit-slide-number {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
    color: white;
    background: rgba(0, 0, 0, 0);
    z-index: 10; }
    .orbit-container .orbit-slide-number span {
      font-weight: 700;
      padding: 0.3125rem; }

  .orbit-container .orbit-prev,
  .orbit-container .orbit-next {
    position: absolute;
    top: 45%;
    margin-top: -25px;
    width: 36px;
    height: 60px;
    line-height: 50px;
    color: white;
    text-indent: -9999px !important;
    z-index: 10; }
    .orbit-container .orbit-prev:hover,
    .orbit-container .orbit-next:hover {
      background-color: rgba(0, 0, 0, 0.3); }
    .orbit-container .orbit-prev > span,
    .orbit-container .orbit-next > span {
      position: absolute;
      top: 50%;
      margin-top: -10px;
      display: block;
      width: 0;
      height: 0;
      border: inset 10px; }
  .orbit-container .orbit-prev {
    left: 0; }
    .orbit-container .orbit-prev > span {
      border-right-style: solid;
      border-color: transparent;
      border-right-color: white; }
    .orbit-container .orbit-prev:hover > span {
      border-right-color: white; }
  .orbit-container .orbit-next {
    right: 0; }
    .orbit-container .orbit-next > span {
      border-color: transparent;
      border-left-style: solid;
      border-left-color: white;
      left: 50%;
      margin-left: -4px; }
    .orbit-container .orbit-next:hover > span {
      border-left-color: white; }



.touch .orbit-container .orbit-prev,
.touch .orbit-container .orbit-next {
  display: none; }
.touch .orbit-bullets {
  display: none; }

@media only screen and (min-width: 40.063em) {
  .touch .orbit-container .orbit-prev,
  .touch .orbit-container .orbit-next {
    display: inherit; }
  .touch .orbit-bullets {
    display: block; } }
@media only screen and (max-width: 40em) {
  .orbit-stack-on-small .orbit-slides-container {
    height: auto !important; }
  .orbit-stack-on-small .orbit-slides-container > * {
    position: relative;
    margin-left: 0% !important; }
  .orbit-stack-on-small .orbit-timer,
  .orbit-stack-on-small .orbit-next,
  .orbit-stack-on-small .orbit-prev,
  .orbit-stack-on-small .orbit-bullets {
    display: none; } }
[data-magellan-expedition] {
  background: white;
  z-index: 50;
  min-width: 100%;
  padding: 10px; }
  [data-magellan-expedition] .sub-nav {
    margin-bottom: 0; }
    [data-magellan-expedition] .sub-nav dd {
      margin-bottom: 0; }
    [data-magellan-expedition] .sub-nav .active {
      line-height: 1.8em; }
            

         

Hi Everybody,

Thanks to Foundation I can keep all my work on web design, and that's pretty cool.

However, I have a bug using Orbit Slider in Firefox (see image attached).

You will see that when I click either on next slide button or previous slide button, when I leave the button and push mouse in another area a white dotted border appears.

I checks in CSS but nothing fixed. The bug is not appearing on Chrome or IE.

Does anybody can help me fix it ?

Thank you all.

Se you .

Cous.

Sans titre

Orbitfirefoxborder

Hi Everybody,

Thanks to Foundation I can keep all my work on web design, and that's pretty cool.

However, I have a bug using Orbit Slider in Firefox (see image attached).

You will see that when I click either on next slide button or previous slide button, when I leave the button and push mouse in another area a white dotted border appears.

I checks in CSS but nothing fixed. The bug is not appearing on Chrome or IE.

Does anybody can help me fix it ?

Thank you all.

Se you .

Cous.

Sans titre

/* Orbit Graceful Loading */
.slideshow-wrapper {
  position: relative; }
  .slideshow-wrapper ul {
    list-style-type: none;
    margin: 0; }
    .slideshow-wrapper ul li,
    .slideshow-wrapper ul li .orbit-caption {
      display: none; }
    .slideshow-wrapper ul li:first-child {
      display: block; }
  .slideshow-wrapper .orbit-container {
    background-color: transparent; }
    .slideshow-wrapper .orbit-container li {
      display: block; }
      .slideshow-wrapper .orbit-container li .orbit-caption {
        display: block; }



.orbit-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: none; }
  .orbit-container .orbit-slides-container {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    height: 100% !important; }
    .orbit-container .orbit-slides-container img {
      display: block;
      max-width: 100%;
      height: 100%; }
    .orbit-container .orbit-slides-container > * {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      margin-left: 100%; }
      .orbit-container .orbit-slides-container > *:first-child {
        margin-left: 0%; }
      .orbit-container .orbit-slides-container > * .orbit-caption {
        position: absolute;
        bottom: 0;
        background-color: rgba(51, 51, 51, 0.8);
        color: white;
        width: 100%;
        padding: 10px 14px;
        font-size: 0.875rem; }
    	
		.slide-1 {
			background-image: url('../images/test-montre-1.jpg');
			background-size: cover;
			width: 100%;
			height: 100%;
			background-position: 50%;
		}
		
		.slide-2 {
			background-image: url('../images/test-montre-2.jpg');
			background-size: cover;
			width: 100%;
			height: 100%;
			background-position: 50%;
		}
		
		.slide-3 {
			background-image: url('../images/test-montre-3.jpg');
			background-size: cover;
			width: 100%;
			height: 100%;
			background-position: 50%;
		}
		
		.slide-4 {
			background-image: url('../images/test-montre-1.jpg');
			background-size: cover;
			width: 100%;
			height: 100%;
			background-position: 50%;
		}
		
		.slide-5 {
			background-image: url('../images/test-montre-2.jpg');
			background-size: cover;
			width: 100%;
			height: 100%;
			background-position: 50%;
		}
		
		.slide-6 {
			background-image: url('../images/test-montre-3.jpg');
			background-size: cover;
			width: 100%;
			height: 100%;
			background-position: 50%;
		}
		
		.orbit-container .orbit-slide-number {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
    color: white;
    background: rgba(0, 0, 0, 0);
    z-index: 10; }
    .orbit-container .orbit-slide-number span {
      font-weight: 700;
      padding: 0.3125rem; }

  .orbit-container .orbit-prev,
  .orbit-container .orbit-next {
    position: absolute;
    top: 45%;
    margin-top: -25px;
    width: 36px;
    height: 60px;
    line-height: 50px;
    color: white;
    text-indent: -9999px !important;
    z-index: 10; }
    .orbit-container .orbit-prev:hover,
    .orbit-container .orbit-next:hover {
      background-color: rgba(0, 0, 0, 0.3); }
    .orbit-container .orbit-prev > span,
    .orbit-container .orbit-next > span {
      position: absolute;
      top: 50%;
      margin-top: -10px;
      display: block;
      width: 0;
      height: 0;
      border: inset 10px; }
  .orbit-container .orbit-prev {
    left: 0; }
    .orbit-container .orbit-prev > span {
      border-right-style: solid;
      border-color: transparent;
      border-right-color: white; }
    .orbit-container .orbit-prev:hover > span {
      border-right-color: white; }
  .orbit-container .orbit-next {
    right: 0; }
    .orbit-container .orbit-next > span {
      border-color: transparent;
      border-left-style: solid;
      border-left-color: white;
      left: 50%;
      margin-left: -4px; }
    .orbit-container .orbit-next:hover > span {
      border-left-color: white; }



.touch .orbit-container .orbit-prev,
.touch .orbit-container .orbit-next {
  display: none; }
.touch .orbit-bullets {
  display: none; }

@media only screen and (min-width: 40.063em) {
  .touch .orbit-container .orbit-prev,
  .touch .orbit-container .orbit-next {
    display: inherit; }
  .touch .orbit-bullets {
    display: block; } }
@media only screen and (max-width: 40em) {
  .orbit-stack-on-small .orbit-slides-container {
    height: auto !important; }
  .orbit-stack-on-small .orbit-slides-container > * {
    position: relative;
    margin-left: 0% !important; }
  .orbit-stack-on-small .orbit-timer,
  .orbit-stack-on-small .orbit-next,
  .orbit-stack-on-small .orbit-prev,
  .orbit-stack-on-small .orbit-bullets {
    display: none; } }
[data-magellan-expedition] {
  background: white;
  z-index: 50;
  min-width: 100%;
  padding: 10px; }
  [data-magellan-expedition] .sub-nav {
    margin-bottom: 0; }
    [data-magellan-expedition] .sub-nav dd {
      margin-bottom: 0; }
    [data-magellan-expedition] .sub-nav .active {
      line-height: 1.8em; }
            

         

Hi Everybody,

Thanks to Foundation I can keep all my work on web design, and that's pretty cool.

However, I have a bug using Orbit Slider in Firefox (see image attached).

You will see that when I click either on next slide button or previous slide button, when I leave the button and push mouse in another area a white dotted border appears.

I checks in CSS but nothing fixed. The bug is not appearing on Chrome or IE.

Does anybody can help me fix it ?

Thank you all.

Se you .

Cous.

Sans titre
Christopher Buono over 5 years ago

outline: none;

add this property to your css for button based on description, you want it to be on focus and active psuedo-class