Does anyone know how to delete or reduce the empty space between the heading and written content in the body? My heading, is only 22px but still creates a huge gap or empty space above it and below it. I don't know if you need this bit of information but I also insert an image of a horizontal line after the heading which normally falls under it like an underline. I don't think that makes any difference but can you please, please, please help by providing a code? Thanks.
It could be a number of things; but the answer lies within the markup and the styles that are applied to the markup. Because we are not privy to either, we cannot help you.
At the very least, post the markup and relevant style sheet here so that we have at least something to work with. Better still, sooner or later you will have to upload the site. Perhaps now is a good time.
Gramps
Here you go!
<!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>Inland Empire Waterkeeper</title>
<link href="_css/styles.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
color: #333333;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
body {
background-color: #FFFFFF;
color: #D6D6D6;
background-image: url(_images/background_teal.png);
background-repeat: repeat-x;
margin: auto;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
h1 {
font-size: 28px;
color: #666666;
}
h2 {
font-size: 26px;
color: #666666;
}
h3 {
font-size: 24px;
color: #666666;
}
h4 {
font-size: 22px;
color: #666666;
}
h5 {
font-size: 20px;
color: #666666;
}
h6 {
font-size: 18px;
color: #666666;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><img src="_images/banner.jpg" width="933" height="300" /></div>
<div class="menubar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" class="MenuBarItemSubmenu">About Us</a>
<ul>
<li><a href="organization.html" class="MenuBarItemSubmenu">Our Org.</a>
<ul>
<li><a href="mission.html">Our Mission</a></li>
<li><a href="history.html">Our History</a></li>
<li><a href="community.html">Our Community</a></li>
</ul>
</li>
<li><a href="team.html" class="MenuBarItemSubmenu">Our Team</a>
<ul>
<li><a href="staff.html">Staff</a></li>
<li><a href="supporters.html">Supporters</a></li>
<li><a href="advisoryboard.html">Advisory Board</a></li>
</ul>
</li>
<li><a href="coastkeeper.html">Coastkeeper</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">What We Do</a>
<ul>
<li><a href="programs.html" class="MenuBarItemSubmenu">Programs</a>
<ul>
<li><a href="advocacy.html">Advocacy</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="restoration.html">Restoration</a></li>
<li><a href="enforcement.html">Enforcement</a></li>
</ul>
</li>
<li><a href="prokects.html">Projects</a></li>
<li><a href="datareports.html">Data & Reports</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Get Involved</a>
<ul>
<li><a href="volunteer.html">Volunteer</a></li>
<li><a href="employment.html">Employment</a></li>
<li><a href="events.html">Events & Meetings</a></li>
<li><a href="donate.html">Donate</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">News Room</a>
<ul>
<li><a href="pressrelease.html">In the News and Press Releases</a></li>
<li><a href="legislation.html">Legislative Updates</a></li>
<li><a href="waternews.html">Water in the News</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Resources</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Information</a>
<ul>
<li><a href="watershed.html">Our Watershed</a></li>
<li><a href="reportpollution.html">Report Pollution</a></li>
</ul>
</li>
<li><a href="photos.html">Photo Gallery</a></li>
</ul>
</li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="body">
<div class="emptyspacecontent">
<h4><strong style="text-align: justify;"><br />
</strong></h4>
</div>
<div class="emptyspace4"></div>
</div>
<div class="footer"><img src="_images/footer_transparent.png" width="933" height="100" alt="Inland Empire Waterkeeper" /></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
You have not supplied any content in your markup. hence I placed some text of my own within the h4-element. This is the result, without a space.
The problem must be found in what you have not supplied us with.
I get tired of stressing the importance of uploading the site and supplying a link to it.
Gramps
North America
Europe, Middle East and Africa
Asia Pacific