35

For some reason it appears that respond JS isn't working. I am using Media Queries in IE 8 to change background images for various size monitors. In IE 8 there is no background, just a solid color.

The code looks like this: 

<!--[if lt IE 9]>
 <script type="text/javascript" src="/js/html5-shiv.min.js"></script>
 <script type="text/javascript" src="/js/respond.min.js"></script>
<![endif]-->

The Media Query looks like this: 

@media (min-width:769px) and (max-width:1366px){
 html, body{
   background: url(/images/backgrounds/1366-bg.jpg)  no-repeat center top fixed #190303;
   background-size:100% auto;
 }
}

Is there a reason the above code would not work in IE 8? Is there another JS that I should try to use to make IE 8 Media Queries Work?

Note: It appears that the html5-shiv does work. I am testing on a live web server.

L84
  • 45,514
  • 58
  • 177
  • 257
  • I have the same problem, I have tried two test pages, one is linked through the respondjs repo: http://chrisjacob.github.com/Respond/ and http://scottjehl.github.com/Respond/test/test.html . Both test pages fail in IE8, it does not seem this works?? (The guys who launched the "mobile first fashion" didn't think of this.) – Kev Mar 30 '13 at 18:19
  • 6
    ok forget what I said, it works actually. The problem was from a security option of IE8 that was activated on my dev computer. I think it prevents js execution. Maybe you have this too. It's in tools, internet options, security, security level (I unchecked "enable protected mode"). This also shows a very simple problem with this technique if js is not available. – Kev Mar 30 '13 at 18:40
  • @Lynda .. have you figured this out ? .. Do you have your own solution ? – matzone Sep 20 '13 at 11:14
  • @matzone - See my answer I just posted that solved my problem. – L84 Sep 21 '13 at 01:11
  • @Amida I had the same problem, and disabled the security options and it started working. Although, what's the point in using the script if you have to disable security. – Xarcell Oct 26 '13 at 17:40
  • I also just realized, resetting your IE settings to default will work better too. It would also be recommended over disabling security altogether. – Xarcell Oct 26 '13 at 17:50

20 Answers20

90

Same problem. I found out it's my loading sequence problem, because I write CSS inline and then I call respond js script, so it looks like

<script type="text/javascript" src="js/respond.min.js"></script>

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

It should be

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

<script type="text/javascript" src="js/respond.min.js"></script>

ALWAYS link stylesheets or write inline CSS before js scripts!

Wen
  • 2,227
  • 3
  • 24
  • 31
  • should this work also with IE11 Developer mode-> Document mode = 8 ? I'm unable to get it working there. In the **head** I have: ` ` in **body**: ` ` – Kaarel Apr 17 '14 at 08:37
  • @Kaarel Kont-Kontson I didn't try that, but you could view source to see the CSS and JS loaded or not. Did you load respond.js? – Wen Apr 18 '14 at 01:32
  • This worked for me. I had the script at the top of all my other scripts and links. I moved it to the bottom and bam, it worked. – postelrich Jul 13 '15 at 20:12
13

It could be because you're hosting your CSS on a subdomain or CDN.

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
R Burchall
  • 131
  • 1
  • 2
  • 1
    Worth mentioning that instructions for setting up respond.js with a CDN can be found on their github page here: https://github.com/scottjehl/Respond#cdnx-domain-setup – Sean Adkinson Jan 19 '15 at 20:14
8

I was able to make this work, but I had to insert the script in the body tag. 

<head>
    <!-- Code -->
</head>
<body> 
    <!--[if lt IE 9]>
        <script type="text/javascript" src="/js/respond.min.js"></script>
    <![endif]-->

    <!-- Site Code -->
</body>

I am unsure why this works, but it solved my problem.

Please note: See Wen's answer as the respond.js should come after your CSS. In my situation it was after the CSS, but it would not work in the head for some reason. When inserted into the body it worked as intended.

Community
  • 1
  • 1
L84
  • 45,514
  • 58
  • 177
  • 257
  • 2
    Thank you — this gave me the clue to my problem. I had first declared my ` – Jeremy Visser Dec 31 '13 at 12:13
  • I didn't vote on this, but perhaps because you don't give an explanation so therefore it's difficult to tell when your solution is applicable. Also, if you've reviewed Wen's answer, you can see the reason it didn't work was because respond.js MUST BE after the css that contains @media queries. You could put the script tag back in head as long as you assured it came after the stylesheets. Downvotes are given to indicate an answer isn't one that people should use or that doesn't provide value. Hopefully my explanation has helped. – Mikezx6r Apr 01 '14 at 12:48
  • 1
    @Mikezx6r - It just really bugs me when people down vote without a comment regardless of the reason for the down vote. If someone down votes a question/answer they should say why so one can improve the question/answer. As FYI: In my situation respond.js *was* after the CSS. I edited question/answer to reflect this. It just wouldn't work in the head in my case for some reason. Since this question I have started using Foundation by Zurb and dropped IE 8 support. – L84 Apr 01 '14 at 16:12
  • @Lynda - That's okay Lynda. The reason we do this is help people fix their problem and save their time. Could you please mark my answer is correct answer? In this way, people can easy find the right answer and won't give you down vote any more. – Wen Apr 01 '14 at 21:55
  • @Lynda was it definitely loading after the css in the head when you inspect the source? I'm using a framework right now that generates the content of the head using jsps so there is always some additional css loaded just before the closing head tag, so I might have to go with the body option too (even though I want to avoid that) – br3w5 Mar 10 '15 at 14:47
  • Just adding to this, I had mine loading in the head in the correct order and it wasn't working, moving to the body works which is annoying since I want to try keep all my scripts bundled. Guess conditional comments should help to prevent other browsers even asking for it. – EJanuszewski Aug 03 '15 at 09:31
7

Respond.JS, which is what Bootstrap uses to enable media queries in Internet Explorer 8, does not process @import files.

From the GitHub repository: Respond.js doesn't parse CSS referenced via @import, nor does it work with media queries within style elements, as those styles can't be re-requested for parsing.

I had to load the bootstrap.css and any CSS that contains media queries in the header

<link href='css/bootstrap.min.css' rel='stylesheet' type='text/css' media='all' />
<link href='css/media.css' rel='stylesheet' type='text/css' media='all' />

The following import method does NOT work:

@import "bootstrap.min.css";
@import "media.css";
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
hsobhy
  • 1,493
  • 2
  • 21
  • 35
  • 1
    I had a similar problem with respond.js not working with a Wordpress theme because it uses @import to include the CSS. I found this page (http://davekiss.com/ie8-respond-js-and-wordpress/) that mentioned not to do that and to make sure you use a `` tag. – Dan Dyer Apr 13 '14 at 11:48
  • Respond.js notes right in the [README](https://github.com/scottjehl/Respond#support--caveats) that it does not work on files brought in via `@import`, and Bootstrap uses Respond.js to enable media queries for IE8. I wish I had read that recently, would've saved me some time today tracking this issue down. – LocalPCGuy Apr 22 '14 at 23:00
3

Make sure you are using a localhost or web server. "Due to security restrictions, some browsers may not allow this script to work on file:// urls (because it uses XMLHttpRequest). Run it on a web server."

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Peter_B.
  • 31
  • 1
  • True, if you read the last sentence on my question you see I am testing on a live web server, however, this may be useful for others. – L84 Aug 20 '13 at 22:20
  • I was running into this issue and it was the the solution for me. I hope it helps someone else. I used css3-mediaqueries.js as well. – Peter_B. Aug 24 '13 at 20:08
  • I would have to agree, that it runs on localhost or web server. I tried every possible thing with respond.js as given in forums, but nothing worked, but localhost made it working. – whyAto8 Aug 31 '13 at 06:33
2

The best practice is to include html5shiv.js and respond.js and make sure to run in a localhost, so it will work fine.

<!--[if lt IE 9]>

    <script src="js/html5shiv.js"> </script>
    <script src="js/respond.min.js"> </script>

<![endif]-->

I hope it will help you.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Venu immadi
  • 1,585
  • 11
  • 20
2

If you're trying to use Internet Explorer 11 to emulate earlier versions of Internet Explorer, be wary.

Internet Explorer 10 and later don't support IE conditional comments. The first release of Internet Explorer 11 didn't support them even when running as an earlier version in emulation mode. See Conditional comments are no longer supported (MSDN).

You should confirm that you have at least the first update of Internet Explorer 11. If in doubt, just grab the latest.

See the bug fix in Conditional comments do not work when emulating document modes via F12 Developer Tools

And a discussion in Stack Overflow question Why doesn't Internet Explorer 11 honour conditional comments even when emulating Internet Explorer 8 document mode?.

Community
  • 1
  • 1
jeff-h
  • 2,184
  • 1
  • 22
  • 33
1

This error occurs because the script "respond.min.js" uses Ajax or something similar. You must place your project on a local or remote server like WAMP or XAMPP.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Genaro
  • 11
  • 1
1

I just wanted to add to this that the example.html from github doesn't work out of the box for IE8 on XP!

I found that the github example didn’t work when copied to my server. The solution I found was that the example when being tested with IE8 from XP needs 2 changes!

  • Downlaod and extract the content of https://github.com/scottjehl/Respond

  • Open example.html in cross-domain folder Replace “rawgithub.com” with “rawgit.com” (IE8/xp doesn’t like the redirect when including the css files)

  • Change “https” to “http” as the CDN they use uses SNI which isn’t supported in XP, so if you want to support XP users then you’ll need to cater for this! (or a less you spend a lot of money to get a dedicated IP on your CDN)

Once this was changed, all works well with the example :-) Hope this helps someone :-) Working example.html code below:

  <!DOCTYPE html>
  <html>
     <head>
        <meta charset="utf-8" />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
        <meta name=”viewport” content=”width=device-width, initial-scale=1?>
        <title>Respond JS Test Page</title>
        <link href="http://rawgit.com/scottjehl/Respond/master/test/test.css" rel="stylesheet"/>
        <link href="http://rawgit.com/scottjehl/Respond/master/test/test2.css" media="screen and (min-width: 600px)" rel="stylesheet"/>
        <script src="../dest/respond.src.js"></script>
        <!-- Respond.js proxy on external server -->
        <link href="http://rawgit.com/scottjehl/Respond/master/cross-domain/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
        <link href="respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
        <script src="respond.proxy.js"></script>
     </head>
     <body>
        <p>This is a visual test file for cross-domain proxy.</p>
        <p>The media queries in the included CSS file simply change the body's background color depending on the browser width. If you see any colors aside from black, then the media queries are working in your browser. You can resize your browser window to see it change on the fly.</p>
        <p id="attribute-test">Media-attributes are working too! This should be visible above 600px.</p>
     </body>
  </html>
Liam Wheldon
  • 725
  • 1
  • 5
  • 19
0

I resolved this problem by correcting the order of the following lines; they should be in this order:

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

I had the X-UA-Compatible line last and the column layouts didn't work, except for on my local.

Katherine
  • 1
0

I had the same issue, but I solved it when I included Modernizr in my project.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Rich
  • 1
0

You must place your stylesheet <link> tags within the <head>. Even though all browsers will load and render stylesheets linked outside the <head>, it is (was) against spec and respond.js won't process them.

Charlie
  • 8,530
  • 2
  • 55
  • 53
0

I had the following links in the Internet Explorer condition. I had to take those scripts out of the condition.

<!--[if lt IE 9]>    
    <script type="text/javascript" src="~/Content/js/html5shiv.js"></script>
    <script type="text/javascript" src="~/Content/js/respond.min.js"></script>
<![endif]-->

Replace with this:

<script type="text/javascript" src="~/Content/js/html5shiv.js"></script>
<script type="text/javascript" src="~/Content/js/respond.min.js"></script>

It looks like the condition do the same effect like if you include these scripts in the footer instead of the head.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Martin Brabec
  • 3,720
  • 2
  • 23
  • 26
0

I've been pulling my hair out about this issue and finally figured out a solution. My issue was the CDN we use to store all of our media.

I moved respond.js and my CSS files all on the same domain and everything worked as expected. I hope this helps someone in a similar predicament.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Joshua Maynard
  • 11
  • 1
0

Internet Explorer 8 and below can only load a certain number of CSS files, and they can only have a certain maximum number of lines. If you go over these limits, the CSS won't load. Try combining CSS content into a single file.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
user1491819
  • 1,790
  • 15
  • 20
  • Unsure if that is the issue here. For others who are not aware of this you can read about [IE's CSS Rule Limits Here](http://stackoverflow.com/questions/9906794/internet-explorers-css-rules-limits). – L84 Oct 15 '14 at 00:01
0

Using polyfill.io also?

In case this helps anyone else, I was using polyfill.io and was loading it before respond.js. I needed to move it after and respond.js started working, like so:

<link rel='stylesheet' href='/css/screen.css' />
<script src='/js/vendor/respond.js'></script>
<script src='http://polyfill.io/'></script>
tprsn
  • 757
  • 2
  • 7
  • 18
0

firstly,The css for the html and the html files should be hosted in the same domain,which eventually works!

secondly,

<base target="_blank" />

should be written like 

<base target="_blank"></base>

I have tried all methods that mentioned above. we may see the demo of the following http://scottjehl.github.io/Respond/test/test.html then I tried to put the css files on the same domain of the html file,then found it succeed.If you put the css in the html file,it could not be worked either.

pigfly
  • 171
  • 1
  • 4
0

I had the same problem. After spending so much time, I realized that this is caused by a LESS variable. I overrode a Bootstrap variable in order to turn off responsive features:

@grid-float-breakpoint: 0;

This was the thing that broke respond.js.

Then I changed it to:

@grid-float-breakpoint: 0px;

and now it works. I hope that it helps someone.

Orkun Tuzel
  • 1,342
  • 10
  • 22
0

In my case, the issue was one of the css files was not available on server. respond.js processes the list of css file in a recursive function. With the first ajax failure (req.status !== 200 && req.status !== 304), it fails silently. I had to fix the wrong css path to get it working.

krishnakumarp
  • 8,967
  • 3
  • 49
  • 55
0

Respond.js doesn't work if you view the page via file://
Use your folder with server then it will work, like http://localhost/yoursitename/.

Selvanayagam M
  • 1