CODEWITHSUNDEEP
csstwitter-bootstrap-3
MECU
MECU

Reputation: 780

Bootstrap CSS navbar height huge in IE&FF, Correct in Chrome

I'm using BootStrap3 CSS navbar. In my jsfiddle demo, it works fine between Chrome and FF&IE, but on the site, FF&IE have a huge bar/blank space below the menu. I can't seem to find the problem using the FF element inspector. If I disable my theme style, it fixes some of it, but it's still large, so there's perhaps some conflict there. I've disabled most everything I can think of, but still cannot figure out the conflict or what I'm doing wrong.

JS Fiddle vs Website

<div class="navbar navbar-default navbar-inverse" role="navigation">
    <div class="navbar-header"> <a class="navbar-brand" href="#"> Year </a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#year-navs"> <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="year-navs">
        <ul class="nav navbar-nav">
            <li><a href="/football/colorado/team/mountain_range/2007/">2007</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2008/">2008</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2009/">2009</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2010/">2010</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2011/">2011</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2012/">2012</a>
            </li>
            <li class="active"><a href="/football/colorado/team/mountain_range/2013/">2013</a>
            </li>
        </ul>
    </div>
</div>

Really Large in FF

It should only be 52px (or so) tall.

What am I doing wrong? Where's the conflicting CSS? Am I not using/installing the Bootstrap CSS correctly?

Upvotes: 0

Views: 756

Answers (2)

Jeremy Carlson
Jeremy Carlson

Reputation: 1273

This took me a while to figure out, and then it was painfully obvious:

Your sidebar is floated left. The navbar is clearing floats so it contains them all gracefully (all of the nav elements within are floated), but since it's not within a floated element, it is clearing all the floats around it.

You will need to add float: left (or float: right) to a containing element so the navbar does not try to clear floats outside of that container.

You have <div style="margin: 0 0 0 170px;"> in your code which seems to be the relevant container.

Instead, try a negative left margin, left padding to compensate, and 100% width: 

<div style="margin: 0 0 0 -170px; float: right; padding-left: 170px; width: 100%;">

You probably should move that to your stylesheet, but I bet you knew that.

Upvotes: 1

SaleB
SaleB

Reputation: 1

I have not much experience in this field, but I may have a solution for you. Just add a constraint height: 52px; to .navbar class in your css.

Upvotes: 0

Related Questions