Bootstrap panel showing left aligned in IE-8

Question

i have used Bootstrap panel for creating login form.

But when i check my ui in IE-8 it looks left centered also the glyphicon-icons also not showing. in other browser it looks perfect.

        <div class="message warning">
    <div class="col-md-6 col-md-offset-3 col-xs-6 col-sm-6>
     <div class="panel panel-default" >  
                    <div class="panel-heading" >
                        <span class="glyphicon  glyphicon-eye-open "></span> Login
                    </div>
         <div class="panel-body">
        <form class="form-horizontal" action="">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-4">Organisation Id</label>

                <div  class="col-xs-7 col-sm-7 col-md-7">
                    <div class="input-group">
                         <span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
                        <input type="email" class="form-control" id="inputEmail" require placeholder="Organisation Number" >
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-4">Username</label>

                <div  class="col-xs-7">
                    <div class="input-group">
                         <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                        <input type="email" class="form-control" id="inputEmail" require placeholder="Username" >
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-4">Password</label>
                  <div  class="col-xs-7">
                    <div class="input-group">
                         <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                        <input type="password" class="form-control" id="inputPassword" require placeholder="Password" >
                     </div>
               </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-4 col-xs-6">
                    <div class="checkbox input-group">
                        <label><input type="checkbox"> Remember me</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-4 col-xs-10">
                    <button type="submit" class="btn btn-primary">Login</button>
                      <!--<button type="submit" class="btn btn-primary">Cancel</button>  -->
                </div>
            </div>
        </form>
     </div>
     </div> 
    </div>  
    </div>

i have attached image so you can easily identified problem. enter image description here

possible duplicate of [IE8 issue with Twitter Bootstrap 3](http://stackoverflow.com/questions/17947182/ie8-issue-with-twitter-bootstrap-3) — Raptor, Jan 05 '15 at 10:15
my problem is layout is not visible in center and icons were also not visible. — Mitul Maheshwari, Jan 05 '15 at 10:16
no, it's different issue , as because i have used bootsrap-panel componant. @Raptor — Mitul Maheshwari, Jan 05 '15 at 10:17

bob · Answer 1 · 2015-01-05T11:46:53.783

This maybe caused by the page being served from the local file system.

Update: There maybe other reasons such as cross-domain issues when requesting your bootstrap css and js files from a cdn. The link below details further caveats when using Respond.js in your development vs production environments for IE8. Please note there was also some changes in v3.0.1 regarding the use of box-sizing: border-box; due to IE8 lack of full support

To solve this you need to view this over http, the responsive features will then appear as you expect in IE8 (Document Mode 8).

The bootstrap docs explain this is due to a browser security rules relating to respond.js.

i tried in live server also it's not working yet. Same look and feel. — Mitul Maheshwari, Jan 05 '15 at 13:22

score 0 · Accepted Answer · answered Jan 07 '15 at 13:33

0

i got the solution for this problem. i have added some extra css code, and it's working in IE-8 also.

.center {
 float: none;
 margin-left: auto;
 margin-right: auto;
}

  <div class="col-md-6 col-md-offset-3 col-xs-6 col-sm-6 center ">

answered Jan 07 '15 at 13:33

Mitul Maheshwari

2,647
4
24
38

Anyone encountering similar issues in future please see the initial comment by @Raptor and the linked question. Adding "center" class only fixed the typo in the code you supplied(line 2 - missing closing quotes). Correct ordering / use of your bootstrap.css, html5shiv.js and respond.js as well as location of these files (local vs cdn) will allow media queries in IE8 to _respond_ as you expect them. – bob Jan 12 '15 at 00:16

Bootstrap panel showing left aligned in IE-8

2 Answers2