In my header_inner, I am trying to display an image in the background, but whenever I try, it just shows the blank. Will someone please help me with this as I have been messing with this for hours. I posted a .doc to show how I want the image to be displayed. I appreciate it.
.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 Column Rounded Corners - from the "Stylin' with CSS" Stylib library</title>
<!--the layoout and text stylesheets-->
<link href="../../lib/css_styles/layouts/3_col_rounded.css" media="all" rel="stylesheet" />
<link href="../../lib/css_styles/text/text_n_colors.css" media="all" rel="stylesheet" />
<script type="text/javascript" src="../../lib/nifty_corners/javascript/niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty('div#header','transparent medium'); // medium rounded corners w/transparency for gradient background image
Nifty('div#nav,div#content,div#promo','medium same-height'); //medium rounded corners, same height cols
Nifty('div#main_wrapper,div#footer','medium'); //medium rounded corners
AddCss ("../../lib/nifty_corners/css/niftyCorners.css"); // location of Nifty CSS file relative to this page
}
</script>
</head>
<body class="mocha">
<div id="main_wrapper">
<div id="header">
<div id="header_inner">
background-image: url (../../lib/css_styles/layouts/carlile_bay3.jpg);
<h1>First Bolans Reunion 2011</h1><!-- end header_nav -->
</div><!-- end header_inner -->
</div>
<!-- end header -->
<div id="nav">
<div id="nav_inner">
<ul>
<li><a href="#">RSVP</a></li>
<li><a href="#">Flyer</a></li>
<li><a href="#">Program</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Discussion</a></li>
<li><a href="#">Home</a></li>
</ul>
</div><!-- end nav_inner -->
</div><!-- end nav -->
<div id="content">
<div id="content_inner">
<h2>About Bolans First Reunion</h2>
<p><strong>The Bolans Community Development Association (BCDA) is planning a village reunion for 2011.</strong>
The reunion will mark Bolans ??? birthday. There will be educational, cultural and a variety of other activities.
We would like to invite villlagers and their relatives at home and abroad to meet and select one or more representative(s)--or point
of contact(s) (POC(s)). The POCs will provide advice and coordinate activities with members of the BCDA. The Bolans
Reunion Committee (BRC) consists of BCDA organizers and the POCs.</p>
<h3>The Bolans Community Development Association</h3>
<p>The BCDA is a Bolans based community organization. It has been involved in a number of community outreach
activities, such as acquiring computers and books. These resources have benefited both Bolans Primary School students
and the wider community.</p>
<h3>Thoughts and Ideas from Facebook's Bolans Reunion Committee</h3>
<p>Here are some thoughts from Facebook group, Bolans Reunion Committee:</p>
<p><em>"What about doing something along the lines of health and education. We can have a day when people come out and
get their blood pressure and sugar checked. Also we can have someone give talk on health related issues, substance
abuse, STDs etc and another person on the importance of education. Too many young people are sitting on the block...
time for them to do something meaningful with their lives."</em></p>
<p align="right"> <strong>--Lauralee Riley, British Virgin Islands</strong></p>
<p><em>"Lauralee's ideas could be like a health and education fair."</em></p>
<p align="right"> <strong>--Jarusha Turner Jacobs, New York</strong></p>
<p><em>Excellent idea. We need to be mindful of giving people enough time to plan for this trip. if it's going to be in 2010
then we need to really get on the ball with the planning. If there's anything that I can do to assist with the planning
please don't hesitate to let me know."</em></p>
<p align="right"> <strong>--Cordover Browne, Massachusetts, USA</p>
</div>
</div>
<div id="promo">
<div id="promo_inner">
<cite>If you would like to place an ad with us or donate to the reunion, please do not hesistate to contact us.</cite>
</div><!-- end nav_inner -->
</div><!-- end nav -->
<div style="clear:both"></div> <!-- to fix square-edge draw problem on rounded footer box in Safari - CSS-based clearing doesn't fix the problem in this case -->
<div id="footer">
<div id="footer_inner">
<p>© 2009 - The Bolans Community Development Association</p>
</div>
</div>
</div>
<!--end main wrapper-->
</body>
</html>.CSS
/* THREE COLUMN LAYOUT */
/* you have to be careful with Nifty Corners - don't add height to the outer containers or the corners will no display correctly in Safari. */
/*padd the */
* {margin:0 padding:0;}
body {
text-align:center; /* IE6 needs this to center the layout in the browser window */
}
#main_wrapper {
width:840px; /* widths of columns will scale proportionately as this width is changed */
margin-left:auto; /* centers max'd layout in browser */
margin-right:auto; /* centers max'd layout in browser */
text-align:left; /* prevents page inheriting IE6 centering hack on body */
padding:10px 0;
margin-top:10px;
}
#header {
margin: 0 10px;
}
#nav {
width:130px;
margin:10px 10px 10px 10px;
float:left;
display:inline; /* fixes IE6 margin doubling bug */
}
#content {
width:550px;
margin:10px 10px 10px 0px;
float:left;
}
#promo {
width:120px;
margin:10px 0 10px 0;
float:left;
}
#footer {
margin:0 10px;
clear:both;
}
#header_inner, #content_inner, #promo_inner
{
overflow:hidden; /* prevents oversize elements from breaking the layout */
}
#header_inner {
padding:1em 2em;
width: 494 px;
height: 119 px;
background: url(../../lib/css_styles/layouts/carlile_bay3.jpg);
}
#nav_inner {
padding:1em .5em;
}
#content_inner {
padding:0em 1em 1em 1.5em;
}
#promo_inner {
padding:1em .5em;
}
#footer_inner {
padding:.5em 1em;
text-align:center;
}
