Menu icon Foundation

My Posts

  • 4
    Replies
  • REM Foundation CSS IE8 Problem

    By Dan Zimmerman

    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?pa... (continued)

    Last Reply by Dan Zimmerman over 5 years ago



My Comments

Dan Zimmerman commented on Dan Zimmerman's post over 5 years

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 commented on Dan Zimmerman's post over 5 years

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 commented on Glenn Philp's post over 5 years

To me the only real REM solution seems to be this Grunt Library: https://github.com/lohmander/grunt-rem-to-px

I have no idea of Grunt but I guess I have to learn it.

Dan Zimmerman commented on Dan Zimmerman's post over 5 years

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!

Dan Zimmerman commented on Glenn Philp's post over 5 years

SASS says (when using your code from the last post):
Syntax error: Incompatible units: 'px' and 'rem'.
on line 158 of D:/web/www/idealbau.at/v3.0/wp-content/themes/ib-theme/scss/foundation/components/_type.scss, in lead'
from line 219 of D:/web/www/idealbau.at/v3.0/wp-content/themes/ib-theme/scss/foundation/components/_type.scss, in
@content'
from line 14 of D:/web/www/idealbau.at/v3.0/wp-content/themes/ib-theme/scss/foundation/components/../_functions.scss, in `exports'
from line 169 of D:/web/www/idealbau.at/v3.0/wp-content/themes/ib-theme/scss/foundation/components/_type.scss
from line 17 of D:\web\www\idealbau.at\v3.0\wp-content\themes\ib-theme\scss\style.scss
Use --trace for backtrace.

Dan Zimmerman commented on Dan Zimmerman's post over 5 years

Marco, thanks for you idea.
But that wasn't the problem.

Interestingly the problem was caused by CSS.
I use SASS but the included the correct files.

@import "settings";

@import "foundation/normalize";
@import "foundation/components/global";
@import "foundation/components/grid";
@import "foundation/components/type";
@import "foundation/components/visibility";
@import "foundation/components/tabs";

So I downloaded the whole SCSS folder again and used this one.
I have no idea why it works now but it does.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Dan Zimmerman's post over 5 years

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

You commented on Dan Zimmerman's post over 5 years

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

You commented on Glenn Philp's post over 5 years

To me the only real REM solution seems to be this Grunt Library: https://github.com/lohmander/grunt-rem-to-px

I have no idea of Grunt but I guess I have to learn it.

You commented on Dan Zimmerman's post over 5 years

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!

You commented on Glenn Philp's post over 5 years

SASS says (when using your code from the last post):
Syntax error: Incompatible units: 'px' and 'rem'.
on line 158 of D:/web/www/idealbau.at/v3.0/wp-content/themes/ib-theme/scss/foundation/components/_type.scss, in lead'
from line 219 of D:/web/www/idealbau.at/v3.0/wp-content/themes/ib-theme/scss/foundation/components/_type.scss, in
@content'
from line 14 of D:/web/www/idealbau.at/v3.0/wp-content/themes/ib-theme/scss/foundation/components/../_functions.scss, in `exports'
from line 169 of D:/web/www/idealbau.at/v3.0/wp-content/themes/ib-theme/scss/foundation/components/_type.scss
from line 17 of D:\web\www\idealbau.at\v3.0\wp-content\themes\ib-theme\scss\style.scss
Use --trace for backtrace.

You commented on Dan Zimmerman's post over 5 years

Marco, thanks for you idea.
But that wasn't the problem.

Interestingly the problem was caused by CSS.
I use SASS but the included the correct files.

@import "settings";

@import "foundation/normalize";
@import "foundation/components/global";
@import "foundation/components/grid";
@import "foundation/components/type";
@import "foundation/components/visibility";
@import "foundation/components/tabs";

So I downloaded the whole SCSS folder again and used this one.
I have no idea why it works now but it does.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content