3

I'm working on my first website, and it works fine in Chrome and Firefox, but in Internet Explorer and Edge the grid for my main content is not working.

I read on one post here that it could be because I used repeat() and span when defining my layout, so I changed those to just type each column size out instead of using repeat and just specify what column/row the content ends at instead using span but the problem was the same. I changed it back to using repeat and span in case that is not the problem.

Here is my HTML and CSS:

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: local('IBM Plex Sans'), local('IBMPlexSans'), url(https://fonts.gstatic.com/s/ibmplexsans/v2/zYXgKVElMYYaJe8bpLHnCwDKhdHeFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 
}

#grid p {font-family:"Roboto Slab";}
#grid h4 {font-family:"IBM Plex Sans";}
#grid a {font-family:"Space Mono"}

#slider {
 background-color: #CC2424;
 padding-top: 25px;
}

#grid {
 text-align: center;
 display: grid;
 grid-template-columns: 1fr repeat(3, 2fr);
 grid-template-rows: 300px 300px;
 margin-left: 2px;
}

#ps {
 text-align: left;
 grid-row: 1 / span 1;
 grid-column: 1 / span 1;
 line-height: 25px;
 border-bottom: 5px solid black;
 overflow: scroll;
}

#news {
 text-align: left;
 grid-row: 2 / span 1;
 grid-columnn: 1 / span 1;
 overflow: scroll;
}

.contents {
 display: flex;
 justify-content: center;
 align-items: center;
}

#infoA {
 grid-row: 1 / span 1;
 grid-column: 2 / span 1;
 background-color: #D1D1D1;
 color: black;
 border-bottom: 5px solid #606060;
}

#infoB {
 grid-row: 1 / span 1;
 grid-column: 3 / span 1;
 background-color: #606060;
 color: white;
 border-bottom: 5px solid #D1D1D1;
}

#infoC {
 grid-row: 2 / span 1;
 grid-column: 2 / span 1;
 background-color: #D1D1D1;
 color: black;
}

#infoD {
 grid-row: 2 / span 1;
 grid-column: 3 / span 1;
 background-color: #606060;
 color: white;
}

#infoImageA {
 grid-row: 1 / span 1 ;
 grid-column: 4 / span 1;
 background-color: black;
 overflow: hidden;
 border-bottom: 5px solid white;
}

#infoImageB {
 grid-row: 2 / span 1 ;
 grid-column: 4 / span 1;
 background-color: black;
 overflow: hidden;
}

#grid img {
 width: 300px;
}
<div id="grid">
    <div id="ps">
        <h4>Prodcts & Services</h4>
        <ul>
            <li> <a href="./WHEELSETbbm.html" >Wheelset Press</a> </li>
            <li> <a href="./BOGIEbbm.html" >Bogie Testing Benches</a> </li>
            <li> <a href="./AUXILIARYbbm.html" >Auxiliary Equipment</a> </li>
            <li> <a href="./UNDERFLOORbbm.html" >Underfloor Lifting Machines</a> </li>
            <li> <a href="./SPECIALbbm.html" >Special Equipment Ordering</a> </li>
        </ul>
    </div>
   
    <div id="infoA" class="contents">
        <p>BBM employs approximately 100 dedicated <br>people in both our office and <br>workshop facilities. <br>BBM was born in 1965, producing fabricated parts.</p>
    </div>
   
    <div id="infoB" class="contents">
        <p>Thanks to long relationships with larger <br>companies, BBM extended its <br>product offering into railway assembly and <br>maintenance equipment in 1987.</p> 
    </div>
   
    <div id="infoC" class="contents">
        <p>BBM offers professional services, <br>pre-sale advice, planning, installation <br>and post-sale service to meet <br>our customer's requirements..</p>
    </div>
   
    <div id="infoD" class="contents">
        <p>BBM's quality and safety management systems <br>are certified to EN-ISO 9001:2008, EN-ISO 3834-2 <br>and DIN18800. BBM is known worldwide and <br>over the past 20 years, has provided <br>advanced machines to Assembly and <br>Maintenance Workshops in the rail industry throughout.</p>
    </div>
   
    <div id="infoImageA">
        <img src="./images/worldmap_open.jpg" />
    </div>
   
    <div id="infoImageB">
        <img src="./Images/Dscn0921-200.jpg"/>
    </div>
   
    <div id="news">

Here is how the grid is showing up in IE and Edge

This is how its supposed to look

TylerH
  • 20,799
  • 66
  • 75
  • 101
Alex Crim
  • 57
  • 1
  • 2
  • 6
  • Your code does not reproduce the problem. http://stackoverflow.com/help/mcve – Michael Benjamin May 22 '18 at 19:54
  • Based off the code you provided, it works fine in edge v42. IE never plays nice to new things. It's one of those grandpas that don't like change. – soulshined May 22 '18 at 19:54
  • You have a typo in one of your CSS declarations (`grid-columnn` has two Ns and should only have one.). You also have an opened div that is never closed at the end. – TylerH May 22 '18 at 20:06
  • @soulshined To be fair it's more that it is old and unsupported software. You don't expect Netscape Navigator or Safari for Windows to support CSS Grid either, do you? – TylerH May 22 '18 at 20:10
  • 1
    Of course not @TylerH , and I wasn't complaining. It was a metaphor to convey the same message to OP. But let's be honest, Safari for Windows was never a good idea :P – soulshined May 22 '18 at 20:12
  • Possible duplicate of [CSS: display: grid and/or -ms-grid](https://stackoverflow.com/questions/45124230/css-display-grid-and-or-ms-grid) – johnny May 23 '18 at 13:10
  • Mario, I would answer but it is already answered I think in the linked question. Does it help? – johnny May 23 '18 at 13:10

1 Answers1

3

When you use this kind or properties (flexbox, grid ...) which are recent in CSS you must check the compatibility for every browser (especially those product by microsoft ...) : https://caniuse.com/#search=grid

As you can see, the grid feature need some prefix in order to work in every browser.

This tool will help you to prefix your css : https://autoprefixer.github.io/.

Just copy / paste your css in and get the result, your code will now work for IE.

Clément Jacquelin
  • 263
  • 1
  • 11