Menu icon Foundation
Foundation 5 and IE8

Firstly, I know, I know, IE8 is nearly dead and the recommended way to use Foundation on it is to stick with version 3. However, I have a new site build coming up which unfortunately requires IE8 support, and I'd really like to use the new Foundation 5 with it. So I've had a bit of a play!

The 2 main issues seem to be IE8's lack of media query support, and also lack of support for rem units in CSS.

I've managed to overcome both with a few simple polyfills!

To fix the media query issue, just add this to your head:

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
            

         

Then to fix the rem issue, just add a link to this polyfill js file at the bottom of your body tag: https://github.com/chuckcarpenter/REM-unit-polyfill

(Note: there is currently a bug in the REM polyfill that seems to stop it working on an element if a property the element includes the !important rule, in the following screenshots I've just removed !important from .button in foundation.css, until the bug can be fixed)

FOUNDATION 5 IN IE8 BEFORE:

Screen shot 2013 11 22 at 16.13.47

FOUNDATION 5 IN IE8 AFTER:

Screen shot 2013 11 22 at 16.14.41

Not bad eh?!

Now, that's just the CSS side working, I doubt it will be as simple to get any of the Foundation 5 JavaScript working as it relies on jQuery 2.0 which is IE9+. But hopefully that will help out some people to get things looking better on IE8.

ie8Foundation 5usage

Firstly, I know, I know, IE8 is nearly dead and the recommended way to use Foundation on it is to stick with version 3. However, I have a new site build coming up which unfortunately requires IE8 support, and I'd really like to use the new Foundation 5 with it. So I've had a bit of a play!

The 2 main issues seem to be IE8's lack of media query support, and also lack of support for rem units in CSS.

I've managed to overcome both with a few simple polyfills!

To fix the media query issue, just add this to your head:

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
            

         

Then to fix the rem issue, just add a link to this polyfill js file at the bottom of your body tag: https://github.com/chuckcarpenter/REM-unit-polyfill

(Note: there is currently a bug in the REM polyfill that seems to stop it working on an element if a property the element includes the !important rule, in the following screenshots I've just removed !important from .button in foundation.css, until the bug can be fixed)

FOUNDATION 5 IN IE8 BEFORE:

Screen shot 2013 11 22 at 16.13.47

FOUNDATION 5 IN IE8 AFTER:

Screen shot 2013 11 22 at 16.14.41

Not bad eh?!

Now, that's just the CSS side working, I doubt it will be as simple to get any of the Foundation 5 JavaScript working as it relies on jQuery 2.0 which is IE9+. But hopefully that will help out some people to get things looking better on IE8.

Sherry Bradford about 2 years ago

Jordi - I have not tried with 5.5. I am using 5.2 and I found that it was very important WHERE I put the shivs and the items at the close of the page AND it was also very important that I use IF lte IE 8 and not just IF lt IE9. IE 9 seems to work OK with most of the things I needed to do - and for whatever reason, my shiv statements were being ignored until I switched to lte IE 8. I also had to put the respond.min.js up right under the last css in the head for it to work correctly. I hope that helps and perhaps is something you can try to see if it helps with 5.5. What are you trying to accomplish with the css? Just the grid or something more spectacular? So far I have been able to get pretty much everything to work that I have tried - but again my site is not super complicated. Some elements I use in addition to the grid functionality are cards, slider, and getting ready to add the accordion feature. Responsive works to the level that I am able to correctly set up the grid - but that is more user error/lack of skills than the tool so far.

Good luck! If you need to see how I laid out my header and shivs, and what I put at the end before the close, I'll be happy to post those.

Jordi Dosne about 2 years ago

Anyone succeed to make this hack working with Foundation 5.5. I have tested with this version and nothing change. And the scripts well are loaded. Thanks!

Sherry Bradford over 2 years ago

@Gavin - I tried Glen Phillips code, but it didn't work for me and I suspect it is a user issue and not the code. I am so raw/new at this that a lot of pieces are still waiting to come together in my head. The rem polyfill so far hasn't been an issue but I'll keep an eye on this and appreciate the heads up. I have the basic grid working now - but am getting ready to begin making some additional changes, adding more elements, etc., so I'm sure I'm going to be back here pouring over the posts again! Appreciate that people are still updating here!

Gavin Thomas over 2 years ago

BTW.. i wouldn't use the rem polyfill. This is extremely memory hungry and isn't needed if you use Glen phillips code or grunt to convert px to rem units.

Gavin Thomas over 2 years ago

Just use the sass code Glenn Phillip posted on page 3:

http://foundation.zurb.com/forum/posts/241-foundation-5-and-ie8?page=3

I've got foundation 5.4 working fine with IE8 using that along with

and that's it.

Sherry Bradford over 2 years ago

Yes - learned that the hard way! :-) It was unbelievably time consuming to go back and forth from the coding to the staging it in an environment that would actually let me see it in action, then back to the coding environment. I have to give a big shout out of thanks to @Moein Ghezelbash on a separate post on this same topic and also to everyone who posted in this thread. Each one got me closer. I think that the rem.min.js that he listed in his code and that I pulled in ultimately fixed the final issues I was having. I've got a more complex page I have to build out next with an embedded video player, so I suspect I'm about to pull out a few more hairs - but at least I know I can get a basic grid feature to work in IE8 and be responsive to boot! Thanks so much to everyone who has contributed here! For someone like me, the collective wisdom is a godsend and very appreciated!

Derek Paul over 2 years ago

@Sherry Just as an FYI, IE11 doesn't support the conditional statements that make most of this possible regardless of what view you're in. The only way to test that this works is to view it in IE8 and IE9 inside a VM. Microsoft dropped conditionals in IE10 so testing in IE11's dev tools won't help you.

Sherry Bradford over 2 years ago

Well, I have tried every fix on this post (apart from opening and changing js files) and cannot get my page to work in IE8. I'm sure this is an error on my part - I last had to work with complex html BEFORE CSS even existed. So I am operating way behind the curve when it comes to knowing where to add some of the markup for the various js scripts. We run IE11 in compatibility view. My page looks great in Chrome, Firefox and native IE11. Just IE8 is the hurdle. The contents of each panel show up, and the background colors are OK, but none of the grid layout (I based my page on the "Welcome" page at the top of the thread) is working and the fonts are not styling. Everything just lines up down the page with basic text styling. I'm operating behind a firewall, but if anyone wants to take a crack at why my EXTREMELY simple little page is not working in IE8, I would be extremely grateful. I am going to go back through the thread again and modifying the code step by step again but I think I am just in way over my head at this point and cannot tell whether I have an issue with the HTML, the CSS or the way I'm pulling in the JS. Any help will be greatly appreciated.

David Peters almost 3 years ago

Certain verticals are heavily dominated by IE8, especially health care and government (which is 1/3 of the US GDP -- so, yeah, there's bread and butter there for developers).

1/3 of health care providers networks in Oregon, for example, use IE8 for accessing their provider portal.

It pains me to say it but IE8 needs retconned into Foundation 4/5/6.

You'd think enterprise would be ahead of the general population but it simply isn't.

Giovanni almost 3 years ago

Hello.

Thak you for this post, it works great. The only thing I cannot understand is this: when I view the site in IE8, foundation think IE8 is a small device, not a large device. Here is my code:

<!DOCTYPE html>
<!--[if lt IE 9]> <html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]> <html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Webamil</title>
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/public/css/normalize.css">
    <link rel="stylesheet" href="/public/css/foundation.css">
    <link rel="stylesheet" href="/public/css/app.css">
    <!--[if lt IE 9]>
        <script src="/public/js/ie8/html5shiv.js"></script>
        <script src="/public/js/ie8/nwmatcher-1.2.5-min.js"></script>
        <script src="/public/js/ie8/selectivizr-1.0.3b.js"></script>
        <script src="/public/js/ie8/respond.min.js"></script>
    <![endif]-->
    <script src="/public/js/vendor/modernizr.js"></script>
</head>
<body>
    <div class="row vert-space">&nbsp;</div>
    <div class="row">
        <div class="small-12 small-centered large-12 large-centered columns">
            <img src="/public/img/head.png" alt="Webmail" width="380">
        </div>
    </div>
    <form id="login" action="/preauth/login" method="post" name="login">
    <div class="row">
        <div class="small-6 small-centered large-3 large-centered columns">
            <label for="username" id="us-label">&nbsp;</label>
        </div>
    </div>
    <div class="row">
        <div class="small-6 small-centered large-3 large-centered columns">
            <input name="username" type="text">
        </div>
    </div>
    <div class="row">
        <div class="small-6 small-centered large-3 large-centered columns">
            <label for="password" id="pw-label">&nbsp;</label>
        </div>
    </div>
    <div class="row">
        <div class="small-6 small-centered large-3 large-centered columns">
            <input id="password" name="password" type="password">
        </div>
    </div>
    <div class="row">
        <div class="small-6 small-centered large-3 large-centered columns">
            <input value="{{@btn_login_entra}}" type="submit" name="submit" class="button-entra expand">
        </div>
    </div>
</form>
<div class="row">
    <div class="small-6 small-centered large-3 large-centered columns">
        <a href="{{@intranet}}" class="button-intra expand">{{@btn_login_intra}}</a>
    </div>
</div>

    <script src="/public/js/ie8/rem.min.js"></script>
    <!-- script src="/public/js/vendor/jquery.js"></script>
    <script src="/public/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script -->
</body>
</html>

Mhaddy almost 3 years ago

Just wanted to say thank you to @Giorgos Grispos for his awesome work on getting Foundation to be "usable" in IE8. I had tried half dozen different solutions previously and none worked as well as his as described here:

http://www.kycosoftware.com/blog/article/getting-foundation-5-to-work-in-ie8

Now to go in and tweak classes and "clean things up".

Giorgos Grispos about 3 years ago

Hello,

I've used many different solutions however that's the one and most complete solution for F5 / IE8

have test it a lot and seems more than fine.

http://www.kycosoftware.com/blog/article/getting-foundation-5-to-work-in-ie8

Cheers, Giorgos

Just Forms about 3 years ago

Update: figured out I had a CSS position absolute on an element. That fixed the the grid issue i Was having with Hugo's/James Cocker's approach... so Now everything seems to work... testing now.

I also tried to use Cornelius's version but I ran into problems... I could not get the responsive grid to work... I managed to get the CSS to load/style properly.

Here is a Github page with all of Cornelius's parts in a working (cough - kinda) page maybe Cornelius or another person can chime in with what I missed. Being new to all this I'm not sure which approach is better/more efficient. I have Cocker's version working but I like to learn what I missed with Cornelius's version. Thank you in advance to the community for any help. Here is the a Github link:
https://github.com/JustForms/Zurb-Foundation-5-for-IE8-based-on-Kyco-ie8-f5

One thing that may help another noob, like me, out is in Cornelius's ie8.ss file he is using @import for the ie8-grid-support. From what I read over in a StackOveflow post, IE8 does not recognize @import in the CSS file. I had to add the ie8-grid-support support before the IE specific styles in the ie8.css file. After this the elements and columns seemd to render properly but the responsive grid still does not work. Also, Cornelius's calls the "ie8-12col-grid-support" when the CSS file in the master is
"ie8-grid-support.css" change the file name or the @import so they match.

Thanks again to anyone who helps out.

Just Forms about 3 years ago

Well, Since I was deeper into using Hugo's/James Cocker's approach I kept going that route vs. Cornelius's. Everything is working except I have a show-for-medium-up class and the columns/content are overlapping. I think it has something to do the the the float left CSS assignment, I'm not sure, I'm just guessing.

Large and small classes are working fine in IE8.

If anyone else is had medium grid problem could you post your solution. I'm just leaning all this so please give a bit more detail if you can with your instructions.

On a side note, someone else mentioned trying to conditionally load older Foundations Tabs but was having problems. The following tab solution is working great for me in IE8 and above with Foundation 5:

http://webthemez.com/demo/easy-responsive-tabs/Index.html
https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion

Hope that helps a few people out.

Thanks.

Just Forms about 3 years ago

I also wanted to say thank you to the person who posted about SlideMe. In return I would like to share a slideshow alternative from Mark Lee:
http://themarklee.com/2013/12/26/simple-diy-responsive-slideshow-made-html5-css3-javascript/

I don't know if Mark's approach is a better solution but he shows you step-by-step how to break down what is going on in the code and gives you fallback/alternatives... it is worth checking it out. I too had to look for another solution to Zurb's Orbit Slider and this seemed to do the trick.

I just want to give Mark a compliment as well, he has been very gracious with his time and expertise... super nice guy... I don't know him personally but what I can say is he cares about sharing and learning new things... and is very patient/helpful with noobs like me.

Thanks Mark!

Just Forms about 3 years ago

Cornelius,

Thank you for sharing your steps. Would it be possible for you put together a Github collect or Zip file of a working template up on your blog page? It would be helpful to see all the pieces together in a working page. A BIG THANK YOU! in advance if you are able to do this.

I too have spent the last couple of days scouring the internet for a solution to IE8 compatibility with Zurb's Foundation v5. For others doing the same research I came across this blog as well with a list of steps:
http://hugo.castanho.me/code/zurb-foundation-ie8-support/

I just finished downloading all the files/reading about each element/step from Hugo's blog when I decided to check this forum page once again. I'm glad I did as it looks like you used a similar approach to Hugo's with the addition of some other workarounds (IE8 Grid CSS stylesheet etc.).

I am a noob so perhaps there are things you are dong that are better than Hugo's approach. Or has Hugo used some things that work better than your approach?

Thank you again, I really appreciate the help/advice.

Cornelius Weidmann about 3 years ago

Thank you, this post has helped me a lot! For what it's worth I have compiled a list of steps I took to get Foundation 5 to work nicely with IE8. You can see the blog post here, hope it helps:

http://www.kycosoftware.com/blog/article/getting-foundation-5-to-work-in-ie8

bhu Boue vidya over 3 years ago

awsm. worked for me! very very happy.

Glenn Philp over 3 years ago

// @FUNCTION
// $colNumber - Found in settings file
// $totalColumns - Found in settings file
@function grid-calc($colNumber, $totalColumns) {
  @if $ie {
    @return (percentage(($colNumber / $totalColumns)) - .1038);
  } @else {
    @return percentage(($colNumber / $totalColumns));
  }
}

Can anyone verify this is a correct function for IE 7? The end goal should be column number divided by total number of columns minus the percentage for padding ($column-gutter) to output a correct grid for IE 7.