CODEWITHSUNDEEP
csstwitter-bootstrapinternet-explorer-8
user3120861
user3120861

Reputation: 185

Responsive Bootstrap page not working in IE8 despite implementing response.js and css3-mediaqueries.js

After struggling to get a Bootstrap responsive page to work in IE8, I've simplified it incredibly, creating a very basic page that should only display the size of the browser using the "visible" classes, but still cannot get the page to render properly in IE8. I've read where respond.js must be on the same subdomain as the CSS, and fixed that, but it still doesn't work. After much trial and error, reading through documentation (getbootstrap.com, responsejs.com, etc.), and reading some threads on stackoverflow, I thought I'd post my issue.

Here's the code, which is supposed to display the size of the browser, The page is hosted in a landing page, marketing automation program, called Eloqua, hence the strange and lengthy URLs for the CSS and JS files:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- Bootstrap -->
    <link href="http://images.response.test.com/Web/test/{08fa83ba-e64a-401e-a642-8bc74434d750}_bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="http://images.response.test.com/Web/test/{5cdf751f-5097-4163-a9f3-b03c33408410}_html5shiv.js"></script>
      <script src="http://images.response.test-mail.com/Web/test/{7caa6bb7-1d4d-422e-bfaa-e4f4afdb8da1}_respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>IE8 Test</h1>
    <p>The Bootstrap grid type should be displayed below: </p>
    <div class="container">
        <p class="visible-lg">Large grid is being displayed. The grid stacks horizontally &lt; 1200px. </p>
        <p class="visible-md">Medium grid is being displayed. The grid stacks horizontally &lt; 992px. </p>
        <p class="visible-sm">Small grid is being displayed. The grid stacks horizontally &lt; 768px. </p>
        <p class="visible-xs">Extra small grid is being displayed. This grid is always horizontal. </p>
    </div>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="http://images.response.test-mail.com/Web/test/{08fa83ba-e64a-401e-a642-8bc74434d750}_bootstrap.min.css"></script> 
    <script src="http://images.response.test-mail.com/Web/test/{4f3edd38-e24f-4f56-8336-dbb33cc5567b}_css3-mediaqueries.js"></script>
  </body>
</html>

Thanks for any help.

Upvotes: 1

Views: 1199

Answers (1)

Christina
Christina

Reputation: 34642

In the GetBootstrap.com docs it reads, essentially, that any css used by Respond.js must be a relative path from the root of the html document, so you can't use absolute paths in your css url OR you can set up a proxy as per the Respond.js documentation.

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.

DOCS: https://github.com/scottjehl/Respond

Upvotes: 2

Related Questions