Menu
I tried to use the bootstrap template to generate a navbar on my aspnet mvc application.
Everything works fine on Firefox and Chrome, but on IE my menu is transparent :
I checked, I have the <!DOCTYPE html> at the begining of my layout.
I also tried <meta http-equiv="X-UA-Compatible" content="IE=edge">
I tried to play with the F12 menu and compatibility mode, without success.
Any other clue ?
Thanks
Edit: here is the generated code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test • Home</title>
<link href="bootstrap.css" rel="stylesheet"/>
<link href="bootstrap-theme.css" rel="stylesheet"/>
<link href="toastr.css" rel="stylesheet"/>
<script src="jquery-2.0.3.js"></script>
<script src="jquery-ui-1.10.3.js"></script>
<script src="angular.js"></script>
<script src="angular-resource.js"></script>
<script src="bootstrap.js"></script>
<script src="toastr.js"></script>
<!--[if lt IE 9]> HTML5Shiv
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body style="padding: 40px;">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<a class="navbar-brand" href="/">Test</a>
<li><a href="/">Home</a></li>
<li class="nav-divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/Page1/">Page1</a></li>
<li><a href="/Page2/">Page2</a></li>
<li><a href="/Page3/">Page3</a></li>
<li><a href="/Page4/">Page4</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
715
I also had the similar problem in IE9 as I started to work on a new project. Looking through the browser support section in http://getbootstrap.com, you need to add respond.js in the IE code block and also need to make sure it works from IE 9 and older browsers.
So the [if IE] block should look something like this.
<!--[if lte IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>
<![endif]-->
Notice the "lte" in the [if IE] block, which means IE <= 9, whereas "lt" meant IE < 9.
Hope this helps.
Update: I found an alternative solution to you problem. The bootstrap-theme.css used filter property on navbar which seems to making issues on IE9 and IE8. So you can just disable them by commenting them out. Then the dropdown menu will show up.
Look for 'filter' in .navbar & .navbar-inverse and disable them. This will ofcourse turn off gradients for IE9 and older.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
