CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapinternet-explorer-8
user1880401
user1880401

Reputation:

Bootstrap 3 not working in IE8 (checked other answers)

I've seen the other stack overflow questions on this subject and made sure I've followed those answers but unfortunately it still won't work.

I have a bootstrap 3 theme which looks fine in all browsers apart from ie8. I've included respond.min.js and html5shiv.js on my hosting account (where all other CSS is) and in IE8 I can actually see the files, so the scripts are being loaded.

They're also being loaded after all my stylesheets before the closing </head> tag, any idea's what could be causing my bootstrap to not work on IE8? It looks like all media queries are working, apart from the ones that specify the width of the columns.

I really hope I'm looking into this much and it's a simple fix but it happens on another of my bootstrap 3 sites, thanks in advance.

<link href="http://alexn.co.uk/Lemans/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="http://alexn.co.uk/Lemans/css/append.css" rel="stylesheet" media="screen">
<link href="http://alexn.co.uk/Lemans/css/font.css" rel="stylesheet" media="screen">
<link href='http://fonts.googleapis.com/css?family=Signika:400,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://alexn.co.uk/Lemans/js/bootstrap.min.js"></script>

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

A live link to the site can be found at http://lemansfitness.co.uk

I should note that I'm hosting all this on tumblr.

Upvotes: 1

Views: 936

Answers (2)

Aron
Aron

Reputation: 3579

I just ran into a similar problem. As it turns out, the minified Bootstrap 3 css does not play nicely with Respond.js 1.4. Instead, you must use an earlier version of Respond.js (1.3 seems to work for me).

Naturally, you must also follow all of the steps set forth in the Bootstrap docs. In short:

  • Use respond js and shiv
  • Don't use CDN's, just use locally hosted files
  • Don't use @import or file://

Here's another description of the bug and short testing markup for it https://gist.github.com/outlast/8602357

Upvotes: 1

Christina
Christina

Reputation: 34642

BOOTSTRAP'S DOCS:

Respond.js and cross-domain CSS

Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

This means set up a proxy as per the Respond.js docs OR host your CSS with a relative path on your own server, don't use an absolute path to it.

Upvotes: 0

Related Questions