Bootstrap 3 - Container stretched on IE8

Question

I am writing HTML for a page and have used bootstrap 3 as well. The page appears to be fine in FF, Chrome, IE9 but its not working properly in IE8, IE7.

Problem: The main content seems to be stretched fully across the page, i.e. behaves like fluid where as in other browsers works fine.

Things I have tried: As given in other forums, I tried including respond.js, meta tag as in below code ( "X-UA-Compatible" content="IE=edge"), HTML5shiv but nothing seems to work. I read that bootstrap 3 doesnt support IE7 officially but even IE8 gives this problem. It looks like the container class is not applied to IE8/7.

Can anyone please help on this? Below is the HTML for that. Also, its on fiddle - http://jsfiddle.net/CPaDb/2/

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<div class="container">
    <div class="logo-cont">
        <a href="home.html" class="logo-link></a>
    </div>

    <div class="main-cont">
        <div class="site-box-cont">
            <ul class="site-box-list clearfix">
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
            </ul>

        </div>
    </div>
</div>
<script language="javascript" type="application/javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" type="application/javascript" src="js/bootstrap.min.js"></script>
<script language="javascript" type="application/javascript" src="js/respond.min.js"></script>
</body>
</html>

CSS

.logo-cont {padding:35px 0 35px 250px;}
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; }

.main-cont {background:#2d3a42;}
.site-box-cont {width:670px; margin:0 auto; padding:150px 0}
.site-box-list li {float:left; margin:0px 15px 15px 0px;}
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;}
.site-box:hover {background:#acd037;}

I've had this problem with even Bootstrap 2. Eventually I just added an IE7/8 only stylesheet and set the body width to 940px — Bojangles, Sep 09 '13 at 21:07

score 3 · Answer 1 · answered Sep 09 '13 at 21:03

There are a number of issued going on... among them, you're using the XHTML 1.0 doctype, instead of the HTML5 type; you're missing a closing quote mark on the "home.html" link.

Since JSFiddle is not compatible with IE8 testing, I can't post a JSFiddle demo. But I have IE8 and tested the following code in IE8, FF17 and Chrome 29. Let me know if you need anything further or have any questions.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; 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 Sample</title>

<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
.logo-cont {padding:35px 0 35px 250px;}
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; }

.main-cont {background:#2d3a42;}
.site-box-cont {width:670px; margin:0 auto; padding:150px 0}
.site-box-list li {float:left; margin:0px 15px 15px 0px;}
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;}
.site-box:hover {background:#acd037;}
</style>
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div class="container">

    <div class="logo-cont">
        <a href="home.html" class="logo-link"></a>
    </div>

    <div class="main-cont">
        <div class="site-box-cont">
            <ul class="site-box-list clearfix">
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
            </ul>

            </div>
        </div>
</div>

</body>
</html>

What I realized was that it was all kind of related to respond.js not working. It was required to make media queries work in IE8, and it was not working locally, but running on localhost solved the problem. But I see your inputs useful as well, took those in and its all set. Thank you. — whyAto8, Sep 11 '13 at 06:50
Thanks, @whyAto8. Unfortunately Respond.js doesn't work locally due to security restrictions in the browser, as we [discussed on another thread](http://stackoverflow.com/questions/18544310/respond-js-not-working-locally-support-for-media-queries-in-ie8/18708054). PS: If my answer above did in fact answer your question, could you should probably mark it as an acceptable answer? — Phil Nicholas, Sep 11 '13 at 16:48

Bootstrap 3 - Container stretched on IE8

1 Answers1