Sat, 2011-07-30 16:06
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>
