Main not work in IE 10

Hallo , i to search my website on IE Browser to see…

my code:

<style>
body {
   margin: 5px;
   display: -ms-grid;
   display: grid;
   width: 100%;
  
   grid-gap: 5px;
   -ms-grid-columns: 9% 73% 17%;
   -ms-grid-rows:  90px 105px 103px 140px 110px 70px;
   
   background-color: #ebf5d7;
}




body > header {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    
    
	background-image: url("/Bilder/f409784856.png");
    
    background-repeat: no-repeat;
    padding: 20px;
       
    
}

body > nav {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
    margin-top: 30px;
    
   
    
   background-color: #d2f5c4;

}

body > #externalLinks {
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
   
    
    margin-top: 5px;
    margin-bottom: 5px;
   
	
    background-color:  #d2f3c6;
	
}
body > main {
    -ms-grid-column: 2; 
    -ms-grid-column-span: 2;
    -ms-grid-row: 4;
    
   
	background-color: #eaf6e5;
}

body > #furtherInformation {
    -ms-grid-column: 3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
	background-color: #d2f3c6;
    margin-top: 5px;
   margin-bottom: 5px; 
}

body > footer {
	-ms-grid-column: 1;
	-ms-grid-column-span: 6;
        -ms-grid-row: 6;
   
    background-color: #99ee7a;

}

how on the Screenshot to see all is OK

but when write to main

<main>
<p>hallooooooooo</p>
</main>

it to show on the Top corner , not to my main Window…

Can Please anyone help me , Thanks !

In your css, at the top:

main {
  display: block;
}

There seems to be some weirdness about the main tag in IE10 afaics (even though it should be supported fine)

can you share the HTML structure?

it working what n

ow on my normal Browser (Firefox) all is to change…

here my entire Code…

<?php  

header("Content-Type: text/html; Charset=utf-8");
mb_internal_encoding('UTF-8');
date_default_timezone_set('UTC');
error_reporting(E_ALL);


?>
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">

	<title>Index</title>
<style>
body {
   margin: 5px;
   display: -ms-grid;
   display: grid;
   width: 100%;
  
   grid-gap: 5px;
   -ms-grid-columns: 9% 73% 17%;
   -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
   
   background-color: #ebf5d7;
}




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: 20px;
       
    
}

body > nav {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
    margin-top: 5px;
    
   
    
   background-color: #d2f5c4;

}

body > #externalLinks {
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
   
    
    margin-top: 5px;
    margin-bottom: 5px;
   
	
    background-color:  #d2f3c6;
	
}
body > main {
     display: block;
    -ms-grid-column: 2; 
    -ms-grid-column-span: 3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 5;
    
   
	background-color: #eaf6e5;
}

body > #furtherInformation {
    -ms-grid-column: 3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
	background-color: #d2f3c6;
    margin-top: 5px;
   margin-bottom: 5px; 
}

body > footer {
	-ms-grid-column: 1;
	-ms-grid-column-span: 6;
        -ms-grid-row: 6;
   
    background-color: #99ee7a;

}



/* Nav  */

nav {background-color: #d2f5c4;}

nav a{
    color: black;
    text-decoration: none;
	display: inline;
	padding: 0px 8px;
	font-size: 17px;
	font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}

nav ul {list-style-type: none;}

nav li {display: block;display:inline-block;}


/* ExternalLinks  */

#externalLinks a	{

    text-decoration: none;
	display: block;
	text-align: center;

    font-size: 15px;
	font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}

#externalLinks ul {
	list-style-type: none;
	margin: 5px;
    padding: 0;

}

#externalLinks li{float: left}

/* Geben an Link1, link2, link3 ; Farbe , Padding, .... */


li a, .dropbtn {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;

}

li a:hover, .dropdown:hover .dropbtn { background-color: #f1ebeb;}

.dropdown-content {
    display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
    font-size: 12px;
	position: absolute; /* die stellung folgt der Erste Link(li) */
    background-color: #f1f1f1 ;
    min-width: 160px; /* macht größer die Inneren Links */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe  */
    z-index: 1;    /*  Zeigen die Ordnung wie die Links gezeigt werden... */

}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;               /* Bekomme die Liks keine Unten Stricht ....*/
    display: block;
}

.dropdown-content a:hover {
background-color: #9f9e9e;
}
/* Offnen die Innere Links */

.dropdown:hover .dropdown-content {
    display: block;
	 left: 109px;       /* zeigt wo dem innere link fenster gezeigt wird */
     top: 214px;       /* zeigt wo dem innere link fenster gezeigt wird */

}

/*    Main           */

input, textarea{
			background:rgba(220,220,220,0.75);
			border:1px solid rgba(220,220,220,0.75);
			font:inherit;
			border-radius:0.2941em;/*5px;*/
			padding:0.4118em;/*7px;*/
			/*farbigen Rahmen in Chrome und Safari abschalten.*/
			outline:none;
}

input:focus, textarea:focus{
			background:#fff;
			border:1px solid #000;
	        outline: none; /* einige Browser add line auf input , das verhindert es... */
         
}
input[type=submit]{
			background:#be633c;
			border:none;
			color:#fff;
			border-radius:50% 50%;
			box-shadow:inset 0 0 1em #fb9d23;
			padding:0.5882em;/*10px*/
}
input[type=submit]:focus, input[type=submit]:active{
		 background-color:#A33202;
}




/* Footer  */

#copry {
	overflow: auto;
	font-size: 2px;
    list-style-type: none;
	font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;

}

#img1 {float: left;margin-bottom: 3px;}
#copry a {text-decoration: none;margin-bottom: 3px;}
#copry p {font-size: 10px;margin-bottom: 0;}

/*    Komment Button */

#comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

#comment {font-size: 11px;} /*  Button from comment */

#form {font-size: 14px;} /* size from comment window */

</style>
</head>

<body>

<header></header>
<nav>
  <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="about_us.php">About Us</a></li>
    <li><a href="contact.php">Contact</a></li>
  </ul>
</nav>


<aside id="externalLinks">
<ul>
  <li class="dropdown">
    <a href="#" class="dropbtn">Computer</a>
     <div class="dropdown-content">
       <a href="windows.php">Windows</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
       <a href="#">Link 4</a>
	  </div>
  <li><a href="#">News</a></li>
  <li><a href="#">Bucher</a></li>

 </ul>

</aside>

<main>

<br> 
<p>hallooooooooooooo</p>


</main>

<aside id="furtherInformation"></aside>

<footer id="copry" >
	<p>My Website: Linux and More  © 2018. All Rights Reserved.</p>
<a id="img1" href="https://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" width="120px" height="40px" src="/Bilder/f601296864.png" ></a>
<p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0<br> International License.
	Content of this site cannot be republished<br> either online or offline without our permissions. </p>

</footer>


</body>
</html>

that is the Code for IE and Firefox Browsers…

I have a Problem…

Now on my normal Browser (Firefox) all is to change…

Where are your grid styles for the other browsers? Only IE will use the properties prefixed with -ms

I have all together on the same File , here …

<?php  

header("Content-Type: text/html; Charset=utf-8");
mb_internal_encoding('UTF-8');
date_default_timezone_set('UTC');
error_reporting(E_ALL);


?>
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">

	<title>Index</title>
<style>
body {
   margin: 5px;
   display: -ms-grid;
   display: grid;
   width: 100%;
  
   grid-gap: 5px;
   -ms-grid-columns: 9% 73% 17%;
   -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
   
   background-color: #ebf5d7;
}




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: 20px;
       
    
}

body > nav {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
    margin-top: 5px;
    
   
    
   background-color: #d2f5c4;

}

body > #externalLinks {
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
   
    
    margin-top: 5px;
    margin-bottom: 5px;
   
	
    background-color:  #d2f3c6;
	
}
body > main {
     display: block;
    -ms-grid-column: 2; 
    -ms-grid-column-span: 3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 5;
    
   
	background-color: #eaf6e5;
}

body > #furtherInformation {
    -ms-grid-column: 3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
	background-color: #d2f3c6;
    margin-top: 5px;
   margin-bottom: 5px; 
}

body > footer {
	-ms-grid-column: 1;
	-ms-grid-column-span: 6;
        -ms-grid-row: 6;
   
    background-color: #99ee7a;

}



/* Nav  */

nav {background-color: #d2f5c4;}

nav a{
    color: black;
    text-decoration: none;
	display: inline;
	padding: 0px 8px;
	font-size: 17px;
	font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}

nav ul {list-style-type: none;}

nav li {display: block;display:inline-block;}


/* ExternalLinks  */

#externalLinks a	{

    text-decoration: none;
	display: block;
	text-align: center;

    font-size: 15px;
	font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}

#externalLinks ul {
	list-style-type: none;
	margin: 5px;
    padding: 0;

}

#externalLinks li{float: left}

/* Geben an Link1, link2, link3 ; Farbe , Padding, .... */


li a, .dropbtn {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;

}

li a:hover, .dropdown:hover .dropbtn { background-color: #f1ebeb;}

.dropdown-content {
    display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
    font-size: 12px;
	position: absolute; /* die stellung folgt der Erste Link(li) */
    background-color: #f1f1f1 ;
    min-width: 160px; /* macht größer die Inneren Links */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe  */
    z-index: 1;    /*  Zeigen die Ordnung wie die Links gezeigt werden... */

}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;               /* Bekomme die Liks keine Unten Stricht ....*/
    display: block;
}

.dropdown-content a:hover {
background-color: #9f9e9e;
}
/* Offnen die Innere Links */

.dropdown:hover .dropdown-content {
    display: block;
	 left: 109px;       /* zeigt wo dem innere link fenster gezeigt wird */
     top: 214px;       /* zeigt wo dem innere link fenster gezeigt wird */

}

/*    Main           */

input, textarea{
			background:rgba(220,220,220,0.75);
			border:1px solid rgba(220,220,220,0.75);
			font:inherit;
			border-radius:0.2941em;/*5px;*/
			padding:0.4118em;/*7px;*/
			/*farbigen Rahmen in Chrome und Safari abschalten.*/
			outline:none;
}

input:focus, textarea:focus{
			background:#fff;
			border:1px solid #000;
	        outline: none; /* einige Browser add line auf input , das verhindert es... */
         
}
input[type=submit]{
			background:#be633c;
			border:none;
			color:#fff;
			border-radius:50% 50%;
			box-shadow:inset 0 0 1em #fb9d23;
			padding:0.5882em;/*10px*/
}
input[type=submit]:focus, input[type=submit]:active{
		 background-color:#A33202;
}




/* Footer  */

#copry {
	overflow: auto;
	font-size: 2px;
    list-style-type: none;
	font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;

}

#img1 {float: left;margin-bottom: 3px;}
#copry a {text-decoration: none;margin-bottom: 3px;}
#copry p {font-size: 10px;margin-bottom: 0;}

/*    Komment Button */

#comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

#comment {font-size: 11px;} /*  Button from comment */

#form {font-size: 14px;} /* size from comment window */

</style>
</head>

<body>

<header></header>
<nav>
  <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="about_us.php">About Us</a></li>
    <li><a href="contact.php">Contact</a></li>
  </ul>
</nav>


<aside id="externalLinks">
<ul>
  <li class="dropdown">
    <a href="#" class="dropbtn">Computer</a>
     <div class="dropdown-content">
       <a href="windows.php">Windows</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
       <a href="#">Link 4</a>
	  </div>
  <li><a href="#">News</a></li>
  <li><a href="#">Bucher</a></li>

 </ul>

</aside>

<main>

<br> 
<p>hallooooooooooooo</p>


</main>

<aside id="furtherInformation"></aside>

<footer id="copry" >
	<p>My Website: Linux and More  © 2018. All Rights Reserved.</p>
<a id="img1" href="https://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" width="120px" height="40px" src="/Bilder/f601296864.png" ></a>
<p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0<br> International License.
	Content of this site cannot be republished<br> either online or offline without our permissions. </p>

</footer>


</body>
</html>

i know that i do not gut , but i don’t what…

If that is all your CSS then the only browser that has any grid properties (except for a few) is IE, what happened to your old CSS from the other threads? Again your CSS is now only targeting IE for the grid. All CSS properties with -ms prefix are only used by IE, no other browser will use the properties.

You have this (just the body selector as an example):

body {
  margin: 5px;
  display: -ms-grid;
  display: grid;
  width: 100%;
  
  grid-gap: 5px;
  -ms-grid-columns: 9% 73% 17%;
  -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
  
  background-color: #ebf5d7;
}

You have to have this:

body {
  margin: 5px;
  display: -ms-grid;
  display: grid;
  width: 100%;
  
  grid-gap: 5px;
  -ms-grid-columns: 9% 73% 17%;
      grid-columns: 9% 73% 17%;
  -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
      grid-rows:  120px 80px 103px 200px 110px 70px;
  
  background-color: #ebf5d7;
}

more info: CSS Vendor Prefixes

Very thanks for your help ! , you have right i have some to forget… and is the area … in my new Grid have forget to write grid-area , that is how i have on my index from my Website…

<style>
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  linkBox  linkBox"
"main     main     main"
"infoBox  infoBox  infoBox"
"footer   footer   footer" ;
}

<?php 


include 'CSS/tablet.css';

?>


body > header {
	grid-area: header;
	background-image: url("/Bilder/view.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;

}

How you see , have not grid-columns , but grid-template-areas:

so , how to see my Code now;

<style>
body {
 
  margin: 5px;
  display: -ms-grid;
  display: grid;
  width: 100%;
  
  grid-gap: 5px;
  -ms-grid-columns: 9% 73% 17%;
      grid-columns: 9% 73% 17%;
  -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
      grid-rows:  120px 80px 103px 200px 110px 70px;
  background-color: #ebf5d7;
  
}






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 {
    
    margin: 5px;
    grid-rows: 80px;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
    
    background-color: #d2f5c4;

}

body > #externalLinks {
     margin: 5px;
    grid-rows: 103px;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    
    
   
    background-color:  #d2f3c6;
	
}
body > main {
   
    margin: 5px;
    display: block; 
    -ms-grid-column: 2; 
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
  
    
    background-color: #eaf6e5;
}

body > #furtherInformation {
    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 {
	margin: 5px;
        -ms-grid-column: 1;
	-ms-grid-column-span: 3;
        -ms-grid-row: 6;
        -ms-grid-row-span: 6;
     
    background-color: #99ee7a;

}

and how to see it in IE , i come this screenshot

Now is all OK on IE :grinning:

How it to see in my Firefox…

Now work for my Firefox… , how i understand , Browsers haven a hierarchy him to reading , but i has to write …

above write

body {
 
  margin: 5px;
  display: -ms-grid;
  display: grid;
  width: 100%;
  
  grid-gap: 5px;
  
  grid-columns: 9% 73% 17%;
  grid-template-areas:

   "header   header   header"
   "nav      nav      nav"
   "linkBox  linkBox  linkBox"
   "main     main     main"
   "infoBox  infoBox  infoBox"
   "footer   footer   footer" ;
  
    -ms-grid-columns: 9% 73% 17%;
      
    -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
      
  background-color: #ebf5d7;
  
}

and than …

body > nav {
    
    margin: 5px;
    grid-rows: 80px;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
    
    background-color:  #d2f5c4;

}



or

body > nav {
    grid-area: nav;
    margin: 5px;
   
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
    
    background-color:  #d2f5c4;

}

but it not working… :angry:

Can Please anyone help me , and to say how to search on google this problem ?

  1. grid-column and grid-template-columns are two different things (it gets confusing when using the -ms prefixed versions).
-ms-grid-columns === grid-template-columns

You want:

-ms-grid-columns: 9% 73% 17%;
grid-template-columns: 9% 73% 17%;
  1. The same is true of grid-row, grid-row: 80px is not correct, you want grid-template-row: 80px, or just a height on the element.

  2. If you want to make it look the same in Firefox as the screenshot of IE, then your grid-template-areas are not correct.

Unless i misunderstood something this is how the area should be.

grid-template-areas:
		"header header header"
		"nav nav nav"
		"linkBox main infoBox"
		"footer footer footer";

I’m actually impressed you got it working in IE, good job.

Anyway i think you may be over complicating things for yourself. Personally I would start by making it work in newer browsers, then when you have that working, I would start to focuse on the content. Added content can itself reveal issues with your layout you didn’t expect.

Giving support to so many devices may end up being counterproductive. It also makes maintaining and updating the site much, much harder.

i have to try you suggestion , but not working…

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 and both working without problem… :grinning: , how to show it…

body {
 
    display: grid;    
    background-color: #ebf5d7;
    
    margin: 5px;
    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%;
   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:70%;
    margin: 5px;
    -ms-grid-column: 2;
    -ms-grid-column-span: 3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 4;
    background-color: #eaf6e5;
      
}

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

body > footer {
	flex-basis:100%;
        -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…