Databases
StackOverflow2013
Postsdbo
POBootstrap 3 carousel Positioning not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap 3 carousel Positioning not working
    text
    copied!<p>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<img src="https://i.stack.imgur.com/dF7tx.jpg" alt="enter image description here"></p> <p>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</p> <pre><code>&lt;!-- Carousel================================================== --&gt; &lt;div id="Carousel" class="carousel slide"&gt; &lt;!-- Indicators --&gt; &lt;ol class="carousel-indicators"&gt; &lt;li data-target="#Carousel" data-slide-to="0" class="active"&gt;&lt;/li&gt; &lt;li data-target="#Carousel" data-slide-to="1"&gt;&lt;/li&gt; &lt;li data-target="#Carousel" data-slide-to="2"&gt;&lt;/li&gt; &lt;/ol&gt; &lt;div class="carousel-inner"&gt; &lt;div class="item active"&gt; &lt;img src="images/slide_pics/1.png" alt="First slide"&gt; &lt;div class="container"&gt; &lt;div class="carousel-caption"&gt; &lt;h1&gt;Example headline.&lt;/h1&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;&lt;a class="btn btn-large btn-primary" href="#"&gt;Sign up today&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="images/slide_pics/2.jpg" alt="Second slide"&gt; &lt;div class="container"&gt; &lt;div class="carousel-caption"&gt; &lt;h1&gt;Another example headline.&lt;/h1&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;&lt;a class="btn btn-large btn-primary" href="#"&gt;Learn more&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="images/slide_pics/3.jpg" alt="Third slide"&gt; &lt;div class="container"&gt; &lt;div class="carousel-caption"&gt; &lt;h1&gt;One more for good measure.&lt;/h1&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;&lt;a class="btn btn-large btn-primary" href="#"&gt;Browse gallery&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;a class="left carousel-control" href="#Carousel" data-slide="prev"&gt;&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;&lt;/a&gt; &lt;a class="right carousel-control" href="#Carousel" data-slide="next"&gt;&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;/a&gt; </code></pre> <p></p> <p>Here is the css am using</p> <pre><code>/* 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 &gt; .item &gt; img { position: absolute; top: 0; left: 0; min-width: 100%; height: 400px; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload