Hello,
If you check out http://kennelclub.cl/ in FF/Opera/Chrome/IE9+ it will load fine, but in IE8 and earlier, the grid layout doesnt seem to work, the content column and the sidebar column are not being floated next to each other. It looks something like this http://i.imgur.com/vmauNlB.png
The content is inside class=grid-4, and the sidebar is class=grid-2, both wrapped inside class=row
I don’t really know how to fix this for IE :\ I look at the code and it looks fine, plus it works everywhere except in IE.
Hi,
IE8 and under don’t support media queries and they don’t support html5 elements so if you use either of those then your support is IE9+ only.
There are some media query polyfill scripts around but don’t work in all cases.
https://code.google.com/p/css3-mediaqueries-js/
You also need the html5shiv for IE8 and under which should go first in the head under the charset meta tag preferably.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
You should include the link to the media query inside that conditional comment also. Note that the media query polyfills don’t work locally and you would need to test online.
Once you have all those in place then you can re-test as there are likely to be lots of IE8 bugs if you haven’t tested during development. Most modern grids only have partial support for IE8 anyway.
You probably also want the edge meta tag for IE8 to stop quirks mode.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
That should be the first meta tag in the page.
