Bootstrap tab body being pushed down

Question

I am using bootstrap and I have a page that is causing me trouble when I use the Tab plugin. The tab body is getting pushed down about 400px below the actual tabs. It is only happening on this one page, most of the other pages are very similar and use the same tab plugin but they are not causing as much problems.

Tab Code:

  <ul class="nav nav-tabs">
    <li class="active"><a href="#entireAsset" data-toggle="tab">Entire Asset</a></li>
    <li><a href="#entireSite" data-toggle="tab">Entire Site</a></li>
    <li><a href="#singleService" data-toggle="tab">Single Service</a></li>
  </ul>

  <!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="entireAsset">
    <p>Hello tab 1</p>
  </div><!--End Entire Asset tab-->
  <div class="tab-pane" id="entireSite">
    <p>Hello tab 2</p>
  </div>
  <div class="tab-pane" id="singleService">
    <p>Hello tab 3</p>
  </div>
</div>

jsFiddle: http://jsfiddle.net/f2TG8/

My css and all resources are in the JSFiddle.

Answer 1

There is a problem with the class .nav who has :after and :before styles that creates such white space. You can add this to your css:

.nav {
  overflow:hidden;
}

View the demo http://jsfiddle.net/f2TG8/2/