nathansmith / unsemantic

Fluid grid for mobile, tablet, and desktop.
http://unsemantic.com
MIT License
1.38k stars 161 forks source link

Not working in IE 8 ?? ... #43

Closed bdcoder2 closed 10 years ago

bdcoder2 commented 10 years ago

I just tried a test page using IE 8 -- the test page was:

http://unsemantic.com/demo-responsive

Does not work under IE 8 -- is it supposed to? confused as to what combination of includes / javascript / non-javascript is supposed to work on different browsers.

This page does work with IE 8:

http://unsemantic.com/demo-adapt

... but I was looking for a solution that did not involve javascript hacks, etc. -- is this the only way to support IE 8 ???

bdcoder2 commented 10 years ago

Ooops -- my bad -- IE 8 does not support media queries so javascript is the only way? -- right?

nathansmith commented 10 years ago

IE8 receives an entirely separate stylesheet, keeping it at a fixed-width.

You're correct. Because IE8 does not support @media queries, I force it to stay at a "desktop" width.

The Adapt.js demo shows how you could use JS to make IE8 resize appropriately.

But honestly, I wouldn't recommend it. I just take this approach with all sites I do nowadays…

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

fglueck commented 9 years ago

A simple FIX is to copy the Desktop defintions to the top of the file, so you have a basic support in IE8 but no resizing if the window will resize.

nathansmith commented 9 years ago

What I've typically done is feed IE8 CSS file(s), and set a min-width on the <body> so that it can't reach a point where mobile/tablet @media queries would even be needed.

You can see an example of this here…

http://neimanmarcus.com

Screenshot of the "if IE" conditional…

http://cl.ly/image/3X2c3r461836

^ Within that "template_rwd_ie.css" file is the desktop only grid CSS from Unsemantic (and other site-specific things).

Here is a screenshot of the top-level *.scss files that I had set up for Neiman Marcus…

http://cl.ly/image/0q3l173i2Q0n

This allowed us to support not only IE7 and IE8, but also internationalization.