Bootstrap navbar not visible in IE8

Question

I know this question has been asked several times and i checked through all the possible solutions but none worked perfectly for me.

Here is my problem: I am using bootstrap 3.2 and i have created a navbar working perfectly in chrome, firefox and latest IE but not in IE8,7. I tried adding the following files but it didnt help:

<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

Other than that, i tried adding: filter: none !important; and removed .collapse{display:none} But after playing with these things i got a menu in vertical position rather than horizontal. Here are the two images showing the dropdown menu Before and After the hacks i tried.

IE8 enter image description here

IE11 enter image description here

After removing .collapse{display:none} enter image description here

Here is my code:

<div class="navbar navbar-inverse">
  <div class="navbar-collapse collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
      <li class="active"> <a href="<%=request.getContextPath()%>/modules/home/homePage.jsp"> <span class="glyphicon glyphicon-home"></span> </a> </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tipologie mandrini</a>
        <ul class="dropdown-menu">
          <li><a href="<%=request.getContextPath()%>/modules/tipologieMandrini/new/viewNewContent.jsp">  <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo modello</a></li>
          <li><a href="<%=request.getContextPath()%>/modules/tipologieMandrini/ricerca/viewRicerca.jsp"> <span class="glyphicon glyphicon-search"></span> Ricerca</a></li>
          <li><a href="<%=request.getContextPath()%>/modules/tipologieMandrini/view/viewHomeContent.jsp"> <span class="glyphicon glyphicon-list"></span> Visita</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Singoli mandrini</a>
        <ul class="dropdown-menu">
          <li><a href="<%=request.getContextPath()%>/modules/singoliMandrini/new/viewNewContent.jsp"> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo mandrini</a></li>
          <li><a href="<%=request.getContextPath()%>/modules/singoliMandrini/ricerca/viewRicerca.jsp"> <span class="glyphicon glyphicon-search"></span> Ricerca</a></li>
          <li><a href="<%=request.getContextPath()%>/modules/singoliMandrini/view/viewHomeContent.jsp"> <span class="glyphicon glyphicon-list"></span> Visita</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Macchine</a>
        <ul class="dropdown-menu">
          <li><a href="<%=request.getContextPath()%>/modules/macchine/new/viewNewContent.jsp"> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo macchina</a></li>
          <li><a href="<%=request.getContextPath()%>/modules/macchine/ricerca/viewRicerca.jsp"> <span class="glyphicon glyphicon-search"></span> Ricerca</a></li>
          <li><a href="<%=request.getContextPath()%>/modules/macchine/view/viewHomeContent.jsp"> <span class="glyphicon glyphicon-list"></span> Visita</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Montaggio</a>
        <ul class="dropdown-menu">
          <li><a href="<%=request.getContextPath()%>/modules/montaggio/new/viewNewContent.jsp"> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo montaggio</a></li>
          <li><a href="<%=request.getContextPath()%>/modules/montaggio/ricerca/viewRicerca.jsp"> <span class="glyphicon glyphicon-search"></span> Ricerca</a></li>
          <li><a href="<%=request.getContextPath()%>/modules/montaggio/view/viewHomeContent.jsp"> <span class="glyphicon glyphicon-list"></span> Visita</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Smontaggio</a>
        <ul class="dropdown-menu">
          <li><a href="<%=request.getContextPath()%>/modules/smontaggio/new/viewNewContent.jsp"> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo Smontaggio</a></li>
          <li><a href="<%=request.getContextPath()%>/modules/smontaggio/ricerca/viewRicerca.jsp"> <span class="glyphicon glyphicon-search"></span> Ricerca</a></li>
          <li><a href="#"> <span class="glyphicon glyphicon-list"></span> Visita</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">SKF SF riparazione</a>
        <ul class="dropdown-menu">
          <li><a href="<%=request.getContextPath()%>/modules/SKFsfRepair/new/viewNewContent.jsp"> <span class="glyphicon glyphicon-pencil"></span> Inserersi riparazione</a></li>
          <li><a href="#"> <span class="glyphicon glyphicon-search"></span> Ricerca</a></li>
          <li><a href="#"> <span class="glyphicon glyphicon-list"></span> Visita</a></li>
          <li class="dropdown-submenu">
             <a href="#">Ship</a>
             <ul class="dropdown-menu">
               <li><a href="<%=request.getContextPath()%>/modules/SKFsfRepair/ship/new/viewNewContent.jsp">Ship to Cassino</a></li>
             </ul>
          </li>

           <li class="dropdown-submenu">
             <a href="#">Accept</a>
             <ul class="dropdown-menu">
               <li><a href="<%=request.getContextPath()%>/modules/SKFsfRepair/accept/viewAcceptContent.jsp">Accept spindle(s)</a></li>
             </ul>
          </li>

        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Altro fornitore</a>
        <ul class="dropdown-menu">
          <li><a href="#"> <span class="glyphicon glyphicon-pencil"></span> Inserersi altro fornitore</a></li>
          <li><a href="#"> <span class="glyphicon glyphicon-search"></span> Ricerca</a></li>
          <li><a href="#"> <span class="glyphicon glyphicon-list"></span> Visita</a></li>
        </ul>
      </li>
    </ul>

  </div>
</div>

NOTE: I am using YETI theme provided here: http://bootswatch.com/yeti/

weird because on the theme istelf in ie8 it works fine you must have added CSS incompatible with IE8 can I see your CSS — DCdaz, May 15 '15 at 11:56
I am sorry but how can i show you my entire css? or you want me to paste some portion of it in here? — fresh learner, May 15 '15 at 11:58
its on localhost only. I could just add it to dropbox and paste the link here. — fresh learner, May 15 '15 at 12:01
Take a look at the webconsole of IE8,7. If there if some css not working, the console should tell it you. — Vinc199789, May 15 '15 at 12:09
@Vinc199789 i wen through it. I dont know what is missing. Its frustrating because it seems to work on every browser except IE8,7. :( — fresh learner, May 15 '15 at 12:11

score 2 · Accepted Answer · edited May 23 '17 at 11:51

2

I believe there is an answer to your problem over here: IE8 issue with Twitter Bootstrap 3.

It appears that respond.js only works for local files. The referenced stackoverflow article mentions tring your website on IE8 with a local copy of bootstrap.css. Hope this helps.

edited May 23 '17 at 11:51

Community

1
1

answered May 15 '15 at 12:43

cfnerd

3,198
12
28
39

Thanks for your input. I am confirming that the copy of bootstrap.css i am using is located on localhost. It is however imported in another style.css which has only a few custom classes i set for logo. However, the respond.js i am using frm CDN. – fresh learner May 15 '15 at 13:06
@IbrahimNadir it might be worth trying the respond.js on localhost, too. A few other answers on the thread suggest trying the edge meta tag reference, too. Worth a try. – cfnerd May 15 '15 at 13:16
Yep, i have added the respond.js on localhost and it didnt help as well. Now going to try the meta tag reference. Hope this solves my problem. – fresh learner May 15 '15 at 13:24
this is all proving useles.. :( i am tearing my hair out to this one. – fresh learner May 15 '15 at 13:39
@IbrahimNadir welcome to the wonderful world of IE8. It is awful. When I loaded the bootsnip link, I noticed that it does throw a JS error in IE7. Also, I noticed that the bootstrap version used in the bootsnip theme is v3.3.4. I know they dropped IE8 support in 3.3.x, but that might be another area to look. Maybe see what happens when you update to a newer version (like the bootsnip site is using). Sorry I can be of more help. – cfnerd May 15 '15 at 13:53
1

Thanks a lot for all the details and help! Appreciated and will consider your help as resolved! :) – fresh learner May 15 '15 at 13:57

Bootstrap navbar not visible in IE8

1 Answers1