mccdaddy
04-23-2007, 05:24 AM
The site I created looks fine in IE7 (Windows Vista Home Premium) but in Firefox and Netscape there's a big space between the header and the body and the sidebar text overlays other data.
http://wellnessiswealth.tripod.com/
Can someone assist me with fixing this?
Thanks.
mccdaddy
kewlceo
04-23-2007, 01:50 PM
Before anyone can sort it out, you'll need to correct the errors, mate:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwellnessiswealth.tripod.com%2F
Right off the bat I noticed that <div id="nav"> had no closing tag, and one of your list elements <li><a href="#">Education</a> had no closing tag, so that's why I suggest correcting errors first.
Excavator
04-23-2007, 05:23 PM
Goodmorning mccdaddy,
Your gap is coming from the huge margin/padding set on #sidebar.
I marked the current top margin and padding in red:#sidebar {
margin:375px 0 0 475px;
padding:180px 0 0 0;
}
=====
I changed a few things around for you- it validates now: <!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="text/html; charset=utf-8" />
<title>Lorece Edwards- Wellness is Wealth</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body id="Title">
<div id="header">
</div>
<div id="content">
<div id="journal">
<h2>Mission:</h2>
<dl>
<dt>Our mission is to strengthen and support individuals, communities, and organizations in achieving optimum health.</dt>
<dd><h2>Consulting Areas include:</h2></dd>
<dd>
<ul>
<li>Community Needs Assessment</li>
<li>Program Development and Evaluation</li>
<li>Presentations and Public Speaking</li>
<li>Employee Wellness Workshops</li>
<li>Study Design</li>
<li>Focus Group Facilitation</li>
<li>Lifestyle Health Coaching</li>
<li>Health Promotion/Education</li>
</ul>
</dd>
<dd><h3>Member of the:</h3></dd>
<dd>
<ul>
<li>American Public Health Association</li>
<li>Delta Omega Honorary Society for Public Health</li>
</ul>
</dd>
</dl>
<p>
“Of all the forms of inequality, injustice in health care <br />
is the most shocking and inhumane.” <br />
Martin Luther King, Jr
</p>
<img src="http://wellnessiswealth.tripod.com/images/drking.jpg" alt="description" width="100" height="67" class="mid" />
<!--closes journal--></div>
<div id="sidebar">
<ul id="menu">
<li><a href="#">Index</a></li>
<li><a href="#">Education</a></li>
<li><a href="#"> Resume</a></li>
<li><a href="#">Experience</a></li>
<li>U.S. Secretariat for African American Catholics</li>
<li>Community Baptist Church of Walbrook</li>
<li>Sojourner-Douglass College</li>
<li>Independence Tobacco Project</li>
<li>Women in Maryland Higher Education</li>
<li>Johns Hopkins Hospital - Bayview</li>
</ul>
<p>For more information, contact:</p>
<p>Lorece V. Edwards, DrPH, MHS</p>
<p>Email:<a href="mailto:loreceedwards@aol.com">loreceedwards@aol.com</a></p>
<!--closes sidebar--></div>
<!--closes content--></div>
<div id="footer">
<p>Copyright © 2007 <strong>Lorece Edwards</strong></p>
<!--closes footer--></div>
</body>
</html>
and the CSS:
html, body {
text-align: center;
background-color: #957339;
}
* {
margin: 0;
padding: 0;
border: none;
}
#header {
margin:0 auto;
background:url(http://wellnessiswealth.tripod.com/images/wellnessiswealth2.jpg);
width:750px;
height:119px;
}
#content {
margin:0 auto;
background:url(http://wellnessiswealth.tripod.com/images/wealthbg.gif) repeat-y;
width:750px;
text-align:left;
overflow: hidden;
}
#journal {
width:475px;
float:left;
}
#journal dl {
width: 350px;
margin: 0 auto;
}
#sidebar {
width: 275px;
margin: 0 0 0 475px;
}
#sidebar p, #sidebar dl, #footer p {
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
color:#2F4557;
font-size:12px;
line-height:1.0;
margin:20px 40px;
}
#sidebar dt {
color:#2F4557;
font-size:12px;
font-weight:bold;
}
#sidebar dd {
margin:0;
}
#sidebar a {
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
padding:6px 0 3px 0;
height:20px;
text-decoration:none;
display:block;
}
#sidebar a:hover {
color:#0000FF;
font-weight:bold;
}
h1 {
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:65px;
color:#687E90;
display:block;
}
h2, h3, h4 {
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:20px;
color:#687E90;
margin:30px 40px 5px 80px;
}
h3 {
font-size:18px;
}
h4 {
font-size:16px;
}
p {
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#0000C0;
margin:0 40px 10px 80px;
line-height:1.5;
text-align:justify;
}
a {
color:#666;
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:#FF0000;
font-weight:bold;
}
#menu {
margin:0 40px 20px 15px;
padding:30px 0 0 0;
width: 190px;
float: left;
border-bottom:1px solid #ccc;
}
#menu li {
list-style:none;
border-top:1px solid #ccc;
}
#menu li {
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#0000C0;
padding:6px 0 3px 0;
height:30px;
text-decoration:none;
display:block;
}
#menu li a {
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
padding:6px 0 3px 0;
height:20px;
text-decoration:none;
display:block;
}
#menu li a:hover {
color:#0000FF;
font-weight:bold;
}
#footer {
clear:both;
margin: 5px auto;
padding:0 0 10px 0;
}
#footer p {
text-align:center;
margin:0;
padding:0;
}
.mid {
margin: 10px 0 10px 150px;
}
mccdaddy
04-23-2007, 07:39 PM
kewlceo, this is the first site I've done in a while and I forgot to do the validation. Thanks for the reminder.
Excavator, thank you so much. My CSS knowledge is well short of my aspirations but I try to learn from each experience. You've given me a nice education here. I greatly appreciate your guidance.
mccdaddy
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.