Drupal 7 Zen sub theme IE8 Responsiveness

Question

Using the Zen starter theme for Drupal 7, I've created this site: www.nettango.com. Everything seems to work fine and I've been figuring things out as issues come up. However, I've been trying to get IE8 to respect the responsive styles. Here's what I've done:

Site Settings:
Checked - Add Respond.js JavaScript to add basic CSS3 media query support to IE 6-8.
Checked - Add HTML5 shim JavaScript to add support to IE 6-8.
Checked - Add meta tags to support responsive design on mobile devices.

Which calls this into action:

<script src="/themes/zen/js/html5-respond.js"></script>

The script is being loaded, but it doesn't obey my mediaqueries.

After that, I replaced Zen's script with these:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Which had the same effect - nothing.

Here's a sample from my css file to show how the mediaqueries are setup:

@media screen and (max-width:1100px) {
    html{font-size: 83%;}
    #header {background:blue;}
}

Feel free to inspect the www.nettango.com site files. I've spent the majority of my day trying to solve this and have had no luck.

Thanks in advance for any help.

Answer 1

I also noticed you have to set firesass to false in your config.rb file. It wont work in IE8 if Firesass is enabled.

Answer 2

This is most likely because you are trying to use css3-mediaqueries while in development mode. Drupal 7 uses the @import rule for stylesheets in non-CSS aggregation mode.

From the css3-mediaqueires.js project summary:

Note: Doesn't work on @import'ed stylesheets...

Hence, css3-mediaqueries.js will only take effect when CSS aggregation is turned on (in production).

Answer 3

Appears the mediaqueries work on the live server, but not on our local server. Strange. Not sure why that is.