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.

Edgardo over 5 years ago

I implemented this solution (polyfill / rem).
I can not run the top-bar menu, although the buttons are well first level, the second level (dropdown) are hidden.
Solutions? Thanks.

Details website error

User Agent: Mozilla/4.0 (Windows NT 8.0, Windows NT 6.1, WOW64; Trident/4.0; SLCC2; NET CLR 2.0.50727; NET CLR 3.5.30729, 3.0.30729 NET CLR, Media Center PC 6.0... , InfoPath.3,. NET4.0C,. NET4.0E)
Date: Mon, April 21, 2014 18:18:26 UTC

Message: Object does not support this property or method
Line 24
Character: 24904
Code: 0
URI: http://localhost/a-base-foundation/js/vendor/jquery.js

Message: 'jQuery' is undefined
Line 8
Character: 1
Code: 0
URI: http://localhost/a-base-foundation/js/foundation.min.js

Message: An Object expected
Line 118
Character 7
Code: 0
URI: http://localhost/a-base-foundation/polyfill.html

Glenn Philp over 5 years ago

Everything James Cooker mentioned worked exactly as planned.

However, it is possible to create a IE specific stylesheet using the modifications below. How is this possible? Using Chris Coyier's Conditional Media Queries Mixin and Sébastien Axinté's REM to PX Browser Function with SASS.

The first 2 variables control whether it is putting out media queries or only large and medium classes, plus converting REMs to PXs. It does create some redundant code (mainly with Columns and Row classes). I have spent weeks on this as I work for a medical institution that employees approximate 14,000 and although they recently updated to Windows 7, we are forced to stay on IE8 in IE7 compatibility mode so Foundation by itself just wouldn't work.

And supplying the scripts above are a solution, I feel this might even be better for the grid. It is by no where near perfect, so if you implement it remember IE 7 and 8 don't know box-sizing or the :last-child.

Also for those working with IE 8 you can implement jQuery 1.10 (preferably within a conditional). Not all items work, however, I can tell you the Reveal Modal works (doesn't center and the background shows solid, instead of see-thru) and the tabs work. The dropdown buttons and orbit slider aren't working currently. Instead I replaced the orbit slider with SlideMe and it is working across all browsers.

$MQs: true;
$px-only: false;
$text-direction: ltr;
$opposite-direction: right;
$default-float: left;
$rem-base: 16px !default;

// It strips the unit of measure and returns it
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function convert-to-rem($value, $base-value: $rem-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  @return $value;
}

@function rem-calc($values, $base-value: $rem-base) {
  $max: length($values);

  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }

  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}

// Create pixel fallback measurement for < IE 9
// Output to the appropriate stylesheet
// $pixelBase : 16; /* 1 */ Replaced with rem-base

@function parseInt($n) {
  @return $n / ($n * 0 + 1); /* 2 */
}


@function u($values){ /* 3 */
    $list: (); /* 4 */
    @each $value in $values { /* 5 */
        @if type-of($value) != 'number' {
            $list: append($list, $value);
        }
        @else {
            $unit : unit($value); /* 6 */
            $val  : parseInt($value); /* 2 */
            @if ($px-only) and ($unit == 'rem') { /* 7 */
                $list: append($list, ($val * $rem-base)); /* 7 */
            }
            @else if($unit == 'px') or ($unit == 'rem') or ($value == 0) { /* 8 */
                $list: append($list, $value); /* 8 */
            }
            @else if($unit == 'px'){
                $list: append($list, ($val / $pixelBase) + rem );
            }
            @else {
                  @warn 'There is no unit conversion for #{$unit}'; /* 9 */
            }
        }
    }
    @return $list(); /* 10 */
}

$modules: () !default;
@mixin exports($name) {
  @if (index($modules, $name) == false) {
    $modules: append($modules, $name);
    @content;
  }
}
// We use this to do clear floats
@mixin clearfix {
  *zoom:1;
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}
// We use this to control whether or not CSS classes come through in the gem files.
$include-html-classes: true !default;
$include-print-styles: true !default;
$include-html-global-classes: $include-html-classes !default;


// Media Query Ranges
$small-range: (0em, 40em) !default;
$medium-range: (40.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em) !default;


$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

//
// @variables
//
$include-html-grid-classes: $include-html-classes !default;

$row-width: u(rem-calc(1040)) !default;
$column-gutter: rem-calc(20) !default;
$total-columns: 12 !default;

//
// Grid Functions
//

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

//
// @mixins
//

// For creating container, nested, and collapsed rows.
//
// 
// $behavior - Any special beavior for this row? Default: false. Options: nest, collapse, nest-collapse, false.
@mixin grid-row($behavior: false) {

  // use @include grid-row(nest); to include a nested row
  @if $behavior == nest {
    width: auto;
    margin-#{$default-float}: u(-($column-gutter/2));
    margin-#{$opposite-direction}: u(-($column-gutter/2));
    margin-top: 0;
    margin-bottom: 0;
    max-width: none;
  }

  // use @include grid-row(collapse); to collapsed a container row margins
  @else if $behavior == collapse {
    width: 100%;
    margin: 0;
    max-width: $row-width;
  }

  // use @include grid-row(nest-collapse); to collapse outer margins on a nested row
  @else if $behavior == nest-collapse {
    width: auto;
    margin: 0;
    max-width: none;
  }

  // use @include grid-row; to use a container row
  @else {
    width: 100%;
    margin-#{$default-float}: auto;
    margin-#{$opposite-direction}: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: $row-width;
  }

  // Clearfix for all rows
  @include clearfix();
}

// Creates a column, should be used inside of a media query to control layouts
//
// $columns - The number of columns this should be
// $last-column - Is this the last column? Default: false.
// $center - Center these columns? Default: false.
// $offset - # of columns to offset. Default: false.
// $push - # of columns to push. Default: false.
// $pull - # of columns to pull. Default: false.
// $collapse - Get rid of gutter padding on column? Default: false.
// $float - Should this float? Default: true. Options: true, false, left, right.
@mixin grid-column(
  $columns:false, 
  $last-column:false, 
  $center:false, 
  $offset:false, 
  $push:false, 
  $pull:false, 
  $collapse:false, 
  $float:true) {

  position: relative;

  // If collapsed, get rid of gutter padding
  @if $collapse {
    padding-left: 0;
    padding-right: 0;
  }

  // Gutter padding whenever a column isn't set to collapse
  // (use $collapse:null to do nothing)
  @else if $collapse == false {
    padding-left: u($column-gutter / 2);
    padding-right: u($column-gutter / 2);
  }

  // If a column number is given, calculate width
  @if $columns {
    width: grid-calc($columns, $total-columns);

    // If last column, float naturally instead of to the right
    @if $last-column { float: $opposite-direction; }
  }

  // Source Ordering, adds left/right depending on which you use.
  @if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; }
  @if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; }

  // If centered, get rid of float and add appropriate margins
  @if $center {
    margin-#{$default-float}: auto;
    margin-#{$opposite-direction}: auto;
    float: none;
  }

  // If offset, calculate appropriate margins
  @if $offset { margin-#{$default-float}: grid-calc($offset, $total-columns) !important; }

  @if $float {
    @if $float == left or $float == true { float: $default-float; }
    @else if $float == right { float: $opposite-direction; }
    @else { float: none; }
  }

}

// Create presentational classes for grid
//
// $size - Name of class to use, i.e. "large" will generate .large-1, .large-2, etc.
@mixin grid-html-classes($size) {

  .column.#{$size}-centered,
  .columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); }

  .column.#{$size}-uncentered,
  .columns.#{$size}-uncentered {
    margin-#{$default-float}: 0;
    margin-#{$opposite-direction}: 0;
    float: $default-float;
  }

  .column.#{$size}-uncentered.opposite,
  .columns.#{$size}-uncentered.opposite {
    float: $opposite-direction;
  }

  @for $i from 1 through $total-columns - 1 {
    .#{$size}-push#{-$i} {
      @include grid-column($push:$i, $collapse:null, $float:false);
    }
    .#{$size}-pull#{-$i} {
      @include grid-column($pull:$i, $collapse:null, $float:false);
    }
  }

  .column,
  .columns { @include grid-column($columns:false); }


  @for $i from 1 through $total-columns {
    .#{$size}#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
  }

  [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
  [class*="column"] + [class*="column"].end { float: $default-float; }


  @for $i from 0 through $total-columns - 2 {
    .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
  }
  .column.#{$size}-reset-order,
  .columns.#{$size}-reset-order {
    margin-#{$default-float}: 0;
    margin-#{$opposite-direction}: 0;
    left: auto;
    right: auto;
    float: $default-float; 
  }
}

@include exports("grid") {
  @if $include-html-grid-classes {
    .row {
      @include grid-row;

      &.collapse {
         > .column,
         > .columns { @include grid-column($collapse:true); }

        .row {margin-left:0; margin-right:0;}
      }

      .row { @include grid-row($behavior:nest);
        &.collapse { @include grid-row($behavior:nest-collapse); }
      }
    }

    .column,
    .columns { @include grid-column($columns:$total-columns); }
    @if ($MQs) {
      @media #{$small-up} {
        @include grid-html-classes($size:small);
      }

      @media #{$medium-up} {
        @include grid-html-classes($size:medium);
        // Old push and pull classes
        @for $i from 1 through $total-columns - 1 {
          .push#{-$i} {
            @include grid-column($push:$i, $collapse:null, $float:false);
          }
          .pull#{-$i} {
            @include grid-column($pull:$i, $collapse:null, $float:false);
          }
        }
      }
      @media #{$large-up} {
        @include grid-html-classes($size:large);
        @for $i from 1 through $total-columns - 1 {
          .push#{-$i} {
            @include grid-column($push:$i, $collapse:null, $float:false);
          }
          .pull#{-$i} {
            @include grid-column($pull:$i, $collapse:null, $float:false);
          }
        }
      }
    }
    @else {
      @include grid-html-classes($size:large);
      @include grid-html-classes($size:medium);
      @include grid-html-classes($size:small);
    }
    // @media #{$xlarge-up} {
    //   @include grid-html-classes($size:xlarge);
    // }
    // @media #{$xxlarge-up} {
    //   @include grid-html-classes($size:xxlarge);
    // }
  }
}

Gavin Thomas over 5 years ago

I too am using foundation 5 (5.2.1) For a large organisation who want responsive, html5 and we are having to support IE8.

I've been researching the best way of doing this

  • Polyfills - Only really want to do this for html 5 elements. I've tried the polyfills for rems and css 3 and i'm getting impaired performance + the rems polyfill just isn't working for me

  • Grunt tasks which post processes the css

Cons - includes all the media query stuff (need to strip this out for IE8)

This won't work as it needs to read in an actual rem value, Not a precompiled function of remcalc( )

What i really want is a IE.scss file that imports some foundation components but outputs css which strips out media query information and provides px values instead of rems

Glenn.. Can you explain the sass code above? Is this a settings file for an IE8 stylesheet. Any reason why you are using media queries or are you adding a media query polyfill conditional comment to IE8. Does this code work well with the remcalc function? I'm using this quite a lot in my sass code

Gavin Thomas over 5 years ago

is by no where near perfect, so if you implement it remember IE 7 and 8 don't know box-sizing or the :last-child.

IE 8 does understand box-sizing: http://caniuse.com/css3-boxsizing (border-box which foundation uses)

Gavin Thomas over 5 years ago

BTW Glenn Philp

Thanks a million for your code. It's worked an absolute treat. I'm importing the foundation settings file and it's working really well!

Gavin Thomas over 5 years ago

I've now built up an IE8 sass file which is importing the grid code above (i've had to include the lower bound ranges functions)

I'd like to ideally pull in my other sass files which utilise the rem-calc() function. Is there a way of pulling out the px value in the brackets instead of having to duplicate code?

Glenn Philp over 5 years ago

Gavin: Thank you for responses. You are correct IE8 does see box-sizing. Also you might want to check (http://foundation.zurb.com/forum/posts/10392-making-foundation-5-work-in-ie-7--8) this is a post that I started to collaborate on making IE 7 and 8 work with Foundation 5.

I am trying to figure out how to make rem-calc and px-only a true/false statement instead of 2 separate functions.

Currently I have had to go into each component SCSS file an add the u() function to every section that has a rem-calc. However, in doing so I have learned that if there is a calculation being performed then sometimes it requires u( ( calculation ) ) otherwise it errors out.

The latest discovery is that the tabs won't work in IE 7 and IE 8. I tried to use Foundation 3 tabs in a conditional and then remove the class of "content" from the elements but this too didn't work. As the Foundation 3 and Foundation 5 tabs are setup completely different.

My current setup is
- src
--_scss
---core
----components (my custom components)
----foundation
-----components
---settings
----components (I have split up all Foundation settings into the similar structure of the SCSS files)
----_settings.scss
---themes
---app-ie.scss (this is a copy of the app.scss with $px-only: true; and $media-queries: false; )
---app.scss (the standard app file with $px-only: false; and $media-queries: true;)

CON:
The key is manually updating each of Foundation's components where there is a media-querie wrapping in the @if $media-queries {} @else {}. Then whenever you see a rem-calc() wrapping in u(rem-calc()), sometimes requires u((rem-calc()));

If you ever decide to update to the latest-and-greatest Foundation you would loose all the changes, unless you plan to make a manual comparison and update.

Adrian Bengtson over 5 years ago

Big thanks to Matt Bainton for mentioning grunt-pixrem, that worked amazingly well!

I tried the rem.js polyfill but it did do anything for me. Generating a special CSS file with grunt-pixrem that I call conditionally for IE less than 9 on the other hand, worked and restored the basic layout and design of my site.

That combined with the polyfills from James Cocker and jQuery 1.10 made my site going from complete garbage in IE8 to actually useful (but, of course, not as pretty as in modern browsers).

James Stone over 5 years ago

I am not a big fan of the polyfill solutions and have come up with the following. Its not perfect but it gives you a desktop style grid in ie7+8. Thought it might be useful to other people on this thread looking for a more lightweight solution (css+ie conditionals).

https://gist.github.com/manofstone/9622054084caa319af59

Glenn Philp over 5 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.

bhu Boue vidya over 5 years ago

awsm. worked for me! very very happy.

Cornelius Weidmann over 5 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

Just Forms over 5 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.

Just Forms over 5 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 over 5 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 over 5 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.

Giorgos Grispos over 5 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

Mhaddy about 5 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".

Giovanni almost 5 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>