I am currently working on setting up a temporary placeholder page for my website, but I've encountered some challenges with cross-browser compatibility. The page looks fine on Chrome and my iOS devices, such as my phone and iPad, but it doesn't display correctly on Internet Explorer or Firefox. I've experimented with various methods of vertical alignment, but none of them seem to work as expected. Is there something crucial that I'm overlooking, or is there a specific approach to ensure consistency across all browsers? Any advice or guidance would be greatly appreciated!
Live Site:
HTML:
<html>
<head>
<title>Radical Creation</title>
<link rel="stylesheet" type="text/css" href="default.css"/>
<link rel="shortcut icon" href="images/favicon.png"/>
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jscript/s3Slider.js"></script>
<script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='js/jquery.particleground.min.js'></script>
<script type='text/javascript' src='js/demo.js'></script>
</head>
<body>
<div class="title">
<div class="main-title"><span class="thin">Radical</span>Creation</div>
<h3>Coming Soon!</h3>
</div>
<div id="particles">
</div>
</body>
</html>
CSS:
html {
height: 100%;
overflow:hidden;
}
body {
font-family: 'Lucida Console', Monaco, monospace;
background-repeat: none;
background-size: cover;
background-position: center;
background-image: url(images/stars.jpg);
}
h2, h3 {
font-weight: lighter;
color: #4EB4FC;
position: relative;
}
.title{
margin-top: -100px;
top: 54%;
text-align: center;
position: relative;
float: center;
}
.main-title .thin {
font-weight: 200;
}
.main-title {
top:10px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 30px;
color: #f9f1e9;
font-family: 'Raleway', Calibri, Arial, sans-serif;
transform : scale(1.0,0.8);
-webkit-transform:scale(1.2,1.0);
-moz-transform:scale(1.0,0.8);
-ms-transform:scale(1.0,0.8);
-o-transform:scale(1.0,0.8);
}
#particles {
top: -5px;
height:100%;
opacity: .6;
}