CODEWITHSUNDEEP
htmlcss
webdesignnoob
webdesignnoob

Reputation: 391

HTML/CSS Different formatting on safari and chrome

I'm relatively new to creating websites and I had an HTML/CSS questions I hope someone could help me with!

I noticed that in Safari and Google Chrome, my grey box is not where it is supposed to be (I assume because I made the .veryouter a fixed px, but when I tried to use percentages and resized the page and changed the page sizing, my text box started to move off the page! I'm trying to have everything stay in place when resizing the window, so I'm unsure if changing it to percentage is the answer or not..) I have attached pictures to show the difference, Chrome is it vertically centered while on Safari it isnt). //The code snippet looks odd, sorry about that!

Thank you for any help :) I appreciate it![enter image description here]1

html{
	height: 97%;

}

body{
	background-image: url("Metakingpic.png");
	background-size: 1300px;
	min-width: 1080px;
	height: 100%;
	
}

.veryouter{
	height: 589px;
}

#outer{
  	height: 100%;
  	width: 550px;
  	display: flex;
  	justify-content: center;
  	align-items: center; 
}

#inner{
	position: relative;
  	background-color: #696969;
  	opacity: .5;
	height: 540px;
	width: 370px;
}

h1{
	margin-top: 40px;
	margin-bottom: 0;
}

p{
	margin-top: 40px;
	margin-right: 10px;
}

.words{
	font-family: 'Londrina Outline', cursive;
	color: #ffffff;
	font-size: 55px;
	line-height: 50px;
	letter-spacing: 5px;
	padding-left: 23px;
}

.font2{
	font-family: 'Slabo 27px', serif;
	color: #ffffff;
	font-size: 23px;
	line-height: 32px;
	letter-spacing: 2px;
	margin-left: 20px;
}

.image{
	height: 114px;
	width: 174px;

	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 100;
	font-size: 25px;
}

.arrow{
	position: absolute;
	bottom: 0;
	right: 0;
	padding-right: 15px;
	padding-bottom: 15px;
	z-index: -1;
}

.n{
	padding-top: 25px;
	font-weight: bold;
	color: white;
	width: 125px;
	text-align: center;
	font-size: 30px;
	font-family: 'Londrina Outline', cursive;
	position: relative;
	letter-spacing: 5px;
}

a{
	text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
	<title>Welcome!</title>
	<link href = "intro.css" type = "text/css" rel = "stylesheet">

	<link href="https://fonts.googleapis.com/css?family=Londrina+Outline" rel="stylesheet">
</head>

<body>
	<div class = "veryouter">
		<div id = "outer">
			<div id = "inner">
				<div class = "words">
					<h1>My <br></br>PHOTO<br></br>BOOK</h1>
				</div>
				<div class = "font2">
					<p> Press "NEXT" to continue! </p>
				</div>
			</div>
		</div>
	</div>
	
	<div class = "image">
		<a href = "https://www.facebook.com/" >
			<div class = "n">NEXT</div>
		</a>
			<img class = "arrow" src = "Arrow.png" atl = "Arrow"/>
	</div>
</body>


</html>

Upvotes: 3

Views: 7638

Answers (2)

Balaji731
Balaji731

Reputation: 1129

To align the container center need to add the following style :

 #outer{
height: 100%;
width: 550px;
display: flex;
justify-content: center;
margin-top: 20px;
display: -webkit-box;
-webkit-box-pack: center; /* justify-content */
-webkit-box-align: center; /* align-items */
}
#inner{   
position: relative;
background-color: #696969;
opacity: .5;
height: 100%;
width: 370px;
}

Hope the changes will help.Try this code and let me know if any concern.

Upvotes: 1

xtianares
xtianares

Reputation: 61

This is most likely because those two browsers have different default css rules, I would recommend using a css reset, either use https://meyerweb.com/eric/tools/css/reset/ or https://github.com/necolas/normalize.css/

If you're not familiar with these reset css - they basically normalize the default browser styles. I personally prefer using normalize.css on all my projects.

Upvotes: 6

Related Questions