CODEWITHSUNDEEP
htmlcsstwitter-bootstrapinternet-explorer
user979331
user979331

Reputation: 11851

CSS Navigation Bootstrap issue

I have this navigation here:

<nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><h1 class="logo"></h1></a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <span style="color:#FFF; font-style:italic; line-height:66px; padding-right: 10px; font-size:12px; float:left;">In The Heart Of Niagara's Historic Wine Country</span>
            <ul class="nav navbar-nav">
              <li><a href="index.html">Home</a></li>
              <li><a href="rooms.html">Rooms</a></li>
              <li><a href="amenities.html">Amenities</a></li>
              <li><a href="dining.html">Breakfast and Dining</a></li>
              <li><a href="region.html">Discover Our Region</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

and this looks fine on Chrome and basically everywhere except for IE 11

Here is what it looks like in chrome:

enter image description here

And here is what it looks like in IE 11

enter image description here

My issue is, I am unable to reproduce this in my IE 11 but my clients IE 11 looks like the second image. How can I fix this?

Here is the CSS:

.navbar-nav {
    float: left;
    margin: 0;
    height: 70px;
}

.navbar-nav>li {
    float: left;
    height: 70px;
}

Upvotes: 0

Views: 301

Answers (1)

claudios
claudios

Reputation: 6656

Check your file if it follows html5 structure.

  1. <!DOCTYPE html> - is very critical, current best practice is in the first line of type HTML document.
  2. HTML5Shiv - to enable styling of HTML5 elements in versions of Internet Explorer.
  3. Bootstrap version - please make sure you are using the latest version of the framework.
  4. Compatibility mode IE11 - if you are running compatibility mode, turn it off.

Upvotes: 1

Related Questions