respond.js polyfill not working for last media query in IE8

Question

I have two media queries in my css (not counting the print one) : @media screen and (min-width: 720px) {} and @media screen and (min-width: 1026px) {

I am using respond.js to get them to behave under IE8. The weird thing is that it works perfectly, except for the last media query where it reverts back to the css before the media queries. I.e., it works well until the window hits that 1026px threshold in width.

Anybody got an idea as to what is going on there ? Here is the link to the preview : http://bit.ly/i6ITPe

Thanks a bunch for any answer

Answer 1

I have been having several issues with this and have found it working on and off again. First off based on the forums I have been reading you should not include respond.js from modernizr, they are more than likely going to drop it. Also when you include respond.js add it after all of your stylesheets. It should be one of the last things to load. Hope that helps! =)

Answer 2

There are a few things to bere in mind when using respond.js

1. It needs to parse the css by making an ajax call to the stylesheet in a link element
2. It cant understand dynamically created CSS from eg client side LESS , or styles injected via document.write, jQuery etc,.
3. @Import statements are not followed inside stylesheets

Hope this helps.

Answer 3

I'm not sure if this applies to you, but I just found an issue that breaks the css while using respond.js.

do you have any elements that open and close with no styles i.e:

ul.demo{}

I found this was breaking my css in ie 8 and below