1 reply [Last post]
scott12
Offline
newbie
Port Huron, MI
Last seen: 3 years 13 weeks ago
Port Huron, MI
Timezone: GMT-4
Joined: 2011-07-30
Posts: 3
Points: 6

I am new to css/html. I work in the area of non-profit housing and I want to build a site to recruit donations and volunteers. I have validated my code and tested the site on several browsers. The problem is the navigational menu is shifted to the right about an inch on ie7 and earlier. It appears fine in other browsers I have tested. The temporary site is:

http://74.220.215.79/~phhcvolu

The HTML and CSS code is below:
CSS code:
body {

padding : 0;

line-height : 1.2em;

margin : 0;

text-align : justify;

background-color : white;

background-image : url(images/silvervine.jpg);
}
#maincontainer {

width : 980px;

margin : 0 auto;

background-color : white;

background-image : url(images/1.gif);

background-repeat : repeat-y;
}
#topsection {

background : #233873;

height : 120px;

padding-bottom: 30px;

}
#topsection h1 {

margin: 0;

padding-top : 15px;
}
#contentwrapper {

float : left;

width : 100%;
}
#contentcolumn {

margin-left : 220px;

}
#leftcolumn {

float : left;

width : 220px;

margin-left : -980px;

background : #233873;

color : #a0a0a0;

border-right-color : #a0a0a0;

border-right-width : 3px;

border-right-style : solid;
}
img.vistalogo {

float : left;

margin-top : 5px;

margin-bottom : 5px;

margin-left : 5px;

margin-right : 8px;
}
img.lablogo {

float : left;

margin-top : 5px;

margin-bottom : 15px;

margin-left : 5px;

margin-right : 8px;
}
img.habitatlogo {

float : left;

margin-top : 5px;

margin-bottom : 5px;

margin-left : 5px;

margin-right : 8px;
}
img.tomato {

float : left;

margin-top : 5px;

margin-bottom : 5px;

margin-left : 5px;

margin-right : 8px;
}
img.grocery {

float : left;

margin-top : 5px;

margin-bottom : 5px;

margin-left : 5px;

margin-right : 8px;
}
h3 {

font-weight : bold;

font-size : 1.5em;

font-family : "Pristina", "Monotype Corsiva", "Freestyle Script", "MV Boli", "Comic Sans MS", "Papyrus";
}
#sitelogo {

text-indent : -5000px;

background : url(images/orgbanner1.jpg) no-repeat;

width : 980px;

height : 120px;

line-height : 120px;
}
#lab {

clear : left;
}
#garden {

clear : left;
}
#donate {

clear : left;
}
#habitat {

clear : left;
}
p#welcome {

font-weight : bold;

font-variant : small-caps;

font-size : 1.2em;
}
h4 {

text-decoration : underline;

font-weight : bold;

font-size : 1.1em;
}
#footer {

clear : left;

width : 100%;

background : #a0a0a0;

color : #233873;

text-align : center;

padding : 4px 0;
}
.innertube {

margin : 20px;
}

ul.underlinemenu
{
margin-top:-18px;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(images/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

ul.underlinemenu li
{
display:block;
float:left;
margin:0;
padding:0;
margin-right: 12px;
}

ul.underlinemenu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}

ul.underlinemenu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}

ul.underlinemenu li a.current
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}

.collinks a {

color : #a0a0a0;

padding : 3px;

text-decoration : none;
}
.collinks a:hover, a.selected {

color : #ffffff;

border-bottom-color : #ffffff;

border-bottom-style : solid;
}
.element1 {

margin-left : 120px;
}
.element2 {

margin-left : 60px;
}

HTML code:

 
<!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" lang="en" xml:lang="en">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
 
  <title>PHHC Volunteer Site</title>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <link rel="stylesheet" href="stylesheetfixed2.css" type="text/css" />
</head>
 
<body>
  <div id="maincontainer">
    <div id="topsection">
      <h1 id="sitelogo">Graphic or Website Logo Goes Here</h1>
 
      <div>
		<ul class="underlinemenu">
			<li class="button"><a href="#about" >About</a></li>
			<li class="button"><a href="#lab" >Computer Lab</a></li>
			<li class="button"><a href="#garden" >Community Garden</a></li>
			<li class="button"><a href="#habitat" >Habitat for Humanity</a></li>
			<li class="button"><a href="#volunteer" >Volunteer</a></li>
			<li class="button"><a href="#donate" >Donate</a></li>
			<li class="button"><a href="#respages" >Resident Pages</a></li>
 
		</ul>
	</div>
    </div>
 
    <div id="contentwrapper">
      <div id="contentcolumn">
        <div class="innertube">
          <p><img src="images/102583.jpg" alt="lush" width="715" height="320" /></p>
 
          <p id="welcome">Welcome to the Port Huron Housing Commission's Volunteer
          Website!</p>
 
          <h3 id="about">About Us</h3>
 
          <p><img class="vistalogo" src="images/AmeriCorps_Vista_Logo.jpg" alt=
          "vista logo" width="100" height="100" /> The Port Huron Housing Commission's
          volunteer office is located inside the Community Center at Dulhut Village, a
          subsidized family housing complex with 1## units. The Housing Commission
          currently has four full-time AmeriCorps VISTA volunteers working on community
          improvement projects throughout Port Huron. VISTA is a national service program
          designed specifically to fight poverty. Currently, the Housing Commission's
          VISTA volunteers are working on projects related to affordable housing, food
          security, nutrition, and public health. Within this site you will find
          information about the current volunteer projects, how interested people can get
          involved to help the community, as well as links to the personal pages of some
          of our public housing residents.<br /></p>
          <hr />
 
          <h3 id="lab">Computer Lab</h3>
 
          <p><img class="lablogo" src="images/lab1.png" alt="computer" width="97" height=
          "102" /> The Dulhut Community Center is home to a computer lab with 19
          computers available to all PHHC residents. The computer lab was made possible
          by a ROSS self-sufficiency grant and was built with the objective of helping
          residents obtain their educational and vocational goals. The lab has four
          part-time staff members and four AmeriCorps volunteers that are available to
          provide technical assistance to lab users. Additionally, technical training and
          life skills classes are held at the lab on a monthly basis. Topics covered in
          past classes have included:</p>
 
          <ul>
            <li class="element1">Resume and cover letter writing</li>
 
            <li class="element1">Job search</li>
 
            <li class="element1">Financial literacy</li>
 
            <li class="element1">Spreadsheets and word processing</li>
 
            <li class="element1">Mortgages and financing a home purchase</li>
          </ul>
 
          <p>Please check this site regularly for updates on upcoming classes.</p>
          <hr />
 
          <h3 id="garden">Dulhut Community Garden</h3><img class="tomato" src=
          "images/tomato2.jpg" alt="tomato plant" width="90" height="119" />
 
          <p>The Housing Commission has partnered with SONS Youth Outreach Center to
          plant a brand new community garden located behind the Dulhut Community Center.
          The garden is part of SONS "Seeds of Hope" project, a program designed to help
          public housing residents and their children learn gardening skills while
          beautifying the neighborhood and putting vacant land to productive use.
          Research has shown that children that grow their own food are more likely to
          continue healthy eating habits throughout their lives, and students who are
          actively engaged in garden projects tend to enjoy learning and show improved
          attitudes toward education. For more facts about children and gardening,visit
          <a href="http://www.childrenandnature.org/">www.childrenandnature.org.</a></p>
 
          <p>The garden is 1200 square feet and is divided into nine individual plots,
          with each plot assigned to one or more public housing families. The entire
          garden was planted by neighborhood children with guidance from AmeriCorps VISTA
          volunteers, who also maintain and monitor the garden. Currently we are growing
          over 40 tomato plants, 20 pepper plants, 7 "hills" of cucumbers, 3 "hills" of
          squash, 2 "hills" of cantaloupe, 14 heads of lettuce, 5 Zucchini, 3 strawberry,
          10 okra, 5 eggplant, 10 swiss chard, as well as several rows of carrots,
          radishes, and onions. Please check out the photos below!</p>
          <hr />
 
          <h3 id="habitat">Partnership with Habitat for Humanity</h3>
 
          <p><img class="habitatlogo" src="images/habitat4.gif" alt="habitat logo" width=
          "110" height="136" /></p>
 
          <p>AmeriCorps National Service Program and Habitat for Humanity International
          have maintained a close relationship since 1994, when they entered into a
          partnership aimed at mobilizing more volunteers in the fight against poverty
          housing. In Port Huron, two Housing Commission VISTAs volunteer weekly at Blue
          Water Habitat for Humanity, where they work at construction sites throughout
          the area building housing for low-income families. For more information on Blue
          Water Habitat, visit their website at <a href=
          "http://www.bwhabitat.org/">www.bwhabitat.org.</a><br />
          <br /></p>
          <hr />
 
          <h3 id="volunteer">Volunteer Opportunities</h3>
 
          <p>The Port Huron Housing Commisson relies on volunteers to provide residents
          with a wide range of services. Volunteer opportunities may include:</p>
 
          <ul>
            <li class="element2">Monotoring the computer lab</li>
 
            <li class="element2">Maintaining the vegetable garden in the summer and
            helping with clean-up in the fall</li>
 
            <li class="element2">Provide mentoring and life skills training for young
            residents</li>
 
            <li class="element2">Organizing and teaching fitness or computer literacy
            classes</li>
 
            <li class="element2">Maintaining and updating volunteer website</li>
          </ul>
 
          <p>If you are interested in volunteering, please call the lab at " " or email
          at " "</p>
          <hr />
 
          <h3 id="donate">Donate</h3>
 
          <p><img class="grocery" src="images/grocery.jpg" alt="grocery bag" width="100"
          height="98" /></p>
 
          <p>Dulhut Community Center accepts and distributes donations of food, clothing,
          furniture, kitchen/bath household items, cleaning supplies, baby care items and
          other necessities. If you or your organization are able to donate goods or
          services in support of PHHC residents and programs, please contact:</p><br />
          <hr />
 
          <h3 id="respages">Resident Pages</h3>
 
          <p>The following are links to the personal pages of PHHC residents and computer
          lab staff who are currently on the job market. Each page contains information
          on their education, work and volunteer experience, professional goals and more.
          Please check out the links below:</p><a href="ShammayDuckworth.html">Shammay
          Duckworth</a><br />
          <a href="WandaEvans.html">WandaEvans (staff)</a><br />
          <a href="TamaraMathena.html">Tamara Mathena (staff)</a><br />
        </div>
      </div>
    </div>
 
    <div id="leftcolumn">
      <div class="innertube">
	<h4>Hours and Location</h4>
 
        <p><strong>Location:</strong><br />
        1925 Nern Street<br />
        Port Huron MI 48060<br />
        <br />
        <strong>Hours:</strong><br />
        Monday - Friday<br />
        11 am to 8 pm<br />
        <br />
        Saturday<br />
        11 am to 6 pm<br />
        <br />
        Sunday<br />
        12 pm to 5 pm<br />
        <br />
        <strong>Phone:</strong><br />
        810-987-9842</p>
 
        <h4>Upcoming Events</h4>
 
        <p>Events and training being held at lab go here</p>
 
        <h4>Links</h4>
	<span class="collinks">
	<a href="http://www.phhousing.org/">PHHC Homepage</a><br />
        <br />
        <a href="http://www.sonsoutreach.org/">SONS Outreach Center</a><br />
        <br />
        <a href="http://www.Americorps.gov">AmeriCorps</a><br /></span>
      </div>
    </div>
 
    <div id="footer">
      <p>PHHC Volunteer Website maintained by Adam Martin<br />
      </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%70%68%68%63%76%69%73%74%61%40%67%6d%61%69%6c%2e%63%6f%6d%22%3e%70%68%68%63%76%69%73%74%61%40%67%6d%61%69%6c%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p></p>
    </div>
  </div>
</body>
</html>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 12 weeks 8 hours ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Why did you post this three

Why did you post this three times?

Verschwindende wrote:
  • CSS doesn't make pies