Bootstrap 3 issue with IE8

Question

This question has already been asked by somebody else,i tried out the suggestions there,but it didn't worked out. Link

So here is my problem,I created a simple login page using Bootstrap 3,it works fine in all browsers except IE8,the whole page stretches to full width in IE8 . Another problem is that,a scroll bar appears at the bottom of the page in ALL browsers. Screenshot of scrollbar issue http://i42.tinypic.com/sqgh82.png

HTML

<!DOCTYPE html>
<html>
<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>Bootstrap 3</title>

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" type="text/css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>

<style>
body{
    background-color:#f2f2f2;
}
</style>

</head>

<body>


<div class="row">

<div id="login_panel_alerts" class="col-lg-4 center">
    <div class="alert alert-danger">Something went wrong!<button type="button" class="close" data-dismiss="alert">&times;</button></div>
    <div class="alert alert-success">Success!</div>
</div>

    <div id="login_panel" class="col-lg-3 center modal-content">

    <form>
    <fieldset>
        <legend>Login</legend>

        <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control form-inline" placeholder="Enter username">
        </div>

        <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" placeholder="Enter password">
        </div>

        <div class="form-group">
        <button type="button" class="btn btn-primary">Login</button>
        <button type="button" class="btn btn-default">Reset</button>
        <button type="button" class="btn btn-link">Forgot password?</button>
        </div>


    </fieldset>
    </form>

    </div><!--login_panel-->

</div>


</body>
</html>

http://jsfiddle.net/gpKLz/ .center class is used to center an element. — majorhavoc, Aug 21 '13 at 05:24

score 0 · Answer 1 · answered Aug 21 '13 at 05:22

0

Did you try giving relative widths instead of absolute ones in your css for the scrollbar issue?

Here's a good article on the same.

answered Aug 21 '13 at 05:22

Vandesh

4,638
1
20
30

score 0 · Accepted Answer · answered Aug 21 '13 at 05:25

0

<style>
body
{
    background-color:#f2f2f2;
    overflow-x:  hidden;
}
.center
{
    float: none; 
    margin-left: auto;
    margin-right: auto;
}
</style>

Try this.

answered Aug 21 '13 at 05:25

Leo T Abraham

2,371
4
22
52

overflow-x: hidden; – majorhavoc Aug 21 '13 at 05:33
It will not create any problem. – Leo T Abraham Aug 21 '13 at 05:34
That solved the scrollbar issue,still waiting for a solution for IE8 issue. – majorhavoc Aug 22 '13 at 03:49

DeadlyChambers · Answer 3 · 2014-03-31T19:55:24.033

Yeah you should try swapping out your classes in lower versions

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script type="text/javascript">
    $(".col-lg-3).addClass("col-md-3").addClass("col-xs-3");
    $(".col-lg-4).addClass("col-md-4").addClass("col-xs-4");
</script>
<![endif]-->

I did something similar to this but I changed from col-md-10 to col-md-9. The way I understand it is as the screen shrinks past a certain pixel width (I believe @media contains this value) col-lg-4 goes down to col-md-8 then to col-xs-12, buut if you specify what you want the width of this to be in relation to the screen as it gets smaller. You should see about the same look for your elements.

Bootstrap 3 issue with IE8

3 Answers3