Edge & IE CSS Grid CompatibilityCSS Grid Layout not working in Edge and IE 11 even with -ms prefixBrowser support for CSS GridSet cellpadding and cellspacing in CSS?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSVertical alignment of elements overlapping in IEWhat does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?Textarea too large for page?
Is it OK to throw pebbles and stones in streams, waterfalls, ponds, etc.?
Two palindromes are not enough
Odd PCB Layout for Voltage Regulator
Reaction mechanism of rearrangement
What would you need merely the term "collection" for pitches, but not "scale"?
Rear derailleur got caught in the spokes, what could be a root cause
What was the first science fiction or fantasy multiple choice book?
What's the point of stochastic volatiliy models if you can use local volatility?
Installed software from source, how to say yum not to install it from package?
Processes in a session in an interactive shell vs in a script
Avoiding repetition when using the "snprintf idiom" to write text
Find the closest three-digit hex colour
What does 'in attendance' mean on an England death certificate?
What is my external HDD doing?
English idiomatic equivalents of 能骗就骗 (if you can cheat, then cheat)
Why would Dementors torture a Death Eater if they are loyal to Voldemort?
"nunca" placement after a verb with "no"
Basis and cardinality
How to count the number of bytes in a file, grouping the same bytes?
What does this Pokemon Trainer mean by saying the player is "SHELLOS"?
Is it theoretically possible to hack printer using scanner tray?
Negative Voltage creating Sinking Terminal
Having to constantly redo everything because I don't know how to do it
Does an NPC know when a character has passed the save for Truth Serum?
Edge & IE CSS Grid Compatibility
CSS Grid Layout not working in Edge and IE 11 even with -ms prefixBrowser support for CSS GridSet cellpadding and cellspacing in CSS?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSVertical alignment of elements overlapping in IEWhat does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?Textarea too large for page?
0
I recently redeveloped my site using CSS Grid. It works on all browsers I have tried except Edge & IE where the row heights are huge. I have also tried the Autoprefixer with no luck. The display is also responsive in browsers other than Edge & IE. My CSS code is as follows and I would appreciate any suggestions:
@charset "utf-8";
body
background: #a1dada;
/* padding: 3rem 5rem; */
.container
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 0.1fr);
border-left: 10px ridge #fffb00;
border-top: 10px ridge #fffb00;
border-bottom: 10px ridge #fffb00;
border-right: 10px ridge #fffb00;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background-color: white;
/*background-image: linear-gradient(to bottom,lightblue, rgba(158, 221, 55, 0.212));*/
.item1
grid-area: 1/2/1/5;
font-size: 3.5vw;
font-weight: bolder;
color: black;
text-align: center;
margin-top:3vh;
.item2
grid-area: 2/2/2/5;
text-align: center;
font-weight: bold;
color: rgb(5, 83, 40);
font-family: "Patua One";
font-style: normal;
text-transform: uppercase;
font-size: 1vw;
margin: 2vh;
.item3
grid-area: 3/2/3/5;
text-shadow: 1px 1px 2px #000000;
text-align: center;
font-weight: bolder;
color: rgb(91, 41, 226);
font-family: "Patua One";
font-style: normal;
font-size: large;
font-size: 1.75vw;
text-transform: uppercase;
margin: 2vh;
.item4
grid-area: 4/2/4/5;
text-shadow: 0px 0px #FFFFFF;
text-align: center;
font-size: 1.2vw;
font-family: "Patua One";
font-weight: bold;
color: #000000;
margin: 2vh;
.item5
grid-area: 1/1/5/2;
background-image: url('PowerPoint Fill Shape.png');
width: 96%;
background-repeat: no-repeat;
background-position: center;
border-right: thick ridge rgb(240, 236, 224);
border-width: 9px;
.services-title
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
padding-left: 20px;
padding-bottom: 5px;
padding-top: 5px;
background-color: white;
color: #1318E7;
font-size: 1.5vw;
font-weight: bolder;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
.services-list
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 5;
background-color:white;
margin-top: -20px;
padding-left: 20px;
color: #000000;
font-weight: bold;
font-size: 1.25vw;
line-height: 1.5em;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
.navmenu
grid-row-start: 5;
grid-row-end: 6;
text-align: center;
background-color: #006500;
border: thick ridge #CC9900;
border-radius: 6px;
padding-top: 15px;
padding-bottom: 15px;
.navmenu > a
font-family: source-sans-pro, "Trebuchet MS", Verdana, Arial, sans-serif, helvetica;
text-decoration: none;
color: #FFF;
text-shadow: 2px 2px 2px #000;
font-size:1.4vw;
.navmenu a:hover
color: rgb(236, 11, 11);
font-weight: bolder;
.rightmain
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
.center
grid-area: 6/3/8/4;
background-image: url('Patent-Img-ResG.jpg');
background-size: contain;
padding: 3px;
background-position: top;
.leftmain
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
.leftmaintitle
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
.rightmaintitle
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
.foot
grid-column-start: 3;
grid-row-start: 7;
align-self: end;
background-color: #FFDAB5;
border-color: #000000;
border-style: ridge;
text-align: center;
border-radius: 5px;
height: 25px;
font-weight: bolder;
font-size: 1.2vw;
css internet-explorer microsoft-edge css-grid
edited Mar 26 at 16:33
TylerH
16.3k10 gold badges56 silver badges71 bronze badges
asked Mar 20 at 16:36
BobBob
368 bronze badges
add a comment |
0
I recently redeveloped my site using CSS Grid. It works on all browsers I have tried except Edge & IE where the row heights are huge. I have also tried the Autoprefixer with no luck. The display is also responsive in browsers other than Edge & IE. My CSS code is as follows and I would appreciate any suggestions:
@charset "utf-8";
body
background: #a1dada;
/* padding: 3rem 5rem; */
.container
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 0.1fr);
border-left: 10px ridge #fffb00;
border-top: 10px ridge #fffb00;
border-bottom: 10px ridge #fffb00;
border-right: 10px ridge #fffb00;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background-color: white;
/*background-image: linear-gradient(to bottom,lightblue, rgba(158, 221, 55, 0.212));*/
.item1
grid-area: 1/2/1/5;
font-size: 3.5vw;
font-weight: bolder;
color: black;
text-align: center;
margin-top:3vh;
.item2
grid-area: 2/2/2/5;
text-align: center;
font-weight: bold;
color: rgb(5, 83, 40);
font-family: "Patua One";
font-style: normal;
text-transform: uppercase;
font-size: 1vw;
margin: 2vh;
.item3
grid-area: 3/2/3/5;
text-shadow: 1px 1px 2px #000000;
text-align: center;
font-weight: bolder;
color: rgb(91, 41, 226);
font-family: "Patua One";
font-style: normal;
font-size: large;
font-size: 1.75vw;
text-transform: uppercase;
margin: 2vh;
.item4
grid-area: 4/2/4/5;
text-shadow: 0px 0px #FFFFFF;
text-align: center;
font-size: 1.2vw;
font-family: "Patua One";
font-weight: bold;
color: #000000;
margin: 2vh;
.item5
grid-area: 1/1/5/2;
background-image: url('PowerPoint Fill Shape.png');
width: 96%;
background-repeat: no-repeat;
background-position: center;
border-right: thick ridge rgb(240, 236, 224);
border-width: 9px;
.services-title
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
padding-left: 20px;
padding-bottom: 5px;
padding-top: 5px;
background-color: white;
color: #1318E7;
font-size: 1.5vw;
font-weight: bolder;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
.services-list
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 5;
background-color:white;
margin-top: -20px;
padding-left: 20px;
color: #000000;
font-weight: bold;
font-size: 1.25vw;
line-height: 1.5em;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
.navmenu
grid-row-start: 5;
grid-row-end: 6;
text-align: center;
background-color: #006500;
border: thick ridge #CC9900;
border-radius: 6px;
padding-top: 15px;
padding-bottom: 15px;
.navmenu > a
font-family: source-sans-pro, "Trebuchet MS", Verdana, Arial, sans-serif, helvetica;
text-decoration: none;
color: #FFF;
text-shadow: 2px 2px 2px #000;
font-size:1.4vw;
.navmenu a:hover
color: rgb(236, 11, 11);
font-weight: bolder;
.rightmain
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
.center
grid-area: 6/3/8/4;
background-image: url('Patent-Img-ResG.jpg');
background-size: contain;
padding: 3px;
background-position: top;
.leftmain
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
.leftmaintitle
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
.rightmaintitle
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
.foot
grid-column-start: 3;
grid-row-start: 7;
align-self: end;
background-color: #FFDAB5;
border-color: #000000;
border-style: ridge;
text-align: center;
border-radius: 5px;
height: 25px;
font-weight: bolder;
font-size: 1.2vw;
css internet-explorer microsoft-edge css-grid
edited Mar 26 at 16:33
TylerH
16.3k10 gold badges56 silver badges71 bronze badges
asked Mar 20 at 16:36
BobBob
368 bronze badges
1
IE/Edge might use a different version of the spec. - caniuse.com/#search=css-grid
– Paulie_D
Mar 20 at 16:48
stackoverflow.com/a/46060829/3597276
– Michael_B
Mar 20 at 17:09
It should work with MS Edge. IE 11 use the older version of Grid. So the new version of grid will not work with IE. While you post the code you also need to post the HTML along with CSS. so that we can try to run it and check the issue. Ref: stackoverflow.com/questions/45786788/…
– Deepak-MSFT
Mar 21 at 3:01
add a comment |
0
0
0
I recently redeveloped my site using CSS Grid. It works on all browsers I have tried except Edge & IE where the row heights are huge. I have also tried the Autoprefixer with no luck. The display is also responsive in browsers other than Edge & IE. My CSS code is as follows and I would appreciate any suggestions:
@charset "utf-8";
body
background: #a1dada;
/* padding: 3rem 5rem; */
.container
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 0.1fr);
border-left: 10px ridge #fffb00;
border-top: 10px ridge #fffb00;
border-bottom: 10px ridge #fffb00;
border-right: 10px ridge #fffb00;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background-color: white;
/*background-image: linear-gradient(to bottom,lightblue, rgba(158, 221, 55, 0.212));*/
.item1
grid-area: 1/2/1/5;
font-size: 3.5vw;
font-weight: bolder;
color: black;
text-align: center;
margin-top:3vh;
.item2
grid-area: 2/2/2/5;
text-align: center;
font-weight: bold;
color: rgb(5, 83, 40);
font-family: "Patua One";
font-style: normal;
text-transform: uppercase;
font-size: 1vw;
margin: 2vh;
.item3
grid-area: 3/2/3/5;
text-shadow: 1px 1px 2px #000000;
text-align: center;
font-weight: bolder;
color: rgb(91, 41, 226);
font-family: "Patua One";
font-style: normal;
font-size: large;
font-size: 1.75vw;
text-transform: uppercase;
margin: 2vh;
.item4
grid-area: 4/2/4/5;
text-shadow: 0px 0px #FFFFFF;
text-align: center;
font-size: 1.2vw;
font-family: "Patua One";
font-weight: bold;
color: #000000;
margin: 2vh;
.item5
grid-area: 1/1/5/2;
background-image: url('PowerPoint Fill Shape.png');
width: 96%;
background-repeat: no-repeat;
background-position: center;
border-right: thick ridge rgb(240, 236, 224);
border-width: 9px;
.services-title
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
padding-left: 20px;
padding-bottom: 5px;
padding-top: 5px;
background-color: white;
color: #1318E7;
font-size: 1.5vw;
font-weight: bolder;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
.services-list
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 5;
background-color:white;
margin-top: -20px;
padding-left: 20px;
color: #000000;
font-weight: bold;
font-size: 1.25vw;
line-height: 1.5em;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
.navmenu
grid-row-start: 5;
grid-row-end: 6;
text-align: center;
background-color: #006500;
border: thick ridge #CC9900;
border-radius: 6px;
padding-top: 15px;
padding-bottom: 15px;
.navmenu > a
font-family: source-sans-pro, "Trebuchet MS", Verdana, Arial, sans-serif, helvetica;
text-decoration: none;
color: #FFF;
text-shadow: 2px 2px 2px #000;
font-size:1.4vw;
.navmenu a:hover
color: rgb(236, 11, 11);
font-weight: bolder;
.rightmain
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
.center
grid-area: 6/3/8/4;
background-image: url('Patent-Img-ResG.jpg');
background-size: contain;
padding: 3px;
background-position: top;
.leftmain
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
.leftmaintitle
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
.rightmaintitle
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
.foot
grid-column-start: 3;
grid-row-start: 7;
align-self: end;
background-color: #FFDAB5;
border-color: #000000;
border-style: ridge;
text-align: center;
border-radius: 5px;
height: 25px;
font-weight: bolder;
font-size: 1.2vw;
css internet-explorer microsoft-edge css-grid
edited Mar 26 at 16:33
TylerH
16.3k10 gold badges56 silver badges71 bronze badges
asked Mar 20 at 16:36
BobBob
368 bronze badges
I recently redeveloped my site using CSS Grid. It works on all browsers I have tried except Edge & IE where the row heights are huge. I have also tried the Autoprefixer with no luck. The display is also responsive in browsers other than Edge & IE. My CSS code is as follows and I would appreciate any suggestions:
@charset "utf-8";
body
background: #a1dada;
/* padding: 3rem 5rem; */
.container
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 0.1fr);
border-left: 10px ridge #fffb00;
border-top: 10px ridge #fffb00;
border-bottom: 10px ridge #fffb00;
border-right: 10px ridge #fffb00;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background-color: white;
/*background-image: linear-gradient(to bottom,lightblue, rgba(158, 221, 55, 0.212));*/
.item1
grid-area: 1/2/1/5;
font-size: 3.5vw;
font-weight: bolder;
color: black;
text-align: center;
margin-top:3vh;
.item2
grid-area: 2/2/2/5;
text-align: center;
font-weight: bold;
color: rgb(5, 83, 40);
font-family: "Patua One";
font-style: normal;
text-transform: uppercase;
font-size: 1vw;
margin: 2vh;
.item3
grid-area: 3/2/3/5;
text-shadow: 1px 1px 2px #000000;
text-align: center;
font-weight: bolder;
color: rgb(91, 41, 226);
font-family: "Patua One";
font-style: normal;
font-size: large;
font-size: 1.75vw;
text-transform: uppercase;
margin: 2vh;
.item4
grid-area: 4/2/4/5;
text-shadow: 0px 0px #FFFFFF;
text-align: center;
font-size: 1.2vw;
font-family: "Patua One";
font-weight: bold;
color: #000000;
margin: 2vh;
.item5
grid-area: 1/1/5/2;
background-image: url('PowerPoint Fill Shape.png');
width: 96%;
background-repeat: no-repeat;
background-position: center;
border-right: thick ridge rgb(240, 236, 224);
border-width: 9px;
.services-title
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
padding-left: 20px;
padding-bottom: 5px;
padding-top: 5px;
background-color: white;
color: #1318E7;
font-size: 1.5vw;
font-weight: bolder;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
.services-list
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 5;
background-color:white;
margin-top: -20px;
padding-left: 20px;
color: #000000;
font-weight: bold;
font-size: 1.25vw;
line-height: 1.5em;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
.navmenu
grid-row-start: 5;
grid-row-end: 6;
text-align: center;
background-color: #006500;
border: thick ridge #CC9900;
border-radius: 6px;
padding-top: 15px;
padding-bottom: 15px;
.navmenu > a
font-family: source-sans-pro, "Trebuchet MS", Verdana, Arial, sans-serif, helvetica;
text-decoration: none;
color: #FFF;
text-shadow: 2px 2px 2px #000;
font-size:1.4vw;
.navmenu a:hover
color: rgb(236, 11, 11);
font-weight: bolder;
.rightmain
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
.center
grid-area: 6/3/8/4;
background-image: url('Patent-Img-ResG.jpg');
background-size: contain;
padding: 3px;
background-position: top;
.leftmain
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
.leftmaintitle
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
.rightmaintitle
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
.foot
grid-column-start: 3;
grid-row-start: 7;
align-self: end;
background-color: #FFDAB5;
border-color: #000000;
border-style: ridge;
text-align: center;
border-radius: 5px;
height: 25px;
font-weight: bolder;
font-size: 1.2vw;
@charset "utf-8";
body
background: #a1dada;
/* padding: 3rem 5rem; */
.container
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 0.1fr);
border-left: 10px ridge #fffb00;
border-top: 10px ridge #fffb00;
border-bottom: 10px ridge #fffb00;
border-right: 10px ridge #fffb00;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background-color: white;
/*background-image: linear-gradient(to bottom,lightblue, rgba(158, 221, 55, 0.212));*/
.item1
grid-area: 1/2/1/5;
font-size: 3.5vw;
font-weight: bolder;
color: black;
text-align: center;
margin-top:3vh;
.item2
grid-area: 2/2/2/5;
text-align: center;
font-weight: bold;
color: rgb(5, 83, 40);
font-family: "Patua One";
font-style: normal;
text-transform: uppercase;
font-size: 1vw;
margin: 2vh;
.item3
grid-area: 3/2/3/5;
text-shadow: 1px 1px 2px #000000;
text-align: center;
font-weight: bolder;
color: rgb(91, 41, 226);
font-family: "Patua One";
font-style: normal;
font-size: large;
font-size: 1.75vw;
text-transform: uppercase;
margin: 2vh;
.item4
grid-area: 4/2/4/5;
text-shadow: 0px 0px #FFFFFF;
text-align: center;
font-size: 1.2vw;
font-family: "Patua One";
font-weight: bold;
color: #000000;
margin: 2vh;
.item5
grid-area: 1/1/5/2;
background-image: url('PowerPoint Fill Shape.png');
width: 96%;
background-repeat: no-repeat;
background-position: center;
border-right: thick ridge rgb(240, 236, 224);
border-width: 9px;
.services-title
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
padding-left: 20px;
padding-bottom: 5px;
padding-top: 5px;
background-color: white;
color: #1318E7;
font-size: 1.5vw;
font-weight: bolder;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
.services-list
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 5;
background-color:white;
margin-top: -20px;
padding-left: 20px;
color: #000000;
font-weight: bold;
font-size: 1.25vw;
line-height: 1.5em;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
.navmenu
grid-row-start: 5;
grid-row-end: 6;
text-align: center;
background-color: #006500;
border: thick ridge #CC9900;
border-radius: 6px;
padding-top: 15px;
padding-bottom: 15px;
.navmenu > a
font-family: source-sans-pro, "Trebuchet MS", Verdana, Arial, sans-serif, helvetica;
text-decoration: none;
color: #FFF;
text-shadow: 2px 2px 2px #000;
font-size:1.4vw;
.navmenu a:hover
color: rgb(236, 11, 11);
font-weight: bolder;
.rightmain
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
.center
grid-area: 6/3/8/4;
background-image: url('Patent-Img-ResG.jpg');
background-size: contain;
padding: 3px;
background-position: top;
.leftmain
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
.leftmaintitle
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
.rightmaintitle
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
.foot
grid-column-start: 3;
grid-row-start: 7;
align-self: end;
background-color: #FFDAB5;
border-color: #000000;
border-style: ridge;
text-align: center;
border-radius: 5px;
height: 25px;
font-weight: bolder;
font-size: 1.2vw;
@charset "utf-8";
body
background: #a1dada;
/* padding: 3rem 5rem; */
.container
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 0.1fr);
border-left: 10px ridge #fffb00;
border-top: 10px ridge #fffb00;
border-bottom: 10px ridge #fffb00;
border-right: 10px ridge #fffb00;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background-color: white;
/*background-image: linear-gradient(to bottom,lightblue, rgba(158, 221, 55, 0.212));*/
.item1
grid-area: 1/2/1/5;
font-size: 3.5vw;
font-weight: bolder;
color: black;
text-align: center;
margin-top:3vh;
.item2
grid-area: 2/2/2/5;
text-align: center;
font-weight: bold;
color: rgb(5, 83, 40);
font-family: "Patua One";
font-style: normal;
text-transform: uppercase;
font-size: 1vw;
margin: 2vh;
.item3
grid-area: 3/2/3/5;
text-shadow: 1px 1px 2px #000000;
text-align: center;
font-weight: bolder;
color: rgb(91, 41, 226);
font-family: "Patua One";
font-style: normal;
font-size: large;
font-size: 1.75vw;
text-transform: uppercase;
margin: 2vh;
.item4
grid-area: 4/2/4/5;
text-shadow: 0px 0px #FFFFFF;
text-align: center;
font-size: 1.2vw;
font-family: "Patua One";
font-weight: bold;
color: #000000;
margin: 2vh;
.item5
grid-area: 1/1/5/2;
background-image: url('PowerPoint Fill Shape.png');
width: 96%;
background-repeat: no-repeat;
background-position: center;
border-right: thick ridge rgb(240, 236, 224);
border-width: 9px;
.services-title
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
padding-left: 20px;
padding-bottom: 5px;
padding-top: 5px;
background-color: white;
color: #1318E7;
font-size: 1.5vw;
font-weight: bolder;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
.services-list
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 5;
background-color:white;
margin-top: -20px;
padding-left: 20px;
color: #000000;
font-weight: bold;
font-size: 1.25vw;
line-height: 1.5em;
border-left: thick ridge rgb(240, 236, 224);
border-width: 9px;
.navmenu
grid-row-start: 5;
grid-row-end: 6;
text-align: center;
background-color: #006500;
border: thick ridge #CC9900;
border-radius: 6px;
padding-top: 15px;
padding-bottom: 15px;
.navmenu > a
font-family: source-sans-pro, "Trebuchet MS", Verdana, Arial, sans-serif, helvetica;
text-decoration: none;
color: #FFF;
text-shadow: 2px 2px 2px #000;
font-size:1.4vw;
.navmenu a:hover
color: rgb(236, 11, 11);
font-weight: bolder;
.rightmain
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
.center
grid-area: 6/3/8/4;
background-image: url('Patent-Img-ResG.jpg');
background-size: contain;
padding: 3px;
background-position: top;
.leftmain
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 7;
background-color: #FFFFD6;
padding-left: 40px;
padding-bottom: 20px;
color: #000000;
font-weight: bold;
font-size: 1.3vw;
line-height: 2em;
.leftmaintitle
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
.rightmaintitle
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 6;
padding-left: 40px;
padding-bottom: 10px;
background-color: #FFFFD6;
color: #1318E7;
font-size: 1.3vw;
margin-bottom: -1.5em;
.foot
grid-column-start: 3;
grid-row-start: 7;
align-self: end;
background-color: #FFDAB5;
border-color: #000000;
border-style: ridge;
text-align: center;
border-radius: 5px;
height: 25px;
font-weight: bolder;
font-size: 1.2vw;
css internet-explorer microsoft-edge css-grid
css internet-explorer microsoft-edge css-grid
edited Mar 26 at 16:33
TylerH
16.3k10 gold badges56 silver badges71 bronze badges
asked Mar 20 at 16:36
BobBob
368 bronze badges
edited Mar 26 at 16:33
TylerH
16.3k10 gold badges56 silver badges71 bronze badges
asked Mar 20 at 16:36
BobBob
368 bronze badges
edited Mar 26 at 16:33
TylerH
16.3k10 gold badges56 silver badges71 bronze badges
edited Mar 26 at 16:33
TylerH
16.3k10 gold badges56 silver badges71 bronze badges
edited Mar 26 at 16:33
TylerH
16.3k10 gold badges56 silver badges71 bronze badges
16.3k10 gold badges56 silver badges71 bronze badges
asked Mar 20 at 16:36
BobBob
368 bronze badges
asked Mar 20 at 16:36
BobBob
368 bronze badges
asked Mar 20 at 16:36
BobBob
368 bronze badges
368 bronze badges
1
IE/Edge might use a different version of the spec. - caniuse.com/#search=css-grid
– Paulie_D
Mar 20 at 16:48
stackoverflow.com/a/46060829/3597276
– Michael_B
Mar 20 at 17:09
It should work with MS Edge. IE 11 use the older version of Grid. So the new version of grid will not work with IE. While you post the code you also need to post the HTML along with CSS. so that we can try to run it and check the issue. Ref: stackoverflow.com/questions/45786788/…
– Deepak-MSFT
Mar 21 at 3:01
add a comment |
1
IE/Edge might use a different version of the spec. - caniuse.com/#search=css-grid
– Paulie_D
Mar 20 at 16:48
stackoverflow.com/a/46060829/3597276
– Michael_B
Mar 20 at 17:09
It should work with MS Edge. IE 11 use the older version of Grid. So the new version of grid will not work with IE. While you post the code you also need to post the HTML along with CSS. so that we can try to run it and check the issue. Ref: stackoverflow.com/questions/45786788/…
– Deepak-MSFT
Mar 21 at 3:01
1
1
IE/Edge might use a different version of the spec. - caniuse.com/#search=css-grid
– Paulie_D
Mar 20 at 16:48
IE/Edge might use a different version of the spec. - caniuse.com/#search=css-grid
– Paulie_D
Mar 20 at 16:48
stackoverflow.com/a/46060829/3597276
– Michael_B
Mar 20 at 17:09
stackoverflow.com/a/46060829/3597276
– Michael_B
Mar 20 at 17:09
It should work with MS Edge. IE 11 use the older version of Grid. So the new version of grid will not work with IE. While you post the code you also need to post the HTML along with CSS. so that we can try to run it and check the issue. Ref: stackoverflow.com/questions/45786788/…
– Deepak-MSFT
Mar 21 at 3:01
It should work with MS Edge. IE 11 use the older version of Grid. So the new version of grid will not work with IE. While you post the code you also need to post the HTML along with CSS. so that we can try to run it and check the issue. Ref: stackoverflow.com/questions/45786788/…
– Deepak-MSFT
Mar 21 at 3:01
add a comment |
1 Answer
1
active
oldest
votes
1
Found the problem. Edge does not recognize "fr" for row height.
answered Mar 25 at 16:33
BobBob
368 bronze badges
Thanks for posting the solution for this issue. I suggest you to try to mark your own answer as an accepted answer for this question after 24 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding.
– Deepak-MSFT
Mar 26 at 6:52
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55265875%2fedge-ie-css-grid-compatibility%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Found the problem. Edge does not recognize "fr" for row height.
answered Mar 25 at 16:33
BobBob
368 bronze badges
Thanks for posting the solution for this issue. I suggest you to try to mark your own answer as an accepted answer for this question after 24 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding.
– Deepak-MSFT
Mar 26 at 6:52
add a comment |
1
Found the problem. Edge does not recognize "fr" for row height.
answered Mar 25 at 16:33
BobBob
368 bronze badges
Thanks for posting the solution for this issue. I suggest you to try to mark your own answer as an accepted answer for this question after 24 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding.
– Deepak-MSFT
Mar 26 at 6:52
add a comment |
1
1
1
Found the problem. Edge does not recognize "fr" for row height.
answered Mar 25 at 16:33
BobBob
368 bronze badges
Found the problem. Edge does not recognize "fr" for row height.
answered Mar 25 at 16:33
BobBob
368 bronze badges
answered Mar 25 at 16:33
BobBob
368 bronze badges
answered Mar 25 at 16:33
BobBob
368 bronze badges
answered Mar 25 at 16:33
BobBob
368 bronze badges
368 bronze badges
Thanks for posting the solution for this issue. I suggest you to try to mark your own answer as an accepted answer for this question after 24 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding.
– Deepak-MSFT
Mar 26 at 6:52
add a comment |
Thanks for posting the solution for this issue. I suggest you to try to mark your own answer as an accepted answer for this question after 24 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding.
– Deepak-MSFT
Mar 26 at 6:52
Thanks for posting the solution for this issue. I suggest you to try to mark your own answer as an accepted answer for this question after 24 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding.
– Deepak-MSFT
Mar 26 at 6:52
Thanks for posting the solution for this issue. I suggest you to try to mark your own answer as an accepted answer for this question after 24 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding.
– Deepak-MSFT
Mar 26 at 6:52
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55265875%2fedge-ie-css-grid-compatibility%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
IE/Edge might use a different version of the spec. - caniuse.com/#search=css-grid
– Paulie_D
Mar 20 at 16:48
stackoverflow.com/a/46060829/3597276
– Michael_B
Mar 20 at 17:09
It should work with MS Edge. IE 11 use the older version of Grid. So the new version of grid will not work with IE. While you post the code you also need to post the HTML along with CSS. so that we can try to run it and check the issue. Ref: stackoverflow.com/questions/45786788/…
– Deepak-MSFT
Mar 21 at 3:01