IE8 grid not working

[ynamite]

Hi

Thanks a ton for this simple yet powerful framework, really loving it.

I'm running into an issue on a website I'm building for a client, which also has to offer basic IE8 support, if at all possible (as a last resort, a possibility would be to revert to the mobile view).

On the Neat Github page under browser support it states that Neat is compatible with IE8 when using Selectivizr (excluding media queries, for obvious reasons).

Now, I'm trying to get Neat to behave with Respond.js v1.4.2 and Selectivizr, which adds a min/max-width media query polyfill which would (in theory at least) allow Neat to flex its muscles like a superhero wearing a speedo. But for some reason, I cannot get it to work properly. The last grid item always drops to a new line.

The problem seems to be that grids are too wide. When I make them smaller using firebug, it works as it should. Is this a problem with how IE8 calculates percentage widths? Or am I missing something else entirely? I'm sure it's a little thing ...

Any help is appreciated!

[paultannenbaum]

Just ran into the same problem and came here to see if anyone else had a fix. A quick spike showed that adding @include omega() on certain grid classes helps alleviate the problem. Right now I have those wrapped in .ie only classes. Will let you know if I find a less hackier solution.

[ynamite]

@paultannenbaum I've actually managed to fix this issue in the meantime. Sorry for not posting back about it up until now, it kinda slipped my mind and I was pretty busy with work.

Anyhoo, I was testing my site in IE11 using the developer tools to switch to IE8. Since IE11 doesn't emulate IE8 all that well, using it to test IE8 functionality is a big no no. For instance, IE11 completely ignores conditional comments/statements (apparently a known bug), even when in IE8 mode. In my case this lead to selectivizr to never actually load (with or without conditional comments), which in turn means that pseudo CSS selectors didn't work in IE effin 8. Neat needs those to do it's magic. Which could explain why using omega() works also, kind of, because effectively this is what pseudo selectors are used for in Neat to add omega() automagically.

So, first, before going any further, make sure you are testing in a real IE8 environment. Either through an online service such as browserstack or browsershots or, even better, download a corresponding VM image straight off the Microsoft website for Windows OR OS X (linky: http://www.modern.ie/en-us/virtualization-tools).

They actually have quite a large selection of images, sure to sate each and every appetite :) For IE8 I recommend going with the Windows 7 VM.

If IE still doesn't want to behave, make sure you load selectivizr version v1.0.3b (straight from the github source, not the download button) after your CSS. Also, if you're using respond.js, make sure you load that after selectivizr. I'm using respond 1.4.2.

Hope that helps.

[paultannenbaum]

Thanks for the suggestion @ynamite, but still had to resort to the omega() hacks. Was testing on browserstack (I am assuming this is a proper image), and upgrading selectivizr did not help.

[ynamite]

strange ... it worked for me after changing things around. can you provide a link? Personally I prefer using a VM, it's more like the real thing, not sure if it makes a difference though.