homepage Welcome to WebmasterWorld Guest from 54.198.130.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Centering in Firefox using align
bunchofcircles




msg:4303400
 7:32 pm on Apr 24, 2011 (gmt 0)

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]

 

tedster




msg:4303429
 9:13 pm on Apr 24, 2011 (gmt 0)

Hello bunchofcircles, and welcome to the forums.

I'd suggest you first validate your mark-up again, both the HTML and the CSS. For example, I see <body align="middle"> - and "middle" is not what you want. Its an attribute of valign - you probably wanted "center"

Similarly, I immediately see the remnants of an HTML error at the bottom:

<p class="footer"> 2011 All Rights Reserved. Site by ******* </p> </i>

Not sure what that </i> is doing there, but wherever the <i> was opened, it is an inline element and should not include a <p> element within it, because <p> is a block level element.

That said - nice going for only three days into learning CSS!

bunchofcircles




msg:4303437
 10:13 pm on Apr 24, 2011 (gmt 0)

Thanks tedster. I fixed up those errors you mentioned.

Do you see anything that would be causing those misalignments on firefox though besides the <body align="middle"> error though? Even with the corrections, it's still acting dumb :/

Cira




msg:4303795
 8:19 pm on Apr 25, 2011 (gmt 0)

Hi pal,

im new to this too not sure if this is causing it but..

This div below actually terminates in the footer and you are missing and end tag off the one with the footer id

<div id="fade">

alt131




msg:4303955
 5:00 am on Apr 26, 2011 (gmt 0)

bunchofcircles, welcome to WebmasterWorld, and I second tedster and circa's identification of code issues. However, do validate your code yourself - there are more errors than mentioned, and they will be causing problems.

Browsers vary on how they deal with code errors - and this is a really interesting example. winSafari (which runs on the same engine as chrome) reports align=middle as text-align:center and applies that to visually centre the elements. IMO re-writing an invalid attribute/value as a completely different property requires too many assumptions to be good error handling, but it's an excellent example of how different error handling decisions produce quite different layout results.

<techno-aside>Opera ignores middle, but treats align=center as text-align:center and centres the child elements as well. (FF and ie ignore both middle and center.) Investigating this alerted me to ff already implementing text-align:start - the new initial value in the css3 working draft</aside>

But, to fix: As all the elements on the page are centred, easiest to remove the inline css, and add text-align:center; to the styles for body in your style sheet

bunchofcircles




msg:4304738
 11:26 am on Apr 27, 2011 (gmt 0)

Ah-ha! I figured it out. All I had to do was add <p align="center"> to my header and footer. I can't believe it was such a simple fix -_-

Thanks for everyone's help. Glad to be part of the forums.

StoutFiles




msg:4304751
 12:02 pm on Apr 27, 2011 (gmt 0)

align="center" is depreciated. I suggest using the css version instead and never use HTML to center objects. It isn't a problem today but someday it will be.

Cira




msg:4305317
 11:49 am on Apr 28, 2011 (gmt 0)

And if you use an external style sheet for you work then not only does it make your html easier/cleaner to read but you can use the same elements across the whole site making less work for you in the long run.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved