Background color wont’t show

  • Phartog

    (@phartog)


    15 years, 1 month ago

    I am volunteering and busy with a website for a non profit organization. Now I came to a problem with the css or html (I don’t know where the problem is). I have a home page with a smoothgallery, a small sidebar, some donatebuttons and on the bottom of the page a horizontal list with the latest news items. I want to set a border for the ul tag of this list, but it won’t show (IE and FF same deal). I searched threw the code for missing </div> tags but I can’t find the problem. What’s wrong? Oh yeah, I am running this locally, so I have the source of the html here:

    http://www.mediafire.com/?zyzywiu1ijc

    and the css file here:

    http://www.mediafire.com/?tywyuzwymz4

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Phartog

    (@phartog)

    15 years, 1 month ago

    sorry, I am new to the forum, this is the html code:

    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 profile="http://gmpg.org/xfn/11">

	<title>AID INDIA</title>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="generator" content="WordPress 2.7.1" /> <!-- leave this for stats please -->

	<link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/AID INDIA website/style.css" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://localhost/wordpress/feed/" />

	<link rel="alternate" type="text/xml" title="RSS .92" href="http://localhost/wordpress/feed/rss/" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://localhost/wordpress/feed/atom/" />
	<link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" />

	<script src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/scripts/mootools.js" type="text/javascript"></script>
	<script src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/scripts/jd.gallery.js" type="text/javascript"></script>
	<link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/css/jd.gallery.css" type="text/css" media="screen" />

		<link rel='archives' title='January 2009' href='http://localhost/wordpress/2009/01/' />
	<link rel='archives' title='December 2008' href='http://localhost/wordpress/2008/12/' />

	<link rel='archives' title='November 2007' href='http://localhost/wordpress/2007/11/' />
		<meta name='robots' content='noindex,nofollow' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" /> 

<!-- Multi-level Navigation Plugin v2.1 by PixoPoint Web Development ... http://pixopoint.com/multi-level-navigation/ -->
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/plugins/multi-level-navigation-plugin/style.php" />
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/multi-level-navigation-plugin/scripts/hoverIntent.js.php?ver=r5'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/multi-level-navigation-plugin/scripts/superfish.js?ver=1.4.8'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/multi-level-navigation-plugin/scripts/superfish_settings.js.php?ver=1.0'></script>
<meta name="generator" content="WordPress 2.7.1" />

	<script src="http://localhost/wordpress/wp-content/themes/AID INDIA website/Niftycube/niftycube.js" type="text/javascript"></script>
	<link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/AID INDIA website/style.css" type="text/css" media="screen" />

	<script type="text/javascript">
		window.onload=function(){
		Nifty("li#sub-page-menu,ul#donateblock li,div#extra","normal");
		}
	</script> 

</head>

<body>

<div id="wrapper">

<img id="header-logo" src="http://localhost/wordpress/wp-content/themes/AID INDIA website/images/header-logo.gif" width="84" height="129" alt="logo AID India"/>

	<div id="header">

		<ul>
			<li><h1><a href="http://localhost/wordpress">AID INDIA</a></h1></li>			

			<li><h4>Injustice anywhere is a threat to justice everywhere</h4></li>

			<li><h4>Treat others as you would like to be treated</h4></li>
		</ul>	

	</div>

<!-- Multi-level Navigational Plugin by PixoPoint Web Development ... http://pixopoint.com/multi-level-navigation/ -->

<div id="pixopoint_menu_wrapper1">
	<div id="pixopoint_menu1">
		<ul class="sf-menu" id="suckerfishnav"><li class="current_page_item"><a href="http://localhost/wordpress/">Home</a></li><li class="page_item page-item-10 haschildren"><a href="http://localhost/wordpress/about/" title="Who we are">Who we are</a>
<ul>
	<li class="page_item page-item-62"><a href="http://localhost/wordpress/about/who-we-are/" title="About us">About us</a></li>
	<li class="page_item page-item-64"><a href="http://localhost/wordpress/about/where-we-work/" title="Where we work">Where we work</a></li>

	<li class="page_item page-item-66"><a href="http://localhost/wordpress/about/vision-mission/" title="Vision &amp; mission">Vision & mission</a></li>
	<li class="page_item page-item-68"><a href="http://localhost/wordpress/about/organisation-profile/" title="Organisation profile">Organisation profile</a></li>
</ul>
</li>
<li class="page_item page-item-5"><a href="http://localhost/wordpress/humanism/" title="What we do">What we do</a></li>
<li class="page_item page-item-12"><a href="http://localhost/wordpress/the-community/" title="Where we work">Where we work</a>
<ul>
	<li class="page_item page-item-20"><a href="http://localhost/wordpress/the-community/geographical-conditions/" title="Geographical Conditions">Geographical Conditions</a></li>

	<li class="page_item page-item-22"><a href="http://localhost/wordpress/the-community/population/" title="Population">Population</a></li>
	<li class="page_item page-item-24"><a href="http://localhost/wordpress/the-community/literacy-level/" title="Literacy Level">Literacy Level</a></li>
	<li class="page_item page-item-26"><a href="http://localhost/wordpress/the-community/health-status/" title="Health Status">Health Status</a></li>
	<li class="page_item page-item-28"><a href="http://localhost/wordpress/the-community/beneficiaries/" title="Beneficiaries">Beneficiaries</a></li>
	<li class="page_item page-item-30"><a href="http://localhost/wordpress/the-community/local-infrastructure/" title="Local Infrastructure">Local Infrastructure</a></li>
</ul>
</li>

<li class="page_item page-item-131"><a href="http://localhost/wordpress/how-you-can-help/" title="How you can help">How you can help</a>
<ul>
	<li class="page_item page-item-138"><a href="http://localhost/wordpress/how-you-can-help/micro-credit-program/" title="Micro Credit Program">Micro Credit Program</a></li>
	<li class="page_item page-item-140"><a href="http://localhost/wordpress/how-you-can-help/people-with-disabilities/" title="People with disabilities">People with disabilities</a></li>
	<li class="page_item page-item-136"><a href="http://localhost/wordpress/how-you-can-help/teaching-computer-application/" title="Teaching Computer Application">Teaching Computer Application</a></li>
	<li class="page_item page-item-134"><a href="http://localhost/wordpress/how-you-can-help/teaching-english/" title="Teaching English">Teaching English</a></li>
</ul>
</li>

<li class="page_item page-item-113"><a href="http://localhost/wordpress/links/" title="News">News</a></li>
</ul>
	</div>
</div>

	<div id="extra">

	<script type="text/javascript">
		function startGallery() {
			var myGallery = new gallery($('myGallery'), {
				timed: true,
				showArrows: true,
				showCarousel: false,
				useThumbGenerator: false,
				delay: 6000
			});
		}
		window.onDomReady(startGallery);
	</script>

	<div id="myGallery">
		<div class="imageElement">

			<h3>A beautiful theme</h3>
			<p>Isn't WordPress cool?</p>
			<a href="#" title="Find out more..." class="open"></a>
			<img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/images/shine/1.jpg" class="full" alt="Shine" />
		</div>

		<div class="imageElement">
			<h3>Cool eh!</h3>

			<p>Giving you rotating images in the header with links</p>
			<a href="#" title="Open map" class="open"></a>
			<img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/images/shine/headerpicture.jpg" class="full" alt="Churches" />
		</div>

		<div class="imageElement">
			<h3>A Header Slideshow</h3>
			<p>And link to anywhere from the image...</p>

			<a href="#" title="Read latest articles" class="open"></a>
			<img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/images/brugges2006/3.jpg" class="full" alt="Civic Involvement" />
		</div>

		<div class="imageElement">
			<h3>Beautiful...</h3>
			<p>Wow!</p>
			<a href="#" title="Read latest articles" class="open"></a>

			<img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/images/shine/headerpicture.jpg" class="full" alt="Action" />
		</div>	

	</div>

	<div id="extra-sidebar">

		<div class="sidebar3">
	<ul>
				<li id="text-387420871" class="widget widget_text">			<h2 class="widgettitle">Aid India </h2>
			<div class="textwidget">Aid India empowers the disadvantaged in one of the poorest parts of India: Tamil Nadu. In this part of India, where 54% of rural people live below the poverty line, life is especially challenging for women, people with disabilities, orphans and deserted children. By means of orphanages, a micro credit program, welfare programs and educational opportunities Aid India enables the poor and disadvantaged to build up a better life! </div>

		</li>
	</ul>
</div>
	</div>
</div>
	<br />

	<div id="donateblock">

		<ul id="donatelist">
			<li class="leftfloat"><img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/images/pipo.jpg" alt="donate button" /></li>

			<li class="leftfloat"><img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/images/pipo.jpg" alt="donate button" /></li>
			<li class="leftfloat"><img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/images/pipo.jpg" alt="donate button" /></li>
			<li class="rightfloat"><img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/images/pipo.jpg" alt="donate button" /></li>
		</ul>

	</div>

	<br />

	<div id="recentnews">

		<h2>News</h2>

		<ul id="newsblock">

							<li><a href="http://localhost/wordpress/2009/01/need-based-training/"><div class="time"><p>24. 01. 2009</p></div>Need Based Training to the SHG Members<br /><div class="more">More</div></a></li>
							<li><a href="http://localhost/wordpress/2009/01/children%e2%80%99s-day-celebration-in-island-of-hope/"><div class="time"><p>16. 01. 2009</p></div>Children’s Day Celebration in Island of Hope<br /><div class="more">More</div></a></li>

							<li><a href="http://localhost/wordpress/2008/12/unity-in-humanist-orphanage-virudhunagar/"><div class="time"><p>09. 12. 2008</p></div>Unity In Humanist Orphanage Virudhunagar<br /><div class="more">More</div></a></li>
							<li><a href="http://localhost/wordpress/2007/11/charity-in-virudhunagar/"><div class="time"><p>20. 11. 2007</p></div>Charity in Virudhunagar<br /><div class="more">More</div></a></li>
					</ul>

	</div>

</div>

</body>
</html>

    And this is the css code (total stylesheet):

    /*
Theme Name: AID INDIA theme
Theme URI: http://www.humanistaidindia.org
Description: Theme for AID INDIA.
Version: 1.0
Author: Patrick Hartog
Author URI: http://www.patrickhartog.com/

*/

body,h1,h2,h3,h4,h5,h6,address, blockquote, dd, dl, hr, p, form{
	margin: 0;
	padding: 0;
}

body{
	margin: 0;
	font-family: Arial,Helvetica,Georgia,Sans-serif;
	font-size: 12px;
	text-align: center;
	vertical-align: top;
	background: #F5F5F5;
	background-image: url('images/background.gif');
	background-repeat: repeat-y;
	color: #000000;
}

/***************************************************
This is the headerpart
***************************************************/

#header-logo{
	width: 84px;
	float: left;
	background-image: url('header-logo.gif');
}
#header ul{
	list-style: none;
	color: #182D88;
	padding-top: 50px;
	display:block;
}

#header ul li{
	line-height: 22px;
}	

h1 a{
	font-family: Trebuchet MS,Arial,Helvetica,Georgia,Sans-serif;
	font-size: 36px;
	text-decoration: none;
	color: #000000;
	line-height: 30px;
}

/************************************************************************
Wrapper is the div that contains header, container, sidebar and footer.
**************************************************************************/

#wrapper{
	margin: 0 auto 0 auto;
	width: 800px;
	text-align: left;
}

#container{
	float: left;
	width: 400px;
}

.post{
	padding: 10px 0 10px 0;
}

.post h2 a{
	font-family: Arial Narrow,Helvetica,Georgia,Sans-serif;
	font-size: 15px;
	font-weight: normal;
	line-height: 15px;
	padding: 0px;
	text-decoration: underline;
	color: #689A2F;
}

.post h2,
	font-family: Arial Narrow,Helvetica,Georgia,Sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: #689A2F;
}
.post h2 a:hover{
	color: #ACACAC;
}

.post a img{
	padding: 2px;
	border: thin solid #acacac;
}

.post a img:hover, a:focus img{
	background: #acacac;
}

.entry{
	line-height: 18px;
}

p.postmetadata{
	border-top: 1px solid #ccc;
	margin: 10px 0 0 0;
}

.navigation{
	padding: 10px 0 0 0;
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
}

/************************************************************************
Here begins the code for sidebar left
**************************************************************************/
.sidebar{
	float: left;
	width: 200px;
	margin: 10px 20px 0 0px;
}

.sidebar ul{
	list-style-type: none;
	list-style-position:outside;
	margin: 0;
	padding: 0 10px 0 0px;

}

.sidebar ul li{
	padding: 10px 0 10px 10px;
}

.sidebar ul li h2{
	font-family: Georgia, Sans-serif;
	font-size: 12px;
}

.sidebar ul ul li{
	padding:0px;
	line-height: 24px;
}

/************************************************************************
Here begins the code for sidebar right
**************************************************************************/

.sidebar2 h2{
	font-family: Arial,Helvetica,Georgia,Sans-serif;
	font-size: 12px;
}

.sidebar2 a{
	color: #353535;
}

.sidebar2 a:hover{
	color: #67982D;
	font-weight: bold;
}

.sidebar2{
	float: left;
	width: 160px;
	margin: 10px 0px 0 20px;
}

.sidebar2 ul{
	list-style-type: none;
	list-style-position:outside;
	padding: 0 10px 0 0px;

}

.sidebar2 ul li{
	padding: 10px 0 10px 10px;
	margin: 10px 0 0 0;
	border: thin solid #ACACAC;
	background:#F5F5F5;

}

.sidebar2 ul li h2{
	font-family: Georgia, Sans-serif;
	font-size: 12px;
}

.sidebar2 ul ul li{
	padding:0px;
	line-height: 24px;
}

/************************************************************************
Searchform (still more code needed)
**************************************************************************/

#search{
	width: 100%;
}

/************************************************************************
Widget Sub-page-menu styling
**************************************************************************/
li#sub-page-menu {
	background: #f5f5f5;
	border: solid thin #acacac;
	padding-bottom:5px;
}

#sub-page-menu h2{
	font-family: Arial,Helvetica,Georgia,Sans-serif;
	font-size: 12px;
}

#sub-page-menu a{
	color: #353535;
}

#sub-page-menu a:hover{
	color: #67982D;
	font-weight: bold;
}

#sub-page-menu ul li{
	border-bottom: thin solid #ACACAC;
	list-style-image: url('arrow.gif');
	list-style-position: inside;
}

/************************************************************************
Widget Recent-posts styling
**************************************************************************/

#recent-posts {
	background: #F5F5F5;
	border: thin solid #ACACAC;
	margin: 10px 0 0 0;

}

#recent-posts h2{
	font-family: Arial,Helvetica,Georgia,Sans-serif;
	font-size: 12px;
}

#recent-posts a{
	color: #353535;
}

#recent-posts a:hover{
	color: #67982D;
	font-weight: bold;
}

#recent-posts ul li{
	border-bottom: thin solid #ACACAC;
	list-style-image: url('arrow.gif');
	list-style-position: inside;
	line-height: 15px;
	padding: 5px 0 0 0;
}

/************************************************************************
Here begins footer (not in site yet, still more styling needed)
**************************************************************************/

#footer{
	clear: both;
	float: left;
	width: 750px;
	padding: 10px 0 0 0;
}

#footer p{
	line-height: 18px;
}

/************************************************************************
Comments template (no use for in AID India website)
**************************************************************************/

.comments-template{
	margin: 10px 0 0;
	border-top: 1px solid #ccc;
	padding: 10px 0 0;
}

.comments-template ol{
	margin: 0;
	padding: 0 0 15px;
	list-style: none;
}

.comments-template ol li{
	margin: 10px 0 0;
	line-height: 18px;
	padding: 0 0 10px;
	border-bottom: 1px solid #ccc;
}

.comments-template h2, .comments-template h3{
	font-family: Georgia, Sans-serif;
	font-size: 16px;
}

.commentmetadata{
	font-size: 12px;
}

.comments-template p.nocomments{
	padding: 0;
}

.comments-template textarea{
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
}

/************************************************************************
Image alignment code
**************************************************************************/

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

/************************************************************************
Smoothgallery styling
**************************************************************************/

#myGallery {
	float:left;
	width: 470px !important;
	height: 283px !important;
	margin-top: 10px;
	border: 1px #88b74f solid !important;
}

#myGallery h2{
	font-size: 1.4em;
	color: #333 !important;
}

#myGallery p{
	color: #333 !important;
	font-size: 1em;
}

#myGallery h2 a{
		font-size: 1.4em;
		color: #333 !important;
}

.slideInfoZone{height:50px !important;
background: #f8f8f8 !important; }

#extra{
	position: relative; /* ADD */
	height:285px;
	clear:both;
}

/************************************************************************
Extra sidebar (sidebar3.php) next to the smoothgallery
**************************************************************************/

#extra-sidebar{
	position: relative; /* ADD */
	height:285px;
	width: 326px;
	float:right;
	text-align:left;
	margin-top: 10px;
	border-left: thin solid #ffffff;
	background: url(images/extrabar.jpg) repeat-x;

}

#extra-sidebar ul, #extra-sidebar li{
	margin:0;
	padding:0;
	list-style-type: none;
}

#extra-sidebar ul{
	padding-left: 20px;
	padding-right: 20px;
}

#extra-sidebar li{
	font-family: Trebuchet MS, Arial;
	line-height: 15px;
	display:block;
	color: #ffffff;
	font-weight: normal;
}

#extra-sidebar li a{
	text-transform: capitalize;
	font-weight: bold;
	color: #ffffff;}

#extra-sidebar li a:hover{
	color: #e5ca63;}

#extra-sidebar h2{margin:0;
	font-family: Trebuchet MS, Arial;
	padding-left: 0px;
	padding-top: 10px;
	margin-bottom: 5px;
	color: #ffffff;}

#extra-sidebar h2 a{color: #dbf1fc;}

/************************************************************************
Donate images below smoothgallery
**************************************************************************/

#donateblock{
	margin-top: 10px;
}

#donatelist{
	list-style-type: none;
	display: inline;
	margin-left: auto;
	margin-right: auto;
}

.leftfloat{
	float: left;
	width: 184px;
	margin-right: 21px
}

.rightfloat{
	float: right;
}

/************************************************************************
Recent news block below donate buttons
**************************************************************************/

#recentnews h2{
	font-family: Trebuchet MS;
	margin-top: 10px;
	color: #689A2F;
}

#newsblock {
	list-style-type: none;
	display: inline;
	padding: 0px;
	margin: 0px;
	border: thin solid #acacac;
}

#newsblock li, #newsblock li a{
	font-family: Arial;
	font-size: 12px;
	display: block;
	padding: 0 5px 5px 5px;
	width: 190px;
	float: left;
	color: #000000;
	font-weight: bold;
}

#newsblock li a:hover{
	text-decoration:none}

.time{
	font-weight: normal;
	color: #ACACAC;
}
.more{
	color: #689A2F;
}

    Thread Starter Phartog

    (@phartog)

    15 years, 1 month ago

    nobody has a solution to my problem, please somebody help, i really need to get this website going.

    Thread Starter Phartog

    (@phartog)

    15 years, 1 month ago

    I found out, that the problem has something to do with the display: inline; and float: left; commands. If I remove these the list will of course show vertically but the background or border will show. But I still don’t know how to make list horizontal with a background color. Can somebody please help?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Background color wont’t show’ is closed to new replies.