Menu icon Foundation
Issues with ie11

I've built a complete site with Foundation Apps and it looks great on firefox, safari, ipad, iphone and Chrome but on IE11 it's a different story. Look at the pictures and code below...

IE: the three blocks should be taking the full width and the footer below. It should look like the first picture.

What's wrong? Isn't F4A supporting iE11?

Please help!

Screen shot 2015 03 18 at 5 00 42 pm

Unknown

<div ng-controller="homeCtrl"></div>
<div class="grid-frame">
  <div class="grid-block small-up-1 medium-up-3" ng-controller="homeCtrl" id="blockSizing">
    <div ng-repeat="homeItem in homeItems" class="grid-content img1" style="background: url('http://cpanel.mannydesigns.co:3000/api/containers/container3/download/{{homeItem.image}}') no-repeat center center; background-size: cover;">
    <a href="{{homeItem.link}}" class="titleLink" target="_blank"><h1>{{homeItem.title}}</h1></a>
    </div>
  </div>
<div class="zurb-footer-top dark footerBlack">
  <div class="grid-block property">
    <div class="small-12 large-4 medium-4 grid-content">
      <div class="property-info">
        <h3><a ui-sref="/" class="home" title="Les Couvres Planchers Eddy">Les Couvres Planchers Eddy</a></h3>
        <p>Établi depuis plus de 35 ans, Les Couvres Planchers Eddy ont acquis une réputation qui dépasse largement les frontières de Granby. Par son service impeccable et ses produits de première qualité, l’entreprise a su conquérir un marché ou la concurrence est féroce et la clientèle exigeante.</p>
      </div>
    </div>
    <div class="small-12 large-8 medium-8 grid-content hide-for-small-only">
      <div class="grid-block">
        <div class="small-12 large-4 medium-4 grid-content">
          <div class="learn-links">
            <h4 class="show-for-medium">Sections</h4>
            <ul>
              <li><h4><a ui-sref="produits">Produits</a></h4></li>
              <li><h4><a ui-sref="equipe">Equipe</a></li></h4>
              <li><h4><a ui-sref="contact">Contact</a></li></h4>
              <li><h4><a href="/wordpress" target="_blank">Blog</a></li></h4>
            </ul>
          </div>
        </div>
        <div class="small-12 large-4 medium-4 grid-content hide-for-small-only">
          <div class="support-links">
            <h4>Contactez-nous</h4>
            <p><a ui-sref="contact" target="_blank">Plus de détails section contact</a></p>
            <p><a href="https://twitter.com/ZURBfoundation">Facebook </a><br> ou envoyez nous un courriel <a href="mailto:[email protected]">[email protected]</a></p>
          </div>
        </div>
        <div class="small-12 large-4 medium-4 grid-content">
          <div class="connect-links">
            <h4>Nouvelles Eddy</h4>
            <p>Tenez vous au courant des dernières tendances sur le <br class="hide-for-small"><a ui-sref="blog" target="_blank">Blog de Couvres Planchers Eddy</a></p>
            <a href="/wordpress" target="_blank" class="small secondary button" id="newsBtn">Nouvelles</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="zurb-footer-bottom footerBlack">
    <div class="row">
      <div class="large-8  medium-8 grid-content">
        <p class="copyright">&copy; 1979&ndash;2015 Les Couvres Planchers Eddy, tous droits réservés.</p>
      </div>
    </div>
  </div>
</div>
            

         

IE

I've built a complete site with Foundation Apps and it looks great on firefox, safari, ipad, iphone and Chrome but on IE11 it's a different story. Look at the pictures and code below...

IE: the three blocks should be taking the full width and the footer below. It should look like the first picture.

What's wrong? Isn't F4A supporting iE11?

Please help!

Screen shot 2015 03 18 at 5 00 42 pm

Unknown

<div ng-controller="homeCtrl"></div>
<div class="grid-frame">
  <div class="grid-block small-up-1 medium-up-3" ng-controller="homeCtrl" id="blockSizing">
    <div ng-repeat="homeItem in homeItems" class="grid-content img1" style="background: url('http://cpanel.mannydesigns.co:3000/api/containers/container3/download/{{homeItem.image}}') no-repeat center center; background-size: cover;">
    <a href="{{homeItem.link}}" class="titleLink" target="_blank"><h1>{{homeItem.title}}</h1></a>
    </div>
  </div>
<div class="zurb-footer-top dark footerBlack">
  <div class="grid-block property">
    <div class="small-12 large-4 medium-4 grid-content">
      <div class="property-info">
        <h3><a ui-sref="/" class="home" title="Les Couvres Planchers Eddy">Les Couvres Planchers Eddy</a></h3>
        <p>Établi depuis plus de 35 ans, Les Couvres Planchers Eddy ont acquis une réputation qui dépasse largement les frontières de Granby. Par son service impeccable et ses produits de première qualité, l’entreprise a su conquérir un marché ou la concurrence est féroce et la clientèle exigeante.</p>
      </div>
    </div>
    <div class="small-12 large-8 medium-8 grid-content hide-for-small-only">
      <div class="grid-block">
        <div class="small-12 large-4 medium-4 grid-content">
          <div class="learn-links">
            <h4 class="show-for-medium">Sections</h4>
            <ul>
              <li><h4><a ui-sref="produits">Produits</a></h4></li>
              <li><h4><a ui-sref="equipe">Equipe</a></li></h4>
              <li><h4><a ui-sref="contact">Contact</a></li></h4>
              <li><h4><a href="/wordpress" target="_blank">Blog</a></li></h4>
            </ul>
          </div>
        </div>
        <div class="small-12 large-4 medium-4 grid-content hide-for-small-only">
          <div class="support-links">
            <h4>Contactez-nous</h4>
            <p><a ui-sref="contact" target="_blank">Plus de détails section contact</a></p>
            <p><a href="https://twitter.com/ZURBfoundation">Facebook </a><br> ou envoyez nous un courriel <a href="mailto:[email protected]">[email protected]</a></p>
          </div>
        </div>
        <div class="small-12 large-4 medium-4 grid-content">
          <div class="connect-links">
            <h4>Nouvelles Eddy</h4>
            <p>Tenez vous au courant des dernières tendances sur le <br class="hide-for-small"><a ui-sref="blog" target="_blank">Blog de Couvres Planchers Eddy</a></p>
            <a href="/wordpress" target="_blank" class="small secondary button" id="newsBtn">Nouvelles</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="zurb-footer-bottom footerBlack">
    <div class="row">
      <div class="large-8  medium-8 grid-content">
        <p class="copyright">&copy; 1979&ndash;2015 Les Couvres Planchers Eddy, tous droits réservés.</p>
      </div>
    </div>
  </div>
</div>
            

         
Rafi Benkual over 4 years ago

Flexbox is supported in IE11 - http://caniuse.com/#feat=flexbox

Looks like you're using the footer code from our docs - which we tested in IE11 and is working. It has to be something else. Could be a browser setting or something else.

Emmanuel Henri over 4 years ago

The only thing I was able to fix was the footer with a CSS width:100%. I tried applying the same to the grid-block containing the 3 ng-repeat items and it's not taking the full width in iE11...yet works fine in all other browsers. It's not a browser setting as two projects with different customers are showing the same issue with the customers.

What do you suggests? I'd like some suggestions if possible. I'm sure Flexbox and the footer works in IE but why does the grid-block isn't working? What am I missing or is it a bug in F4A?

Rafi Benkual over 4 years ago

Not a bug because the docs are built on F4A and work fine. Couple things, for IE11 the grid must have a max-width added for width to overcome a wrapping issue in IE11. This is default in the framework now.

Also, the grid-frame should only be used once at the top of the layout. If it's nested in another frame, it will surely affect the layout.