How do I fix twitter-bootstrap on IE?

Question

The navbar doesn't seem to be working properly in IE. Here's a screenshot of it in IE.

screenshot

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:onni.bucht@me.com">Onni (server Owner)</a></li>
                            </ul>
                    </li>
                    <script>
                        $('.dropdown-toggle').dropdown()
                    </script>
                    </ul>
                    </div>
                </div>
            </div>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</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>

Have you tried the guidance in this question ? http://stackoverflow.com/questions/9780464/twitter-bootstrap-nav-bar-issues-in-internet-explorer — Russ Clarke, Jun 25 '12 at 00:23
Look at Facuu7's answer. Make sure the first line of your html page is — Gazzini, Oct 18 '12 at 05:16
@OnniBucht please accept the [answer below](http://stackoverflow.com/a/12394509/1983495) it appears to be what you was looking for. — Iharob Al Asimi, Jul 15 '15 at 00:23

Facundo Pedrazzini · Answer 1 · 2012-09-12T19:04:03.980

65

You need to put <!DOCTYPE HTML> in the first line of your html.

edited Sep 12 '12 at 19:04

answered Sep 12 '12 at 18:53

Facundo Pedrazzini

1,486
14
22

This works. I had an html comment as the first line, and bootstrap was broken. I deleted it, and now it works great. Thanks! – Gazzini Oct 18 '12 at 05:15
2

Yes i can confirm, adding works. I had it missing and after adding DOCTYPE it worked fine. – codingbbq Nov 07 '12 at 10:06
I already put – onni82 May 23 '13 at 19:59
1

@OnniBucht: it's not the same string, stands for html5 – Oerd May 31 '13 at 14:04
1

I recommend further readings about the important of the DTD declaration http://www.w3.org/QA/Tips/Doctype and their relation to the browsers processing the HTML content. – Bassem Jul 06 '13 at 18:49
I am using bootstrap 3. It did not fix mine. When I do view source, it is showing as the first thing on the page. – johnny Jun 05 '15 at 19:12

score 51 · Answer 2 · edited May 23 '17 at 12:25

51

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.

edited May 23 '17 at 12:25

Community

1
1

answered Jun 05 '13 at 14:15

tux

1,001
10
14

This did the trick for me. When I monitored things with the developer tools I noticed it was reporting to run in compatibility mode while deployed on the "intranet" but not on my development machine. – Chris Townsend Jul 25 '13 at 18:20
2

This worked for me, but now the menus are broken using Bootstrap 3. This at least is one step closer (the didn't work for me.) – Chris Sep 03 '13 at 14:30

score 19 · Answer 3 · answered Jun 25 '14 at 23:59

19

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>

answered Jun 25 '14 at 23:59

SteveChapman

2,875
1
18
33

Thanks a lot..this helped – arn-arn Mar 06 '15 at 17:33

score 6 · Answer 4 · answered Feb 13 '13 at 01:52

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

This was the best for me. Thanks. – johnny Jun 05 '15 at 21:08 — johnny, Jun 05 '15 at 21:08
This is not an answer. – Iharob Al Asimi Jul 15 '15 at 00:23 — Iharob Al Asimi, Jul 15 '15 at 00:23

score 6 · Answer 5 · answered Dec 21 '14 at 04:54

6

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>

answered Dec 21 '14 at 04:54

Palanikumar

6,172
4
34
47

Bhai Kadak! It Works!! Great! – Piyush Feb 25 '15 at 09:02
I tought this is only for older than IE9, so for IE8 and IE7 – Hrvoje Golcic Jan 07 '16 at 10:02

score 4 · Answer 6 · edited May 23 '17 at 12:17

4

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">

edited May 23 '17 at 12:17

Community

1
1

answered Jul 14 '15 at 07:12

Emperor Krauser

158
1
7

score 3 · Answer 7 · answered Mar 26 '15 at 05:14

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>

here you are the last answer and after hours, your solution is what helped me. Not sure when that box was unchecked or if I did it or just crappy IE, but that was it. much thanks!! — Norman Bird, Apr 02 '15 at 23:57
Same thing. I enabled TLS 1, and said "Ok" to an IE 9 security certificate warning. Previously, all Bootstrap dropdowns were unresponsive. This made them work in both IE8 and IE9. — Chris Cober, Jun 09 '16 at 16:25

score 3 · Answer 8 · answered Jun 11 '15 at 23:11

3

I had this problem recently. I made these settings change. And it worked for me. !

verify these settings

answered Jun 11 '15 at 23:11

chineerat

105
2
12

score 2 · Answer 9 · edited May 23 '17 at 12:17

2

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.

edited May 23 '17 at 12:17

Community

1
1

answered Oct 23 '13 at 14:57

Guzman Iglesias

89
1

score 1 · Answer 10 · edited Oct 18 '13 at 14:13

1

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">

edited Oct 18 '13 at 14:13

kleopatra

49,346
26
88
189

answered Oct 18 '13 at 14:08

Jason

147
1
2
11

score 1 · Answer 11 · answered Aug 28 '15 at 04:42

1

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.

answered Aug 28 '15 at 04:42

Renato Oliveira

434
4
8

score 0 · Answer 12 · answered Apr 18 '13 at 12:15

0

If you are using responsive layout, try including this js on your code: https://github.com/scottjehl/Respond

answered Apr 18 '13 at 12:15

rizidoro

11,367
16
53
84

score -1 · Answer 13 · answered May 06 '18 at 07:13

-1

Please put the pages in localhost and try

answered May 06 '18 at 07:13

RiyAs MuhaMmed

17
7

most probably he is loading from desktop. CSS will ignored due to mime type mismatch. – RiyAs MuhaMmed May 06 '18 at 07:48

How do I fix twitter-bootstrap on IE?

13 Answers13