CODEWITHSUNDEEP
twitter-bootstrapinternet-explorer-8
Birdie Golden
Birdie Golden

Reputation: 571

Bootstrap IE 8 and under

I've been reading for days on ways to fix IE8 and under for Bootstrap.

The Site: www.sevensage.com/hueler

It works great in all other versions and all other browsers. As soon as you hit IE8, it falls apart and reverts to a one column, mobile view. Also, am not viewing this site locally, it is on my server.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/hueler-styles.css">
<link rel="stylesheet" type="text/css" href="css/component.css">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/modernizr.custom.js"></script>

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <script src="js/modernizr.custom.js"></script>
  <link rel="stylesheet" href="css/bootstrap-ie.css">
<![endif]-->

Upvotes: 0

Views: 410

Answers (2)

Birdie Golden
Birdie Golden

Reputation: 571

So it appears linking to:

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">

WILL NOT WORK for IE8, particularly if you're working on a cross-domain (site within your root site).

You MUST link to a local (mine is un-minifed) version of bootstrap CSS and respond.js or use the method described above by one of the commentators. 

<link rel="stylesheet" href="css/bootstrap.css"> (linking directly)

Another tip, just in case you're having issues with how the styles load - make sure you load boostrap.css BEFORE you custom styles.

Cheers!

Upvotes: 0

joshhunt
joshhunt

Reputation: 5335

Unfortunately respond.js doesn't work when the css file is on a different domain. However you can set it up so that it does work and it's not too difficult. Have a look at these instructions:

Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.

See cross-domain/example.html for a demo:

Upload cross-domain/respond-proxy.html to your external domain Upload cross-domain/respond.proxy.gif to your origin domain Reference the file(s) via element(s): 

<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>

From the Github repository. This method works with the Bootstrap CDN.

Upvotes: 2

Related Questions