Bootstrap 3 carousel Positioning not working

Question

I have a carousel problem that I created for a specific website. the carousel works as it MUST be in all browsers I tested except Mozilla firefox version 25.0 Here is an image of what is happening

If anyone had a simalar problem, I would like to know how they solved it, thanks here is the code for the carousel

<!-- Carousel================================================== --> <div id="Carousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#Carousel" data-slide-to="0" class="active"></li> <li data-target="#Carousel" data-slide-to="1"></li> <li data-target="#Carousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="images/slide_pics/1.png" alt="First slide"> <div class="container"> <div class="carousel-caption"> <h1>Example headline.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p> </div> </div> </div> <div class="item"> <img src="images/slide_pics/2.jpg" alt="Second slide"> <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> </div> </div> </div> <div class="item"> <img src="images/slide_pics/3.jpg" alt="Third slide"> <div class="container"> <div class="carousel-caption"> <h1>One more for good measure.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p> </div> </div> </div> </div> <a class="left carousel-control" href="#Carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#Carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 

Here is the css using

 /* GLOBAL STYLES -------------------------------------------------- */ /* Padding below the footer and lighter body text */ body { padding-bottom: 40px; color: #5a5a5a; } /* CUSTOMIZE THE NAVBAR -------------------------------------------------- */ /* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { position: relative; z-index: 15; } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { margin-bottom: 0px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ margin-top: 0px; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; } /* Declare heights because of positioning of img element */ .carousel .item { height: 400px; margin-top:-10px; background-color: #ccc; } .carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 400px; } 

Answer 1

Not necessarily the answer here, more debugging hints ... but when I run into such problems, I add a 1px border to each element after your current css, but in a different color i.e.

 .navbar-wrapper {1px solid purple;} .carousel {border: 1px solid black;} .carousel-caption {border: 1px solid yellow;} .carousel .item {border: 1px solid blue;} .carousel-inner > .item > img {border: 1px solid red;} 

Once this is done, you will see who the “culprit” is — you will most likely have to specify margin-left: 0px; for this element, since it seems that Firefox inherits the margin from the parent element by mistake. Then just pull the crazy borders!

Answer 2

I had the same problem, I found a problem with the carousel.

 .carousel { border: 1px solid black; } 

The problem is fixed.

Firefox 20 (Mac) Bootstrap 3.1.1

Answer 3

I decided only with this:

 .carousel { border-top: 1px solid #000 } 

Answer 4

 .carousel { border-top: 1px solid transparent; } 

Answer 5

 body { overflow-x: hidden; }