Twitter Bootstrap Carousel Misaligning each Slide Transition

Question

I integrated the Bootstrap Carousel (http://getbootstrap.com/examples/carousel/) in my 'comingsoon' homepage: http://247tutors.net/comingsoon/index.html

If you wait for the page to fully load, you will see that the automated slide transitions are not aligning properly (problem occurring in Chrome and Firefox). Each new slide comes in at a level and then once slide/img is covering carousel, i.e., at the end of the slide transition, the slide drops down by ~10px.

Notice my carousel's side panels onHover, leave a gap of about the same amount of pixels at the bottom.

..Can't tell it the error is caused by the navbar css (although, I do have the carousel-style.css being pulled in on the index.html after all other relevant css files (thus, giving carousel-style.css precedent over the class & div settings), or possibly, the error stems from loginDropdown.css (http://247tutors.net/comingsoon/css/loginDropdown.css)..?

Full source code url: view-source:http://247tutors.net/comingsoon/index.html

My Carousel css is here: http://247tutors.net/comingsoon/css/carousel-style.css

Carousel region snippet from index.html:

<script type="text/javascript">var switchTo5x=true;</script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/slider/custom/main/a-advanced.png" alt="Advanced Subjects">          
      <div class="container">
        <div id="custom247slider" class="carousel-caption">
          <h1 id="textNormal">Advanced Subjects</h1>
          <h4 id="textNormal">We specialize in college
          <br />
          courses and above.
          </h4>
        </div> <!-- END carousel-caption -->
      </div> <!-- END container -->
    </div> <!-- END item active -->
    <div class="item">
      <img src="images/slider/custom/main/a-available.png" alt="Tutors Available 247">
      <div class="container">
        <div id="custom247slider" class="carousel-caption">
          <h1 id="textNormal" style="color:#222;">24&#47;7 Availability</h1>
          <h4 id="textNormal" style="color:#222;">Tutors whenever you need.</h4>
        </div> <!-- END carousel-caption -->
      </div> <!-- END container -->
    </div> <!-- END item -->
    <div class="item">
      <img src="images/slider/custom/main/a-economical.png" alt="Affordable Pricing">
      <div class="container">
        <div id="custom247slider" class="carousel-caption">
          <h1 id="textNormal">Economical</h1>
          <h4 id="textNormal">Pay by the minute, the
          <br />
          week, or the month.</h4>
        </div> <!-- END carousel-caption -->
      </div> <!-- END container -->
    </div> <!-- END item -->
    <div class="item">
      <img src="images/slider/custom/main/a-ivy.png" alt="Ivy League-level Tutoring">
      <div class="container">
        <div id="custom247slider" class="carousel-caption">
          <h1 id="textNormal">Exceptional Tutors</h1>
          <h4 id="textNormal">College graduates from top schools
          <br />
          in a wide range of disciplines.
          </h4>
        </div> <!-- END carousel-caption -->
      </div> <!-- END container -->
    </div> <!-- END item -->

  </div> <!-- END carousel-inner -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div> <!-- END myCarousel -->

Answer 1

You have to remove the absolute positioning of the .carousel-inner > .item > img class on line 11 of your carousel-style.css style sheet. It should remove the skipping effect! ;)