Menu icon Foundation
REM Foundation CSS IE8 Problem

After realizing that 9% of my clients vistors use IE8, I have to make the website working - just a little bit.

I am talking about: http://idealbau.at

I did what was mentioned here:
http://foundation.zurb.com/forum/posts/241-foundation-5-and-ie8?page=3

So this is

<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[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]-->
            

         

And this before

<script type='text/javascript' src='http://idealbau.optimiertes.com/wp-content/themes/ib-theme/js/rem.min.js'></script>
            

         

Howevery the Website still looks like this:

2014 06 15 20h55 37

but should look like this:

2014 06 16 12h49 17

I would be really thankfull for your help and if you can tell me what I missed out.

ie8css

After realizing that 9% of my clients vistors use IE8, I have to make the website working - just a little bit.

I am talking about: http://idealbau.at

I did what was mentioned here:
http://foundation.zurb.com/forum/posts/241-foundation-5-and-ie8?page=3

So this is

<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[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]-->
            

         

And this before

<script type='text/javascript' src='http://idealbau.optimiertes.com/wp-content/themes/ib-theme/js/rem.min.js'></script>
            

         

Howevery the Website still looks like this:

2014 06 15 20h55 37

but should look like this:

2014 06 16 12h49 17

I would be really thankfull for your help and if you can tell me what I missed out.

Dan Zimmerman over 5 years ago

My final solution is Grunt with grunt-rem-to-px Plugin
https://github.com/lohmander/grunt-rem-to-px

This scans through the CSS files and exchanges all REM by PX.
This was the biggest problem why my website layout was so destroyed in IE8. The currently solution is not perfect but good enough.

I had no idea of Grunt and it took me 20min to get going.

Step 1: Read this: http://gruntjs.com/getting-started
Step 2: Create a JS file and name it to Gruntfile.js in your project folder. Then copy this code in theJS file

  module.exports = function(grunt) {  
  grunt.initConfig({      
    rem_to_px: {
    options: {
        baseFontSize: 16,
        removeFontFace: true,
    },
    dist: {
        src: ['your-css-dir/*.css'],
        dest: 'ie8-css-dir/'
    }
  }      
  });

  grunt.loadNpmTasks('grunt-rem-to-pixels'); 
  grunt.registerTask('default', ['rem_to_px']);  
};

Step 3: Open CLI (Windows: cmd.exe) browse via the cd - command your project folder.
Step 4: Install Grunt to your project folder: npm install grunt --save-dev
Step 5: Install the Grunt-Plugin to your folder npm install grunt-rem-to-pixels --save-dev
Step 6. Run Grunt by the CLI command grunt

Dan Zimmerman over 5 years ago

Thanks for your comment.
I also checked out this too but I don't think changing framework core files is a good approach.

Dan Zimmerman over 5 years ago

Although I use rem.min.js it seems to me that it is a rem problem. I don't think a change in positioning would solve it. Anyway thanks for your answer!

Philippe Delberghe / AmaZili over 5 years ago

hve you tryed to use absolute position div with a heigth of 100% and your content insde in a div postion relative ? I had a similar issue I fixed this way (before using foundation, with html5boilerplate).