IE 7 & 8

[SFPink]

I have been using the unsemantic-grid-responsive.css which works great however on ie 7 & 8 it doesn't seem to work. I've added the shim but no luck.

Does order matter in this case? Or is it the case that ie 7 and 8 dont support media queries?

Maybe i've missed something simple.

I know there was an issue similar to this, however it seems to be different

[SFPink]

Okay its the media queries should have guessed first time around.. (Pretty much exact same as other issue)

To any one else using this try adding respond into your project

https://github.com/scottjehl/Respond

[nathansmith]

Ah, gotcha.

For the Unsemantic.com site, I'm serving only the desktop permutations to IE7 and IE8, like this…

http://nicolasgallagher.com/mobile-first-css-sass-and-ie/

That's the approach I'd recommend for supporting older IE, since it can only run on desktop anyway.

But yeah, if you need old IE to fake media queries, Respond.js will run a regular expression against all CSS files in the page, looking for @media queries.

It's "expensive" from a performance standpoint, but does let you just serve the same CSS files to all browsers.

[SFPink]

Thanks for your input, I will definitely look into sass and the solution you provided. Looks interesting.

[zzolo]

Hey, awesome framework.

It would be really great if you documented that on IE7 and IE8, since media queries don't work, that the grid defaults to mobile. And maybe a link to some strategies.

Many thanks.

[nathansmith]

You could use Respond.js (though this isn't my preferred method)…

https://github.com/scottjehl/Respond

Instead, I'd recommend composing a separate stylesheet for older IE, as seen on the Unsemantic.com site itself.

This presupposes familiarity with Sass…

http://nicolasgallagher.com/mobile-first-css-sass-and-ie/

This is how I exclude the primary stylesheet, and serve an alternative to older IE…

<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="./stylesheets/application.css" />
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="./stylesheets/ie.css" />
<![endif]-->

[zzolo]

Thanks for the quick response. I just saw the ie.css and added it conditionally and it fixes my problem. Many thanks! Sorry for the mistake.

[nathansmith]

You're welcome! :)