Bootstrap 3 carousel Positioning not working

Bootstrap 3 carousel Positioning not working

I am having a problem with the carousel i have created for a certain website. the carousel is workinglike it MUST in all the browsers i have tested it on except for Mozilla firefox version 25.0 Here is an image of what is happening

if anyone has ever had a simalar problem i would like to know how they solved it, thanks here is the code for the carousel

  
    
    
    
    
  
  
    
            
        
          
Example headline.
          
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.
          
Sign up today
        
      
    
    
            
        
          
Another example headline.
          
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.
          
Learn more
        
      
    
    
            
        
          
One more for good measure.
          
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.
          
Browse gallery
        
      
    
  
      

Here is the css am 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 by Kimberly-Ann for Bootstrap 3 carousel Positioning not working

Not necessarily an answer here, more of a debugging hint... but when I'm faced with issues like this I add a 1px border to each item after your current css, but in a different colour 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 thats done you'll see who the 'culprit' is - you'll most likely have to specify margin-left: 0px; for that element, as it seems like Firefox is inheriting the margin from a parent element in error. Then just take out the crazy borders!

Answer by sketchthat for Bootstrap 3 carousel Positioning not working

I had the same problem, I found the issue to be with the carousel.

.carousel { border: 1px solid black; }  

Fixed the issue.

Firefox 20 (Mac) Bootstrap 3.1.1

Answer by Rafael Caye for Bootstrap 3 carousel Positioning not working

I solved with only just it:

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

Answer by Luis Felipe Aguilar Pereda for Bootstrap 3 carousel Positioning not working

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

Answer by Manoj Singh Negi for Bootstrap 3 carousel Positioning not working

body {      overflow-x: hidden;  }  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72