Hey everyone. I'm really new to CSS/html (about 3 days). I spent all day coding my site in Chrome and it looked awesome. Then I looked at it in Firefox and the header, footer navigation, and upload button are aligned to the left. Validated it but can't seem to figure out how to correct it.
I need help figuring out what I did wrong so that I can get it to work for Firefox and Chrome/learn from my mistakes. Thanks in advance. Here is my code:
<!DOCTYPE html>
<html lang="" xmlns:og="http://ogp.me/ns#">
<head>
<link href='http://fonts.googleapis.com/css?family=Copse' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title> Pixel Pies. </title>
<meta name="description" content="We post creative, inspiring, epic machinima." />
<meta name="author" content="*******">
<meta name="copyright" content="*******">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="Stylesheet.css" type="text/css" />
<meta property="og:title" content="********" />
<meta property="og:type" content="company" />
<meta property="og:url" content="http://www.example.com" />
<meta property="og:image" content="http://www.example.com/logo.png" />
<meta property="og:site_name" content="*******"/>
<meta property="og:description" content="We post creative, inspiring, epic machinima." />
<meta property="og:locality" content="Phoenix" />
<link rel="shortcut icon" href="http://www.yahoomaps.co/favicon.ico">
<style type="text/css">
<style type="text/css">
<!BODY>
@font-face{
font-family: 'Copse';
font-style: normal;
text-shadow: #fff 0 1px 1;
}
a{
color: #494b50;
font-family: 'Copse';
text-decoration: none;
}
a:hover{
color: #1181b7;
text-shadow: #fff 0 1px 0;
}
body{
font-size: 75%;
line-height: 1.6666;
font-family: 'copse';
background: #c7cacf;
color: #6c7076;
margin: 0;
padding: 0;
<!HEADERS>
}
h1{
margin: 45px 0 10px 0;
position: relative;
}
h2{
padding: 75px;
position: relative;
margin: 0 auto -25px-auto
width: 329px;
height: 74px;
<!MAIN>
}
p.main{
font-size: 1.7em;
text-shadow: #fff 0 1px 0;
width: 500px;
margin: 0 auto -25px auto
}
p.main i{
color: #494b50;
}
hr{
width: 400px;
<!FOOTER>
}
p.footer{
font-size: 10px;
color: #64686f;
text-shadow: #fff 0 1px 0;
}
#footer a{
font-size: 15px;
color: #494b50;
margin: 5px;
text-shadow: #fff 0 1px 0;
display: inline;
}
#footer a:hover{
color: #1181b7;
text-shadow: #fff 0 1px 0;
<!ANIMATION>
}
#fade{
-webkit-animation-name: fade;
-webkit-animation-duration: 1.6s;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
</style>
<!BODY>
@font-face{
font-family: 'Copse', georgia, arial;
font-style: normal;
text-shadow: #fff 0 1px 1;
}
a{
color: #494b50;
font-family: 'Copse';
text-decoration: none;
}
a:hover{
color: #1181b7;
text-shadow: #fff 0 1px 0;
}
body{
font-size: 75%;
line-height: 1.6666;
font-family: 'copse', georgia, arial;
background: #c7cacf;
color: #6c7076;
margin: auto;
padding: auto;
<!HEADERS>
}
h1{
margin: 45px 0 10px 0;
position: relative;
}
h2{
padding: 75px;
position: relative;
margin: 0 auto -25px-auto
width: 329px;
height: 74px;
<!MAIN>
}
p.main{
font-size: 1.7em;
text-shadow: #fff 0 1px 0;
width: 500px;
margin: 0 auto -25px auto;
}
p.main i{
color: #494b50;
}
hr{
width: 400px;
shadow: @fff 0 1px 0;
<!FOOTER>
}
p.footer{
font-size: 10px;
color: #64686f;
text-shadow: #fff 0 1px 0;
text-align: center;
}
#footer a{
font-size: 15px;
color: #494b50;
margin: 5px;
text-shadow: #fff 0 1px 0;
display: inline;
}
#footer a:hover{
color: #1181b7;
text-shadow: #fff 0 1px 0;
text-align: center;
<!ANIMATION>
}
#fade{
-webkit-animation-name: fade;
-webkit-animation-duration: 1.6s;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
</style>
</head>
<body align="middle">
<div id="fade">
<h1> <img src="http://example.com/index_htm_files/1.png" alt="Pixel Pies"> </h1>
<p class="main"> A brand new <i>network</i> dedicated to posting the best user submitted
<i>machinima videos</i> in the world.</p>
<h2><a href="http://www.example.com"> <img src="Button.png"> </h2> </a>
<div id="footer">
<a href="http://www.facebook.com/pages/*****/*********"> Facebook </a>
<a href="http://www.twitter.com/*****"> Twitter </a>
<a href="mailto:contact@example.com"> Email </a>
<a href="http://www.youtube.com/*******"> Youtube </a>
<a href="http://example.com/*****"> Newsletter </a>
</div>
<hr />
<p class="footer"> ©2011 All Rights Reserved. Site by
******* </p> </i>
</body>
</html>
[edited by: tedster at 9:03 pm (utc) on Apr 24, 2011]
[edit reason] make personal information anonymous [/edit]
