7 Replies Latest reply: Jul 20, 2012 1:08 PM by Ivy54 RSS

    Deleting space between the heading and content

    Ivy54 Community Member

      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.

        • 1. Re: Deleting space between the heading and content
          Ben Pleysier CommunityMVP

          Can you please, please, please help by providing a code?  Thanks.

           

          The best way to do this is to supply a link to your site

           

          Gramps

          • 2. Re: Deleting space between the heading and content
            Ivy54 Community Member

            Sorry, I haven't launched it yet but here's a pic of what happens:  space.pngSee the huge gap between the header and the content?  It's humongous!  Thanks ahead of time for any advice you have to offer.  Thanks.

            • 3. Re: Deleting space between the heading and content
              Ben Pleysier CommunityMVP

              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

              • 4. Re: Deleting space between the heading and content
                Ivy54 Community Member

                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 &amp; 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 &amp; 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>

                • 5. Re: Deleting space between the heading and content
                  Ben Pleysier CommunityMVP

                  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.

                  _Capture.jpg

                   

                  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

                  • 6. Re: Deleting space between the heading and content
                    Nancy O. CommunityMVP

                    Looks like default browser margins to me. 

                    Try adding this to your CSS.

                     

                     

                    h4 {margin-bottom:0}

                     

                    p {margin-top:0}

                     

                     

                     

                    Nancy O.

                    • 7. Re: Deleting space between the heading and content
                      Ivy54 Community Member

                      Thank you so much!  That helped, it worked!!