Website displays in chrome perfectly, but not in mozilla or IE
Posted
by
Atharul Khan
on Stack Overflow
See other posts from Stack Overflow
or by Atharul Khan
Published on 2014-08-18T22:36:20Z
Indexed on
2014/08/19
4:21 UTC
Read the original article
Hit count: 169
here are the code snippets for the html and css. It works finds in Google chrome, but when I try to display it in mozilla or IE, it shows something completely different. I cannot attach images as I do not have the required reputation. I really appreciate the help. Thank you!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="ak.png">
<title>Home</title>
</head>
<body>
<div class="Nav">
<nav>
<ul class="navigation fade-in2">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#shop">Shop</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="logo"><a href="#home"><img class="ak fade-in2" src="ak.png"></a></div>
<div class="background"><img class="beauty" src="beauty.jpg"></div>
<div class="header">
<h1 class="headerName fade-in">DESIGN | DEVELOP | BRAND</h1>
<h4 class="service fade-in3"><a href="#portfolio">VIEW PORTFOLIO</a></h4>
<h4 class="service fade-in3"><a href="#services">VIEW SERVICES</a></h4>
</div>
<!--<div class="mainbody"><p>safsdaf</p></div>-->
</body>
</html>
CSS
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
* {
padding: 0;
margin: 0;
}
li {
display: inline;
font-size: 15px;
font-family: verdana;
}
nav {
width: 100%;
text-align: right;
background-color: #222222;
padding: 0;
margin: 0px;
line-height: 47px;
position: fixed;
z-index: 100;
}
.ak{
width: 90px;
height: 55px;
z-index: 101;
position: fixed;
background: transparent;
color: transparent;
background-color: transparent;
}
.Nav a{
text-decoration: none;
padding: 15px;
}
.Nav a:link{
color: #A7A7A7;
}
.Nav a:visited{
color: #A7A7A7;
}
.Nav a:hover{
color: #DBDBDB;
transition: all 0.3s ease-out 0s;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-out;
transition-delay: 0s;
}
.header {
background-color: rgba(0,0,0, 0.25);
width: 100%;
height: 626px;
text-align: center;
position: fixed;
z-index: 10;
}
.background {
position: fixed;
z-index: 8;
}
.beauty {
width: 100%;
height: 626px;
}
.headerName {
font-size: 2.5em;
text-align: center;
color: #D3D3D3;
padding: 180px;
padding-bottom: 50px;
margin: 0px;
letter-spacing: 4px;
font-weight: 100;
font-family: 'Lato', sans-serif;
}
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-webkit-animation-delay: 0.3s;
-moz-animation-delay:0.3s;
animation-delay: 0.3s;
}
.fade-in2 {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-webkit-animation-delay: 0.6s;
-moz-animation-delay:0.6s;
animation-delay: 0.6s;
}
.fade-in3 {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-webkit-animation-delay: 0.9s;
-moz-animation-delay:0.9s;
animation-delay: 0.9s;
}
.service{
font-size: 14px;
width: 190px;
text-align: center;
font-family: 'Lato', sans-serif;
color: #D3D3D3;
border: 2px #A7A7A7 solid;
border-color: rgba(255, 255, 255, 0.5);
display: inline-block;
border-radius: 5px;
background-color: transparent;
letter-spacing: 2px;
}
.service a{
text-decoration: none;
display: block;
padding: 15px 20px;
}
.service a:link{
color: #D3D3D3;
}
.service a:visited{
color: #D3D3D3;
}
.service a:hover{
background-color: rgba(255, 255, 255, 0.15);
transition: background-color .15s ease-in;
-webkit-transition: background-color .15s ease-in;
-moz-transition: background-color .15s ease-in;
-o-transition: background-color .15s ease-in;
}
UPDATE 1: I updated both browsers and it seems the css3 animations work perfectly fine on both browsers. What seems to be the problem is the positioning of the pages
UPDATE 2: Here are the links to the different browser screen shots
Chrome: https://www.dropbox.com/s/jlpa4vu51kdnews/Chrome.JPG
InternetExplorer: https://www.dropbox.com/s/zbchs3su9ahxr0n/IE.JPG
Mozilla Firefox: dropbox(.)com/s/fyalnhsha9ktadz/Mozilla.JPG (I can't post the third link because I don't have enough reputation)
© Stack Overflow or respective owner
