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     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    lt div class  container  gt       lt div class  navbar navbar-fixed-top  gt               lt div class  navbar-inner  gt                   lt div class  container  gt                       lt a class  brand  href   id home  gt OnniServer tk lt  a gt                       lt div class  nav-collapse  gt                       lt ul class  nav  gt                       lt li  lt  php if   isset   GET  id      amp  amp     GET  id      home     echo  class  active        gt  gt  lt a href   id home  gt Home lt  a gt  lt  li gt                       lt li  lt  php if   isset   GET  id      amp  amp     GET  id      donate     echo  class  active        gt  gt  lt a href   id donate  gt Donate lt  a gt  lt  li gt                       lt li  lt  php if   isset   GET  id      amp  amp     GET  id      about     echo  class  active        gt  gt  lt a href   id about  gt About lt  a gt  lt  li gt                       lt li  lt  php if   isset   GET  id      amp  amp     GET  id      staff     echo  class  active        gt  gt  lt a href   id staff  gt Staff lt  a gt  lt  li gt                       lt li  lt  php if   isset   GET  id      amp  amp     GET  id      vote     echo  class  active        gt  gt  lt a href   id vote  gt Vote lt  a gt  lt  li gt                       lt li class  dropdown  gt                           lt a href    class  dropdown-toggle  data-toggle  dropdown  gt Play now   lt b class  caret  gt  lt  b gt  lt  a gt                               lt ul class  dropdown-menu  gt                                   lt li gt  lt a href  minecraft  gt In browser lt  a gt  lt  li gt                                   lt li gt  lt a href  http   minecraft net  gt Buy it now lt  a gt  lt  li gt                                   lt li gt  lt a href     gt No link for crack lt  a gt  lt  li gt                               lt  ul gt                       lt  li gt                       lt li class  dropdown  gt                           lt a href    class  dropdown-toggle  data-toggle  dropdown  gt Perms for   lt b class  caret  gt  lt  b gt  lt  a gt                               lt ul class  dropdown-menu  gt                                   lt li gt  lt a href   id citizen  gt Citizen s  lt  a gt  lt  li gt                                   lt li gt  lt a href   id vip  gt VIP s  lt  a gt  lt  li gt                                   lt li gt  lt a href   id vipplus  gt VIP  s  lt  a gt  lt  li gt                                   lt li gt  lt a href   id modjr  gt Jr  Moderator s  lt  a gt  lt  li gt                                   lt li gt  lt a href   id mod  gt Moderator s  lt  a gt  lt  li gt                                   lt li gt  lt a href   id admin  gt Admin s  lt  a gt  lt  li gt                                   lt li gt  lt a href   id owner  gt Owner lt  a gt  lt  li gt                               lt  ul gt                       lt  li gt                       lt li class  dropdown  gt                           lt a href    class  dropdown-toggle  data-toggle  dropdown  gt Mail to   lt b class  caret  gt  lt  b gt  lt  a gt                               lt ul class  dropdown-menu  gt                                   lt li gt  lt a href  mailto onni bucht me com  gt Onni  server Owner  lt  a gt  lt  li gt                               lt  ul gt                       lt  li gt                       lt script gt                              dropdown-toggle   dropdown                        lt  script gt                       lt  ul gt                       lt  div gt                   lt  div gt               lt  div gt       lt  div gt       lt p gt  amp nbsp  lt  p gt       lt p gt  amp nbsp  lt  p gt       lt div class  hero-unit  gt           lt style  text css  gt           lt  style gt           lt  php         if    isset   GET  id      amp  amp    GET  id      home        isset   GET  id        include  home php               if   isset   GET  id      amp  amp     GET  id      donate     include  donate php               if   isset   GET  id      amp  amp     GET  id      about     include  about php               if   isset   GET  id      amp  amp     GET  id      staff     include  staff php               if   isset   GET  id      amp  amp     GET  id      vote     include  vote php               if   isset   GET  id      amp  amp     GET  id      citizen     include  permissions citizen html               if   isset   GET  id      amp  amp     GET  id      vip     include  permissions vip html               if   isset   GET  id      amp  amp     GET  id      vipplus     include  permissions vipplus html               if   isset   GET  id      amp  amp     GET  id      modjr     include  permissions modjr html               if   isset   GET  id      amp  amp     GET  id      mod     include  permissions mod html               if   isset   GET  id      amp  amp     GET  id      admin     include  permissions admin html               if   isset   GET  id      amp  amp     GET  id      owner     include  permissions owner html                 gt       lt  div gt   lt  div gt

User · Answer

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.

User · Answer

You need to put  lt  DOCTYPE HTML gt  in the first line of your html

User · Answer

Need to include these two scripts for IE   lt script src  http   oss maxcdn com libs html5shiv 3 7 0 html5shiv js  gt  lt  script gt   lt script src  http   oss maxcdn com libs respond js 1 4 2 respond min js  gt  lt  script gt

User · Answer

Please put the pages in localhost and try

User · Answer

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

User · Answer

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

User · Answer

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   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  utf-8  gt       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt       lt meta name  viewport  content  width device-width  initial-scale 1  gt       lt  -- HTML5 shim and Respond js for IE8 support of HTML5 elements and media queries -- gt       lt  -- WARNING  Respond js doesn t work if you view the page via file    -- gt       lt  -- if lt IE 9  gt         lt script src  https   oss maxcdn com html5shiv 3 7 2 html5shiv min js  gt  lt  script gt         lt script src  https   oss maxcdn com respond 1 4 2 respond min js  gt  lt  script gt       lt   endif -- gt   lt  head gt   lt body gt   lt  -- content -- gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

You can add the meta tag    lt meta http-equiv  X-UA-Compatible  content  IE edge    gt    A brief explanation on what it is and how it works is found on this link

User · Answer

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    lt meta http-equiv  X-UA-Compatible  content  IE 9  gt

User · Answer

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    lt  DOCTYPE html gt   lt meta http-equiv  X-UA-Compatible  content  IE edge  gt

User · Answer

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    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  utf-8  gt       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt       lt meta name  viewport  content  width device-width  initial-scale 1  gt   lt  head gt   lt body gt   lt  -- content -- gt   lt  body gt   lt  html gt

User · Answer

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

[twitter] How do I fix twitter-bootstrap on IE?

Examples related to twitter

Examples related to internet-explorer-9

Examples related to twitter-bootstrap