No replies
adamschroeder
Offline
newbie
Last seen: 8 years 51 weeks ago
Timezone: GMT+2
Joined: 2011-03-06
Posts: 1
Points: 2

Hi guys,
I've been trying to work on this problem for hours now and still can't come up with a solution. I need help please.
I've got my web page that, according to the CSS code, is supposed to give me a grayish background around my floats. If I load the page to my computer's server it shows up, but when loaded to the website the background disappears (leaving me only with the general green background).

Can you please tell me what my problem is.

Thank you.

This is my CSS:

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(images/header.jpg);
	width:717px;
	height:288px;
	position:relative;
}
#header ul{
	background-color:#85a157;
	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(images/content_bg.gif);
	width:717px;
}
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:428px;
	margin-left:27px;
	padding: 0px 10px 30px 0px;
	display:inline;
}
#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:#c77e0c;
}
#right a:hover{
	color:#85a157;
}
/********************** Footer ***************************/
#footerline {
clear:both;
background-image:url(images/footer_bg.gif);
font-size:1px;
height:10px;
}
#footer {
	width:717px;
	text-align:center;
	padding: 20px 0px;
}

This is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type"
 content="application/xhtml+xml; charset=iso-8859-1" />
  <link href="style.css" rel="stylesheet"
 type="text/css" />
  <title>Charity template</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo_w1">Citizens Without</div>
<div id="logo_w2">Borders</div>
<div id="header_text">
<p>Travel the world while helping&nbsp;others.</p>
<a href="http://www.freewebsitetemplates.com">Join now !</a>
</div>
<ul>
  <li><a href="http://www.freewebsitetemplates.com">Home</a></li>
  <li><a href="http://www.freewebsitetemplates.com">Become
a Host</a></li>
  <li><a href="http://www.freewebsitetemplates.com">Become
a CWB</a></li>
  <li><a href="http://www.freewebsitetemplates.com">Recommendations</a></li>
  <li><a href="http://www.freewebsitetemplates.com">How</a></li>
  <li><a href="http://www.freewebsitetemplates.com">FAQ</a></li>
  <li><a href="http://www.freewebsitetemplates.com">Contact
us</a></li>
</ul>
</div>
<div id="content">
<div id="left">
<div style="text-align: center;"><br />
<h2>Find a Civilian Without Borders</h2>
<br />
<form action="civiliandatabase.php" method="post">Country:
  <select name="country">
  <option>---</option>
  <option>Brazil</option>
  <option>Canada</option>
  <option>Chile</option>
  <option>Ecuador</option>
  <option>England</option>
  <option>France</option>
  <option>Israel</option>
  <option>Mexico</option>
  <option>South Africa</option>
  <option>USA</option>
  </select>
  <p><input name="submit" value="Start search"
 type="submit" /> </p>
</form>
<br />
<hr line="-1" /><br />
<h2>Find a Host<br />
<br />
</h2>
<form action="hostdatabase.php" method="post">
  <div style="text-align: center;">Country:
  <select name="country">
  <option>---</option>
  <option>Brazil</option>
  <option>Canada</option>
  <option>Chile</option>
  <option>Ecuador</option>
  <option>England</option>
  <option>France</option>
  <option>Israel</option>
  <option>Mexico</option>
  <option>South Africa</option>
  <option>USA</option>
  </select>
  <br />
  <p><input name="submit" value="Start search"
 type="submit" /> </p>
  </div>
</form>
</div>
</div>
<div id="right">
<h1>Welcome to our social network</h1>
<div style="text-align: justify;">Looking
to give towards others in need all over the world, but dont know
how to find them?Tired of the complicated bureaucracy behind
international organizations? Looking to travel? Then this social
network could be the perfect opportunity for you.<font size="-1"><br />
<br />
Civilians Without Borders offers a chanal of
communication between
those who would like to help out and those who need help. If you need
help with any project, idea or kjl why not help can present their
project or need Our goal is to allow hostsIf you are a person that is
thinking of traveling, why bla not.</font></div>
<h1>Photos</h1>
<div id="photos"> <a href="index.html"><img
 alt="volunteer" src="IMG_civil_1.jpg"
 style="border: 0px solid ; width: 90px; height: 68px;" /></a>
<a href="index.html"><img alt="photo"
 src="IMG_civil_2.JPG"
 style="border: 0px solid ; width: 90px; height: 68px;" /></a><a
 href="index.html"><img
 style="border: 0px solid ; width: 90px; height: 68px;"
 src="IMG_home3.jpg" alt="photo" /></a><a
 href="index.html"><img
 style="border: 0px solid ; width: 90px; height: 68px;"
 src="IMG_home2.jpg" alt="photo" /></a></div>
</div>
<div id="footerline">g<br />
<br />
<br />
<br />
<br />
</div>
</div>
<div id="footer">Copyright © 2007 Charity Organization.
All rights reserved.</div>
</div>
</body>
</html>