Bootstrap Nav Bar not working on ie

Question

I created a website using bootstrap, mainly for learning purposes. I am using the <div class="navbar navbar-inverse">. I put my website onto a server and asked some of my buddies to check it out. Everyone called and said it looked great but then one said everything was jumbled around when he used Internet Explorer (don't know exactly what version but definitely an older one) I tried it out on internet explorer and the nav bar was jumbled.

The List items were not inline. The bar was twice as big as it should be, and the text was underlined and purple...

I have been trying to fix this issue for the past couple of days but I just can't. How should I go about making my website act similar enough in every browser so it doesn't look broken?

It is really frustrating, and I am ready to accept any sources for 1. learning about this and 2. fixing this issue.

Thanks!

Code for HTML:

<html>
<head>
    <!--[if lt IE 9]-->
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <!--[endif]-->
    <title> College GPA </title>
    <link rel = 'stylesheet' type = 'text/css' href = "assets/css/style.css">
    <link rel = 'stylesheet' type = 'text/css' href = 'assets/css/bootstrap.min.css'>

    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

    <script src = "assets/js/dropdown.js">
    </script>
    <script> 
        $(".dropdown-toggle").dropdown();
    </script>

</head>


<body>
    <div class="navbar navbar-inverse">
        <div class="navbar-inner">
            <div class="container">

              <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>

              <!-- Be sure to leave the brand out there if you want it shown -->
              <a class="brand" href="#" style = "font-size: 23px;">LOGO</a>

              <!-- Everything you want hidden at 940px or less, place within here -->
             <div class="nav-collapse collapse">
                <!-- .nav, .navbar-search, .navbar-form, etc -->
                <ul class = "nav">
                    <li class = 'active'> <a href = "#"> Home </a></li>
                    <li class = 'dropdown'> 
                        <a href = "#" class = 'dropdown-toggle' id = "dLabel" data-toggle = "dropdown">Drop Down <b class = 'caret'> </b></a>
                        <ul class = 'dropdown-menu' role = 'menu' aria-labelledby="dLabel">
                            <li> <a href = "#">Drop Down 1 </a> </li>
                            <li> <a href = "#">Drop Down 2 </a> </li>
                            <li> <a href = "#"> Drop Down 3</a> </li>
                        </ul>
                    </li>
                    <li class = 'dropdown'> 
                        <a href = "#" class = 'dropdown-toggle' id = "dLabel" data-toggle = "dropdown">Drop Down  <b class = 'caret'> </b></a>
                        <ul class = 'dropdown-menu' role = 'menu' aria-labelledby="dLabel">
                            <li> <a href = "#"> Drop Down 1   </a> </li>
                            <li> <a href = "#"> Drop down 2 </a> </li>

                        </ul>
                    </li>

                </ul>
         </div>

    </div>
  </div>
    </div>


    <div class = 'wrapper'>



    </div>


</body>

</html>

Just an FYI: if you want to get a good idea of what your users will typically see across a wide range of systems, check out http://browsershots.org/ - it's not perfect, but I've found it useful. — Tieson T., Jan 26 '13 at 02:44

score 2 · Accepted Answer · answered Jan 26 '13 at 00:53

2

It doesn't help much that you don't know what version he was using... perhaps you should ask him? If it's old enough it's possible that bootstrap just doesn't support it (IE < 7).

If that's the case, just ignore it. Few companies still support older versions of IE, and those that do tend to have a specific reason.

If you're looking for a good way to deal with old browsers, perhaps you could display an option to upgrade to a newer browser, and a warning that it may not display properly in their browser.

http://gs.statcounter.com/ is a good source to get usage statistics of older browsers. From there you can decide if you really want to support them.

Finally, you can always look at analytics for your site (if you happen to have an existing one with traffic) to see if maintaining support for an older browser is worth your time.

answered Jan 26 '13 at 00:53

Nick Mitchinson

5,452
1
25
31

My buddy is using IE 7. I just don't feel safe because I also showed him another site which are just a bunch of dividers and all those are showing up poorly as well. I feel like something is wrong with my code. – Wp3Dev Jan 26 '13 at 00:57
Because I look at other websites (big ones) and they all seem to be happily working on all browsers, looking very similar in each one... Any recommendations on where I can learn that? – Wp3Dev Jan 26 '13 at 01:05
Mhmm something you can try (I can't guarantee that it will work) would be to add the html5 doctype to the top of the document ( ). You can read more about that here: http://stackoverflow.com/questions/1570418/if-i-use-html-5s-doctype-what-will-happen – Nick Mitchinson Jan 26 '13 at 01:05
I will check that out.. And as for Bootstrap.. Are there any other great front-end frameworks that are battle tested on many browsers? – Wp3Dev Jan 26 '13 at 01:12
Great ty for the help! Seems I just need to learn more about coding my css in a way to make it compatible lol – Wp3Dev Jan 26 '13 at 01:19

Bootstrap Nav Bar not working on ie

1 Answers1