I created a website using bootstrap, mainly for learning purposes. I am using the . 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:\[code\]<html><head> <!--[if lt IE 9]--> <script src="http://stackoverflow.com//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <!--[endif]--> <title> College GPA </title> <link rel = 'stylesheet' type = 'text/css' href = "http://stackoverflow.com/questions/14532547/assets/css/style.css"> <link rel = 'stylesheet' type = 'text/css' href = 'http://stackoverflow.com/questions/14532547/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 = "http://stackoverflow.com/questions/14532547/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="http://stackoverflow.com/questions/14532547/#" 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 = "http://stackoverflow.com/questions/14532547/#"> Home </a></li> <li class = 'dropdown'> <a href = "http://stackoverflow.com/questions/14532547/#" 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 = "http://stackoverflow.com/questions/14532547/#">Drop Down 1 </a> </li> <li> <a href = "http://stackoverflow.com/questions/14532547/#">Drop Down 2 </a> </li> <li> <a href = "http://stackoverflow.com/questions/14532547/#"> Drop Down 3</a> </li> </ul> </li> <li class = 'dropdown'> <a href = "http://stackoverflow.com/questions/14532547/#" 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 = "http://stackoverflow.com/questions/14532547/#"> Drop Down 1 </a> </li> <li> <a href = "http://stackoverflow.com/questions/14532547/#"> Drop down 2 </a> </li> </ul> </li> </ul> </div> </div> </div> </div> <div class = 'wrapper'> </div></body></html>\[/code\]
Bootstrap Nav Bar not working on ie
- Thread starter Milanbre
- Start date