The navbar doesn't seem to be working properly in IE. Here's a screenshot of it in IE.
I've been looking through many bootstrap-topics on stackoverflow.com, but the "help" they give people doesn't work for me.
After body tag:
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="?id=home">OnniServer.tk</a>
<div class="nav-collapse">
<ul class="nav">
<li <?php if ((isset($_GET['id'])) && ($_GET['id'] == home)) { echo "class='active'"; } ?>><a href="?id=home">Home</a></li>
<li <?php if ((isset($_GET['id'])) && ($_GET['id'] == donate)) { echo "class='active'"; } ?>><a href="?id=donate">Donate</a></li>
<li <?php if ((isset($_GET['id'])) && ($_GET['id'] == about)) { echo "class='active'"; } ?>><a href="?id=about">About</a></li>
<li <?php if ((isset($_GET['id'])) && ($_GET['id'] == staff)) { echo "class='active'"; } ?>><a href="?id=staff">Staff</a></li>
<li <?php if ((isset($_GET['id'])) && ($_GET['id'] == vote)) { echo "class='active'"; } ?>><a href="?id=vote">Vote</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Play now: <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="minecraft">In browser</a></li>
<li><a href="http://minecraft.net">Buy it now</a></li>
<li><a href="#">No link for crack</a></li>
</ul>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Perms for: <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="?id=citizen">Citizen(s)</a></li>
<li><a href="?id=vip">VIP(s)</a></li>
<li><a href="?id=vipplus">VIP+(s)</a></li>
<li><a href="?id=modjr">Jr. Moderator(s)</a></li>
<li><a href="?id=mod">Moderator(s)</a></li>
<li><a href="?id=admin">Admin(s)</a></li>
<li><a href="?id=owner">Owner</a></li>
</ul>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Mail to: <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="mailto:[email protected]">Onni (server Owner)</a></li>
</ul>
</li>
<script>
$('.dropdown-toggle').dropdown()
</script>
</ul>
</div>
</div>
</div>
</div>
<p> </p>
<p> </p>
<div class="hero-unit">
<style "text/css">
</style>
<?php
if (((isset($_GET['id'])) &&($_GET['id'] == home)) || (!isset($_GET['id']))) { include('home.php'); };
if ((isset($_GET['id'])) && ($_GET['id'] == donate)) { include('donate.php'); };
if ((isset($_GET['id'])) && ($_GET['id'] == about)) { include('about.php'); };
if ((isset($_GET['id'])) && ($_GET['id'] == staff)) { include('staff.php'); };
if ((isset($_GET['id'])) && ($_GET['id'] == vote)) { include('vote.php'); };
if ((isset($_GET['id'])) && ($_GET['id'] == citizen)) { include('permissions/citizen.html'); };
if ((isset($_GET['id'])) && ($_GET['id'] == vip)) { include('permissions/vip.html'); };
if ((isset($_GET['id'])) && ($_GET['id'] == vipplus)) { include('permissions/vipplus.html'); };
if ((isset($_GET['id'])) && ($_GET['id'] == modjr)) { include('permissions/modjr.html'); };
if ((isset($_GET['id'])) && ($_GET['id'] == mod)) { include('permissions/mod.html'); };
if ((isset($_GET['id'])) && ($_GET['id'] == admin)) { include('permissions/admin.html'); };
if ((isset($_GET['id'])) && ($_GET['id'] == owner)) { include('permissions/owner.html'); };
?>
</div>
</div>
This question is related to
twitter
internet-explorer-9
twitter-bootstrap
The answer is
Not sure if it will fix your particular issue but worth sharing anyway.
I had issues with twitter boot strap in IE. No rounded corners. Navigation menu not collapsing. Spans not sitting in correct location, even some images not displaying.
Strangely, site works okay in IE when run through visual studio debugger, its once deployed to a server that the problem occurs.
Try using IE developer tools (F12 is keyboard shortcut) Check your browser mode and document mode. (its at the top along side the menu bar)
Problem happened for me as document was IE7 and browser was IE10 compatibility. I added a http header in IIS: Name X-UA-Compatible Value IE=EmulateIE9
Now the page loads as document - IE9 standards, browser IE10 compatibility and all the previous issues are resolved.
Hope this helps.
-tessi
If you are within the intranet and the settings are set to compatibility mode, then proper doctypes and respond.js is not enough.
Please refer to this link for more info: Force IE8 or IE9 document mode to standards and see Ralph Bacon's answer.
It would be same as this:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I had the same problem and none of the other answers worked. My problem was a weird one where IE9 wasn't able to connect to any https sites, therefore since I was using the online maxcdn bootstrap files like,
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
none of that css and js was being applied. Going into the Advanced tab of Internet Explorer options I verified that not having "use TLS 1.0" checked caused the problem with https sites and files, and once checked my bootstrap page was formatted as expected.
As others have noted use the proper doctype below (maybe a valid html4 doctype will work, but if you're starting anew might as well use html5.)
The respond js and html5 shim (if using that) are for IE8. IE9 doesn't need that. The code below uses the standard method of targeting ie8 and below.
--Art
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
</head>
<body>
<!-- content -->
</body>
</html>
I had this problem recently. I made these settings change. And it worked for me. !
Please put the pages in localhost and try
I was having a similar issue.
In my case, looking at the CSS i found a position: initial.
After some research, i found that mobile IE browser doesn't supports it.
I simply put a position: relative instead and everything worked fine.
Just for completeness - it's worth noting that with Bootstrap 3, as per the docs, ensure the following structure in your page. It solved issues I was having with IE9 and v3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- content -->
</body>
</html>
If you are using responsive layout, try including this js on your code: https://github.com/scottjehl/Respond
You need to put <!DOCTYPE HTML> in the first line of your html.
You can add the meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
A brief explanation on what it is and how it works is found on this link.
Need to include these two scripts for IE
<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
Internet Explorer has a maximum number of code lines for style sheet recognition.
This is Bootstrap navbar style rule that set the float property for navbar items:
.navbar-nav > li {
float: left;
}
That rule in Bootstrap 3 (probably in early versions too) is on line 5247.
As it says here: Internet Explorer's CSS rules limits, a sheet may contain up to 4095 lines.
I had similar problems as well. I put the following line of code in the head of my layout file and all seems to be fine.
<meta http-equiv="X-UA-Compatible" content="IE=9">
Source: Stackoverflow.com