0

I've been making a carousel but seems the display:box isn't playing nice in firefox and it's ignoring the vertical/horizontal alignment that should be happening. I've got bootstrap plugged in so I'm not sure if there is an issue there.

http://codepen.io/Leifmao/pen/WwmdyY

I've put it on a codepen. Also if anyone could tell me why my button isn't setting to white properly on hover/visit as well that would be great.

.carousel-content {
  position: absolute;
  z-index: 20;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  width: 100%;
  height: 100%;
  text-align: center;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}
<div class="container-fluid">
  <!-- carousel -->
  <div id="carousel-generic" class="carousel slide" data-ride="carousel">
    <div class="carousel-content">
      <div class="carousel-title-container col-sm-12">
        <div class="carousel-title">Titles go in here</div>
        <a class="btn button" href="#" role="button">Get in touch <span class="custom-glyph ">›</span></a>
      </div>
    </div>
    <div class="carousel-inner">
      <div class="active item">
        <img src="images/1800500.png" alt="..." class="img-responsive">
      </div>
      <div class="item">
        <img src="images/1800500.png" alt="..." class="img-responsive">
      </div>
      <div class="item">
        <img src="images/1800500.png" alt="..." class="img-responsive">
      </div>
    </div>
  </div>
</div>
Leifmao
  • 1
  • That's an old version of the flexbox syntax isn't it...you need to update your code I suspect - http://stackoverflow.com/questions/16280040/css3-flexbox-display-box-vs-flexbox-vs-flex – Paulie_D May 11 '16 at 14:36

1 Answers1

0

As for the flexbox, this question has been answered in this post.

Concerning the button hover:

btn.hover {
   color: #333;
}

is overriding your

button:hover {
   color #FFFFFF;
}

try using the above (btn:hover) instead of button:hover

Or you could try using !important behind the color: #FFFFFF to override it.

Hope this helps!

Community
  • 1
  • 1
Arwin
  • 181
  • 8