Coding Error?

So I completed my website and it looked great when I viewed in my browser… but it looks completely messed up when uploaded. I’ve uploaded it on two different servers to test it out and it stays messed up on both.

Did I code something wrong or forget to add something?

Here is a screen shot of what it is suppose to look like…
Screenshot

And this is what it looks like… Link to Site

I have the 8 pages uploaded the CSS and the PHP that allows my contact forum to work. Am I missing something or would this be a problem in my coding?


body {
	background-color:#a6bf79;
	color:#000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 10px 10px;
	padding: 0px;
}
.clear{clear:both;}
* {
	margin: 0px;
	padding: 0px;
}
#container {
	margin: 0px auto;
	text-align: left;
	width: 717px;
}
a{
	font-size:12px;
}
p{
	margin: 15px 0px;
}
/********************** Header ***************************/
#header {
	margin: 0px 0px 0px 0px;
	background-image:url(file:///C|/Users/Amanduh/Desktop/Templates/charitable-organization/Images/banner.jpg);
	width:717px;
	height:288px;
	position:relative;
	overflow: hidden;
}
#header ul{
	background-color:#797B7D;
	width:711px;
	border: 3px solid #FFFFFF;
	display:block;
	top:255px;
	position:absolute;
	margin: 0px 0px 0px 0px;
	height:22px;
	padding:5px 0px 0px 0px;
	text-align:center;
}
#header li{
	display:inline;	
}
#header ul a{
	text-decoration:none;
	color:#FFFFFF;
	margin: 0px 15px;
}
#header ul a:hover{
	text-decoration:underline;
	color:#28556b;
}
#logo_w1,#logo_w2 {
	font-size: 24px;
	font-style:italic;
	color:#FFFFFF;
	position:absolute;
}
#logo_w1{
	top:15px;
	left:70px;
}
#logo_w2{
	top:44px;
	left:94px;
}
#header_text {
	top:90px;
	left:43px;
	width:230px;
	position:absolute;
}
#header_text p{
	font-size: 18px;
	color:#FFFFFF;
}
#header_text a{color:#28556b;}
#header_text a:hover{color:#c77e0c;}
/********************** Content ***************************/
#content {
	background-image:url(file:///C|/Users/Amanduh/Desktop/Templates/charitable-organization/images/content_bg.gif);
	width:717px;
   padding:1px 0 0;

}
img{
	border-width:0px;
}
h1{
	color:#000000;
	font-size:14px;
	margin: 20px 0px 20px 0px;
}

h2{
	color:#85a157;
	font-size:14px;
	text-align:center;
	width:200px;
	margin: 10px 0px 15px 0px;
}
#left {
	float:left;
	width:417px;
	margin-left:27px;
	display:inline;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-left: 0px;
}
#left a{color:#28556b;}
#left a:hover{color:#c77e0c;}
#photos a{
	margin-right:14px;
}
#right {
	float:right;
	width:210px;
	padding: 0px 20px 20px 20px;
	margin-top:10px;
	border-left: #FFF 2px solid;

}
#right a{
	color:#58B0E3;
}
#right a:hover{
	color:#85a157;
}
/********************** Footer ***************************/
#footerline {
clear:both;
background-image:url(file:///C|/Users/Amanduh/Desktop/Templates/charitable-organization/images/footer_bg.gif);
font-size:1px;
height:10px;
}
#footer {
	width:717px;
	text-align:center;
	padding: 20px 0px;
}

Check your path to the CSS file, the one you’ve linked to in your HTML doesn’t exist.

Edit:

Wait… you have a ‘…/’… is your CSS file above the HTTP root directory?? If so, the browser can’t access it, you need to put it in an accessable directory (i.e. in the root directory or a child thereof)

Thank you so much!