css3-mediaqueries-js - IE issue fixed

I have recently been inspired by some great articles on “responsive web design”, mostly by Ethan Marcotte and also Jeremy Keith.

Since reading these great articles, I have been starting to implement some flexible responsive designs on some new websites. It’s great, but I’m not going to explain why here, there are enough articles out there on the interwebs explaining why.

Media Queries are great but are not supported by IE6/7/8. So you can make beautiful new flexible, responsive websites, but they’re not going to work the same for the worlds most popular (crap) browser.

Step up css3-mediaqueries-js. This JavaScript “hack” enables Media Queries to work in Internet Explorer 6/7/8… awesome!

That’s all good then, right? Well yes, apart from I couldn’t actually get css3-mediaqueries-js to actually work with my sites in IE. After much tearing out of hair, several profanities and quite a lot of searching on the interwebs, I was still stuck and couldn’t find a solution, especially as there is little or no documentation on css3-mediaqueries-js.

After a (long) break, I finally figured it out. I was using the @import method for my CSS, so from within my HTML document I was referencing a single ‘base’ CSS file, with several import rules:

My main CSS that contained the Media Queries was also being pulled in via the @import rule. Nothing that unusual here, but this was causing it to not work for IE 6 and 7.

@import url('reset.css');
@import url('base-main.css');
@import url('type.css');

So now, I’m just calling the main CSS file direct from the HTML:

This fixed it and css3-mediaqueries-js is now working fine for me.

If you have the same problem, I hope you’ve found this article and it’s helped. I wish I had found something similar!