Menu icon Foundation
Nested grids and IE compatibility

Hi,

I have a problem with nested grids: in my case, it doesn't work on IE9/IE10/IE11 with the attached HTML code.

In the #content part, only the small-12 class seems to be taken and not the large-8 or large-4, so the columns don't work.

Am I doing something wrong?

<div id="main-content" class="row main-content">

    <div id="primary" class="small-12 medium-8 large-9 columns content-area">

        <div id="content" class="row site-content" role="main">
            <div class="small-12 large-4 columns">
                <div id="sub-pages-navigation">
                    <dl class="sub-nav">


                        <dt><a href="http://colibri.ua-preprod.com/produit/fonctionnalites/">Fonctionnalités</a></dt>
                        <dd class="active"><a href="http://colibri.ua-preprod.com/?page_id=62">Revue de l'historique</a>
                        </dd>
                        <dd><a href="http://colibri.ua-preprod.com/?page_id=64">Nouveaux articles et substitutions</a>
                        </dd>
                        <dd><a href="http://colibri.ua-preprod.com/?page_id=66">Calculs de prévisions</a></dd>
                        <dd><a href="http://colibri.ua-preprod.com/?page_id=119">Enrichissement collaboratif</a></dd>
                        <dd><a href="http://colibri.ua-preprod.com/?page_id=121">Indicateurs de performance</a></dd>

                    </dl>
                </div>
                <!-- #sub-pages-navigation -->
            </div>
            <article id="post-62" class="post-62 page type-page status-publish hentry small-12 large-8 columns">
                <header class="entry-header"><h1 class="entry-title">Revue de l&rsquo;historique</h1></header>
                <!-- .entry-header -->
                <div class="entry-content">
                    <h2>Gestion des historiques</h2>

                    <p>La gestion des historiques de vente est une étape primordiale dans la construction des prévisions
                        de ventes :</p>
                    <ul>
                        <li>Permet de corriger l’effet de facteurs extraordinaires sur les ventes (ruptures, promotions&#8230;)</li>
                        <li>Permet d’obtenir un historique le plus proche d’une activité “normale”</li>
                    </ul>
                    <h2>La correction d’historiques avec Colibri :</h2>

                    <p>En déléguant tout ou partie du périmètre concerné (collaboration) Colibri détecte automatiquement
                        les valeurs anormales en calculant un couloir de normalité (intervalle de confiance), vous
                        donnant ainsi la possibilité de corriger :</p>
                    <ul>
                        <li>Manuellement l’historique via saisie des valeurs voulues (dans une grille ou sur un graph)
                        </li>
                        <li>Automatiquement en choisissant une stratégie de correction et un périmètre d’action</li>
                        <li>En sollicitant la collaboration d’une/plusieurs personnes</li>
                    </ul>
                    <p>Colibri vous donne la possibilité de suivre l’avancement de ce processus via des KPI dédiés, de
                        tracer la contribution des collaborateurs et de détecter les points bloquants</p>

                    <p style="text-align: center;"><a
                            href="http://colibri.ua-preprod.com/wp-content/uploads/2014/02/capture_ecran_colibri_historiques.jpg"><img
                            class="aligncenter size-large wp-image-124" alt="Historiques"
                            src="http://colibri.ua-preprod.com/wp-content/uploads/2014/02/capture_ecran_colibri_historiques-720x405.jpg"
                            width="720" height="405"/></a></p>
                </div>
                <!-- .entry-content -->
            </article>

        </div>
        <!-- #content -->

    </div>
    <!-- #primary -->

    <div id="secondary" class="small-12 medium-4 large-3 columns wigdet-area" role="complementary">

        <aside id="simpleimage-4" class="widget widget_cta"><h1 class="widget-title">Colibri à partir de 950€/mois</h1>

            <p>Votre prototype gratuit disponible en 48h !</p>

            <p class="more text-center"><a href="http://colibri.ua-preprod.com/contact/" class="button round">Contactez-nous</a>
            </p></aside>
        <aside id="simpleimage-3" class="widget widget_cta"><h1 class="widget-title">Démonstration en ligne</h1>

            <p>Découvrez toutes les fonctionnalités de Colibri en quelques minutes</p>

            <p class="more text-center"><a href="http://colibri.ua-preprod.com/produit/demo-en-ligne/"
                                           class="button round">Voir la vidéo</a></p></aside>

    </div>
    <!-- #secondary -->
</div>
<!-- #main-content -->
            

         

nestedgridsIEcompatibility

Hi,

I have a problem with nested grids: in my case, it doesn't work on IE9/IE10/IE11 with the attached HTML code.

In the #content part, only the small-12 class seems to be taken and not the large-8 or large-4, so the columns don't work.

Am I doing something wrong?

<div id="main-content" class="row main-content">

    <div id="primary" class="small-12 medium-8 large-9 columns content-area">

        <div id="content" class="row site-content" role="main">
            <div class="small-12 large-4 columns">
                <div id="sub-pages-navigation">
                    <dl class="sub-nav">


                        <dt><a href="http://colibri.ua-preprod.com/produit/fonctionnalites/">Fonctionnalités</a></dt>
                        <dd class="active"><a href="http://colibri.ua-preprod.com/?page_id=62">Revue de l'historique</a>
                        </dd>
                        <dd><a href="http://colibri.ua-preprod.com/?page_id=64">Nouveaux articles et substitutions</a>
                        </dd>
                        <dd><a href="http://colibri.ua-preprod.com/?page_id=66">Calculs de prévisions</a></dd>
                        <dd><a href="http://colibri.ua-preprod.com/?page_id=119">Enrichissement collaboratif</a></dd>
                        <dd><a href="http://colibri.ua-preprod.com/?page_id=121">Indicateurs de performance</a></dd>

                    </dl>
                </div>
                <!-- #sub-pages-navigation -->
            </div>
            <article id="post-62" class="post-62 page type-page status-publish hentry small-12 large-8 columns">
                <header class="entry-header"><h1 class="entry-title">Revue de l&rsquo;historique</h1></header>
                <!-- .entry-header -->
                <div class="entry-content">
                    <h2>Gestion des historiques</h2>

                    <p>La gestion des historiques de vente est une étape primordiale dans la construction des prévisions
                        de ventes :</p>
                    <ul>
                        <li>Permet de corriger l’effet de facteurs extraordinaires sur les ventes (ruptures, promotions&#8230;)</li>
                        <li>Permet d’obtenir un historique le plus proche d’une activité “normale”</li>
                    </ul>
                    <h2>La correction d’historiques avec Colibri :</h2>

                    <p>En déléguant tout ou partie du périmètre concerné (collaboration) Colibri détecte automatiquement
                        les valeurs anormales en calculant un couloir de normalité (intervalle de confiance), vous
                        donnant ainsi la possibilité de corriger :</p>
                    <ul>
                        <li>Manuellement l’historique via saisie des valeurs voulues (dans une grille ou sur un graph)
                        </li>
                        <li>Automatiquement en choisissant une stratégie de correction et un périmètre d’action</li>
                        <li>En sollicitant la collaboration d’une/plusieurs personnes</li>
                    </ul>
                    <p>Colibri vous donne la possibilité de suivre l’avancement de ce processus via des KPI dédiés, de
                        tracer la contribution des collaborateurs et de détecter les points bloquants</p>

                    <p style="text-align: center;"><a
                            href="http://colibri.ua-preprod.com/wp-content/uploads/2014/02/capture_ecran_colibri_historiques.jpg"><img
                            class="aligncenter size-large wp-image-124" alt="Historiques"
                            src="http://colibri.ua-preprod.com/wp-content/uploads/2014/02/capture_ecran_colibri_historiques-720x405.jpg"
                            width="720" height="405"/></a></p>
                </div>
                <!-- .entry-content -->
            </article>

        </div>
        <!-- #content -->

    </div>
    <!-- #primary -->

    <div id="secondary" class="small-12 medium-4 large-3 columns wigdet-area" role="complementary">

        <aside id="simpleimage-4" class="widget widget_cta"><h1 class="widget-title">Colibri à partir de 950€/mois</h1>

            <p>Votre prototype gratuit disponible en 48h !</p>

            <p class="more text-center"><a href="http://colibri.ua-preprod.com/contact/" class="button round">Contactez-nous</a>
            </p></aside>
        <aside id="simpleimage-3" class="widget widget_cta"><h1 class="widget-title">Démonstration en ligne</h1>

            <p>Découvrez toutes les fonctionnalités de Colibri en quelques minutes</p>

            <p class="more text-center"><a href="http://colibri.ua-preprod.com/produit/demo-en-ligne/"
                                           class="button round">Voir la vidéo</a></p></aside>

    </div>
    <!-- #secondary -->
</div>
<!-- #main-content -->
            

         

This post has been closed. No new replies can be added.

Cedric Neveu over 5 years ago

Ok, my mistake.

Scripts and CSS created for IE8 and lower are also enqueued for IE9+... so it mess up all..

Cedric Neveu over 5 years ago

Well, finally it's not so simple and it's not an enqueue problem...

So, there's something wrong with my html but I don't see what it could be.

If someone has an idea, it will be a great help!

Rafi Benkual over 5 years ago

We know that Chrome and Firefox usually fills in unclosed <div> tags. I ran the code through dirty markup to make sure and I checked all the <div> tags. http://cdpn.io/oipEf

It must have something to do with how it is nested and how IE interprets that. Anyone else seen this before?

Cedric Neveu over 5 years ago

Hi Rafi,

Thanks for your response.

It is a very strange behavior... I'm actually struggling to find how to fix that issue. I hope to find the why and how quickly!

Cedric Neveu over 5 years ago

Ok, I don't know why but on desktop versions, it seems that IE10+ (and probably IE9) doesn't read the "large" class but read first the "medium" class and if it doesn't exist, the "small" class.

Could it be a problem with my breakpoint settings?

Cedric Neveu over 5 years ago

Well, I'm an idiot.

I forgot to settle up correctly $medium-range and $large-range in the _settings.scss