Grid issue on IE8 with Unsemantic

Question

I use Unsemantic for the first time, and I forgot to check my page on IE8. Here is the disaster : http://canapin.com/web/meteo/

Unsemantic is supposed to be IE8 compatible, but my page is messed up, and I can't figure out why.

Any idea? :(

Answer 1

As stated in its issue tracker, since IE8 doesn't support media queries, Unsemantic grid offers a fixed-width layout for it, through a separate css file inclusion:

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

Note the conditional comment avoiding the separate css for mobile versions of IE (they are supposed to support media queries):

I suppose you can download the source of the separate css from here: http://unsemantic.com/stylesheets/ie.css

So, if you accept to have an IE8 with fixed-width layout (and it seems very reasonable to me), you don't need a javascript fix ;)

Bye bye!

Answer 2

for IE8 and lower you have to include a shim, which comes with the Unsemantic files.

Include the following code in your head and you should be fine:

<!--[if lt IE 9]>
<script src="./assets/javascripts/html5.js"></script>
<![endif]-->

So, just point to the html5.js file and this should fix it. Let me know whether this worked for you.

Cheers, Marvin