0

I have the following CSS defined and it works fine for Chrome and Firefox but only the 2nd line to the grid displays in Microsoft Edge. See https://farquharmacrae.blogspot.com.au/2017/09/first-generation.html. How do I adjust the CSS for the full grid to display in Microsoft Edge? Doesn't Edge now support grid-template-columns and grid-auto-rows without a prefix? Any assistance will be greatly appreciated. 

    *,
    *:before,
    *:after {
         box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         -ms-box-sizing: border-box;
    }

    .outer {
     max-width: 1000px;
     margin: 0 auto;
     display: grid;
     grid-gap: 1px;
     }

     /* no grid support? */
     .outer {
     display: flex;
     display: -ms-flex; /* Edge */
     display: -webkit-flex; /* Safari */     
     flex-wrap: wrap;
    -ms-flex: wrap;
    -webkit-flex: wrap;
    }

    .outer {
     display: grid;
     margin: 0 auto;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-auto-rows: minmax(250px, auto);
     }

     .outer > * {
      background-color: #fcf0ce;
      color: #4a0f03;
      font-size: 100%;
      margin-bottom: 0px;
     }

     .holder {
      margin-left: 1px;
      margin-right: 1px;
      /* needed for the flex layout */
       flex: 0 1 250px;
      -ms-flex: 0 1 250px;
      -webkit-flex: 0 1 250px;
      }

      .topic {
       display: grid;
       position: relative;
       overflow: hidden;
       cursor: pointer;
       transition: transform 0.4s;
      -webkit-transition: -webkit-transform 0.4s;
       -moz-transition: -moz-transform 0.4s;
     /* needed for the flex layout */
       flex: 0 1 250px;
      -ms-flex: 0 1 250px;
      -webkit-flex: 0 1 250px; 
      }

   /* with background images defined for each grid item - here are two of */ 
   /* twelve - all with different images and background-size and position */
   /* adjust for each image */

    .grid1 {
      background: url("image1") no-repeat;
      background-size: cover;
     }

    .grid2{
     background: url("image2") no-repeat;
     background-size: cover;
     background-position: 35% 0;
    }

   /* and the overlay for each image */
   .figcaption {
   position: absolute;
   left: 0;
   bottom: 0;
   margin: 0;
   width: 100%;
  height: 100%;
  opacity: 0.6;  
  z-index: 5;
  cursor: pointer;
  }

.captiontext {
  position: absolute;
  display: inline-block;
  padding: 10px;
  bottom: 3%;
  left: 0px;
  width: 100%;
  height: auto;
  color: #fcceaa;
  text-align: left;
  font-size: 100%;
  font-weight: bold;
  background: rgba(55, 29, 9, 0.4);
 }


   <div class="outer holder">
   <div class="topic grid1">
   <h2 class="captiontext">Caption1</h2>
   <a class="figcaption" href="post1"></a>
   </div>
   <div class="topic grid2">
   <h2 class="captiontext">Caption2/h2>
   <a class="figcaption" href="post2"></a>
   </div>
   .
   .
   .
   </div>

This is a screen capture of how the page appears in Edge This is the correct grid layout from Chrome

Farquhar
  • 21
  • 3
  • A link to your web site does no one any good once you fix this and the problem goes away. You are required to post a complete example here. [mcve] – Rob Oct 30 '17 at 15:57
  • Here is a screen capture from Edge – Farquhar Nov 01 '17 at 00:01
  • Your screen captures adds little value to your question. You *still* have not provided the required markup that will let us help you and that is why your question is voted to be closed. – Rob Nov 01 '17 at 01:11
  • Hello Rob, Sorry I am very new to this. (I haven't done any coding for almost 30 years.) I hope now I have provided all that is needed for you to assist. Thank you for your patience – Farquhar Nov 01 '17 at 05:01

1 Answers1

1

Added height and width to the .topic class and it now works fine in Edge, although not centered on the page as it is in other browsers

  .topic {
     display: grid;
     position: relative;
     width auto;
     height: 250px;
     overflow: hidden;
     cursor: pointer;
     transition: transform 0.4s;
     -webkit-transition: -webkit-transform 0.4s;
     -moz-transition: -moz-transform 0.4s;
    /* needed for the flex layout */
     flex: 0 1 250px;
     -ms-flex: 0 1 250px;
    -webkit-flex: 0 1 250px; 
   }
Farquhar
  • 21
  • 3