How to make my CSS grid work on both Firefox and IE 11?

Question

With the below code the css-grid displays without any problems on Firefox, Opera, and Chromium Browser

body {
  background-color: #ebf5d7;
  grid-gap: 5px;
  grid-template-columns: 10% 72% 17%;
  grid-template-areas:

  "header   header   header"
  "nav      nav      nav" 
  "linkBox  linkBox  linkBox"
  "main     main     main"
  "infoBox  infoBox  infoBox"
  "footer   footer   footer" ;
}

body > header {
    grid-area: header;
    background-image: url("/Bilder/f409784856.png");
    padding: 60px;
}

body > nav {
  grid-area: nav;
  background-color: #d2f5c4;
}
body > #externalLinks {
  grid-area: linkBox;
  background-color:  #d2f3c6;
}
body > main {
  grid-area: main;
  background-color: #eaf6e5;
}
body > #furtherInformation {
  grid-area: infoBox;
  background-color: #d2f3c6;
}

body > footer {
  grid-area: footer;
  background-color: #99ee7a;
}

Screenshot of how Firefox looks:

Now, running the below code on IE it looks like this:

body {
    display: grid;
    display: -ms-grid;
    width: 100%;
    height: 250px;
    -ms-grid-columns: 9% 73% 17%;
    -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
    background-color: #ebf5d7;
    margin: 5px;
}
body > header {
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  background-image: url("/Bilder/f409784856.png");
  background-repeat: no-repeat;
  padding: 60px;
}
body > nav {
  -ms-grid-column: 1/3;
  -ms-grid-column-span: 3;
  -ms-grid-row: 2;
  background-color: #d2f5c4;
  margin: 5px;
}
body > #externalLinks {
  -ms-grid-column: 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
   margin: 5px;
   background-color:  #d2f3c6;

}
body > main {

 display: block; 
 -ms-grid-column: 2; 
 -ms-grid-row: 3;
 -ms-grid-row-span: 3;
 margin: 5px;

 background-color: #eaf6e5;
}

body > #furtherInformation {

  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
   margin: 5px;
   background-color: #d2f3c6;

}
body > footer {

    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 6;
    -ms-grid-row-span: 6;
    margin: 5px;
    background-color: #99ee7a;
}

How yours to see, both Codes (IE 11 and Firefox) working

what follows the two code snippets above (IE and Firefox) here.

I want to use both variations on a single file, but my grid doesn't work properly on Firefox.

How do I make use of a single file and still support both Firefox and IE?

Hi and welcome to Stackoverflow ! . Before we go into detail , can you use this tool https://autoprefixer.github.io/ and paste your mozilla CSS and use the generated CSS for IE . Just to be sure — semuzaboi, Jan 22 '19 at 17:51
In that link you will see textareas on the left and right - Copy the first CSS you have pasted to the left hand side and click on the Apply button, a CSS is generated on the right hand side, this is the prefixed IE CSS. Copy and use that along with your mozilla CSS in a single file and check if it works :) — semuzaboi, Jan 22 '19 at 18:33
Now habe this Window on my Mozilla https://codepen.io/mezb/pen/omNrPP und this Screenshot of my IE https://i.imgur.com/c1NH1Ev.png — biotza, Jan 22 '19 at 21:32
Should probably be more specific about which version of IE you're referring to. — Tieson T., Jan 22 '19 at 22:01
@TiesonT. if no version is specified it's long been the expectation that we're talking about IE11. Versions <= IE10 have been EOL for 3 or more years now. IE11 itself has been EOL for everything but security patches since Edge was released as well. — TylerH, Jan 22 '19 at 22:37
@TylerH I don't dispute that, but I also have been required to deal with "bugs" that came down to the user using an old version of IE, so it's a question I'm always going to ask. — Tieson T., Jan 22 '19 at 22:47
I‘ve tried your code on my side,this is my running result on Chrome and IE11. https://i.stack.imgur.com/30nX5.png It seems displaying the same. What do you want it display like? — Jenifer Jiang, Jan 23 '19 at 10:15
Possible duplicate of [CSS Grid Layout not working in Edge and IE 11 even with -ms prefix](https://stackoverflow.com/questions/45786788/css-grid-layout-not-working-in-edge-and-ie-11-even-with-ms-prefix) — Vadim Ovchinnikov, Jan 23 '19 at 11:56
First ; my IE 11 Code WORK , Second; Mozilla Code WORK ,my Problem , when both Code are together on a File , Mozilla not working.. — biotza, Jan 23 '19 at 16:38
I think the link of Top , above bring people to confusion , because my IE 11 Code working... — biotza, Jan 23 '19 at 18:49

biotza · Accepted Answer · 2019-01-27T14:05:44.093

I found the solution of my Problem !

Thank this website i found the solution of my problem.. , with Flexbox Fallbacks... the solution is build a new container with Flexbox for IE 11.. .

Now have both Codes on one File , how to show it..

body {

  display: grid;    
  background-color: #ebf5d7;
  grid-gap: 5px;
  grid-template-columns: 10% 72% 17%;
  grid-template-areas:

   "header   header    header"
   "nav      nav          nav"
   "linkBox  main     infoBox"
   "footer   footer   footer";
}


body > header {
grid-area: header;
background-image: url("/Bilder/f409784856.png");
    padding: 60px;

}

body > nav {
 grid-area: nav;
 background-color: #d2f5c4;

}

body > #externalLinks {
 grid-area: linkBox;
 background-color:  #d2f3c6;

}
body > main {
  grid-area: main;
  background-color: #eaf6e5;
}

body > #furtherInformation {
  grid-area: infoBox;
  background-color: #d2f3c6;
}

body > footer {
 grid-area: footer;
 background-color: #99ee7a;

}

          /* IE 11 */

body {

   display: flex;
   flex-wrap: wrap;
   autoprefixer({ grid: true })
   width: 100%;
   background-color: #ebf5d7;



} 
body > header {
   flex-basis:100%;
   margin: 5px;
   background-image: url("/Bilder/f409784856.png");

}

body > nav {
    flex-basis:100%;
    margin: 5px;
    background-color: #d2f5c4; 
    -ms-grid-column: 1;
    -ms-grid-column-span: 2; 
    -ms-grid-row: 2;
} 

body > #externalLinks {

   flex-basis:8%;
   margin: 5px;
   background-color:  #d2f3c6;
   -ms-grid-column: 1;
   -ms-grid-row: 3;
}
body > main {
  flex-basis:68%;
  margin: 5px;
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  -ms-grid-row-span: 4;
  background-color: #eaf6e5;
}

body > #furtherInformation {
  flex-basis: 20.4%;
  margin: 5px;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
  background-color: #d2f3c6;
}

body > footer {
    flex-basis:100%;
    margin: 5px;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 6;
    -ms-grid-row-span: 6;
    background-color: #99ee7a;
}

How to see now my IE 11

and my Firefox...

How to make my CSS grid work on both Firefox and IE 11?

1 Answers1