Display: flex geeft problemen in Chrome

Status
Niet open voor verdere reacties.

Killerclown

Gebruiker
Lid geworden
30 dec 2007
Berichten
181
Goeieavond,

Ik heb een pagina op mijn website die perfect getoond wordt in Firefox maar niet in Chrome. (afbeeldingen en knoppen staan over elkaar)
Na wat rondlezen op het internet, zou chrome problemen hebben met "display: flex;"
Weet iemand hoe ik dit kan oplossen?

Het is de enigste pagina waarin ik flex gebruik omdat ik anders de afbeeldingen niet mooi in het midden van het scherm krijg.

Webpagina: 404.html

HTML:
Code:
<div class="container">

	<!-- HATCHETMAN -->
  	<div class="man"><img src="images/hatchetman/juggalo_logo.png" width="100" height="100"></div>

	<!-- LOGO -->
  <div class="logo"><img src="images/my_creations/404_page.png" width="600" height="300"></div>
	   
     <!-- HOME -->
  <div class="home">
    <a href="index.html"><button class="button404">HOME</button></a>
  </div>

    <!-- SEARCH -->
  <div class="search">
    <a href="homepage/search/search.html"><button class="button404">SEARCH</button></a>
  </div>
    
    <!-- CONTACT -->
  <div class="contact">
    <a href="homepage/contact/mailform.php"><button class="button404">CONTACT</button></a>
    </div>
    
</div>

CSS:
Code:
	.container {
  		width: 100%;
		height: 100%;
  		padding-top: 5%; 
		display: inline-grid;
		grid-template-columns: 9% 9% 9% 9% 9% 9% 9% 9% 9% 9% 9%;
		grid-template-rows: 25% 25% 25% 25%;
		  
  		grid-template-areas:   
		". . man    man    man     man     man     man man  . . "
		". . logo   logo   logo    logo    logo    logo  logo . ."   
		". . .  .    home   search  contact .          .    . ."
		;
}

/*GRID AREAS */

	.home{
		grid-area: home;
		display: flex;
  		justify-content: center;
  		align-items: center; 
		}
	.man{
		grid-area: man;
		display: flex;
  		justify-content: center;
  		align-items: center;
		}
	.search{
		grid-area: search;
		display: flex;
  		justify-content: center;
  		align-items: center; 
		}
	.contact{
		grid-area: contact;
		display: flex;
 		justify-content: center;
 		align-items: center; 
		}
	.logo{
		grid-area: logo;
		display: flex;
  		justify-content: center;
  		align-items: center; 
		}
	
/* MEDIAQUERIES GRID*/
	
	.container:after {
  		content: "";
 	 	clear: both;
  		display: table;
	}

Met dank.
 
Als ik grid-template-rows: 25% 25% 25% 25%; verwijder, dan wordt de pagina goed getoond bij mij.
Voor zover ik kan zien, wordt hiermee de hoogte van de rijen binnen het grid aangepast aan de grootte van de div's binnen de rijen.
 
Dankuwel tobiastheebe.
Zo'n simpele oplossing waar ik niet aan gedacht had.
Nu wordt het inderdaad goed getoond.

Bedankt!
 
Graag gedaan! Tip: de Inspect-functie in Chrome doet wonderen. ;)
 
Bedankt voor de tip!
Ik heb dat nog nooit gebruikt in Chrome. Ik bekijk het eens.
Merci!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan