• Registered: 2009-09-21
  • Posts: 9

Topic: Unwanted gaps underneath heading and paragraphs

First off, thanks for all the help I've been getting here. You guys have really helped me get an understand for html/css (but there are still problems, argh!)

There's always a large gap between my paragraphs, and underneath my <h3> tags. I've gone through the code many times and can't figure out what is causing this. My HTML is roughly:

[head, meta info, etc.]
<div id="wrap">
    <div id="header">
        <div id="header-inner">
            <div id="search"></div>
        </div>
             <div id="menu">
            </div> 
    </div>
    <div id="breadcrumbs"></div>
</div>
<div id="content">
        <div id="main">
        <h2></h2>
        <h3></h3>
       [!!!Large unwanted gap here]
       <p></p>
       [and here]
       <p></p>
       [and here]
       </div>
[sidebar, footer, navigation etc. here - all working normally. This makes me think it has something to do with "content" or "main" divs.]
</div>
</body>

And here's the relevant CSS code. I used the CSS template at http://www.killersites.com/forums/topic … ur-project , but wondering if I shouldn't have used it now. What are "resets"? I tried deleting them from the code, but it made my site appear completely different (no line spacing, tiny text, etc.).

I suspect the error is in the #main or #content area, but I can't find what would be causing such a large space between paragraphs. I can use a negative margin as a temporary fix, but... I don't think I should have to use that. There must be some code causing the gap in the first place.

/* ======== Resets ::
----------------------------------------------------------------- */
body, address, blockquote, h1, h2, h3, h4, h5, h6, p, pre, dl, ol,
ul, dd, dt, li, fieldset, form {margin:0;padding:0;}

/* ======== HTML & Body ::
----------------------------------------------------------------- */
html {font-size:100.01%;height:101%;}
body { 
    height:100%;
    font:62.5%/1.4 Arial,Tahoma,Geneva,Helvetica,sans-serif;
    background: url(../images/backgrounds/bg_body.jpg) repeat-x top;
    width:100%;
    color:#333 
}
/* ======== Links ::
----------------------------------------------------------------- */
a,a:visited {text-decoration:underline;}
a:active, a:focus, a:hover {text-decoration:none;outline:none;}
a img {border:none;}

/* ======== Typography ::
----------------------------------------------------------------- */
/* ==== Resets for Nested elements 
- Helpful for Relative Font Size Sites (Not Needed for Fixed Font Size Sites) ==== */
blockquote p, p blockquote, div div, div li, div p,div dt,div dd,
li li, li li li,ul ul, p address, p pre, pre p,
td address, td h1, td h2, td h3, td h4, td li, td dd, td dt, td p, td pre {font-size: 100%;}

abbr,acronym {text-decoration: none;border:0}
address, h1, h2, h3, h4, h5, h6, dd, dt, li, p, pre {padding:.6em 0;}
h1 { font: bold 2em Arial,Tahoma,Geneva,Helvetica,sans-serif; padding: 25px 0 25px 0; color: #555; background: transparent }
h2 {font-size:1.5em}
h3 {font-size:1.4em}
h4 {font-size:1.4em;}
h5 {font-size:1.2em;}
h6 {font-size:1.1em;}
address,blockquote,div,dd,dt,li,p,th,td {font-size:1.2em;}
dt {font-weight:bold;}
pre {font-size: 12px;}
q:before,q:after {content:'';}
/* ======== Lists ::
----------------------------------------------------------------- */
dl, ol {margin-left: 20px;}
ol, dd, dt {vertical-align:middle;list-style-position: inside;}
ul {  padding: 0; margin: 0 }
li { list-style-type: none }

/* ======== Tables ::
----------------------------------------------------------------- */
table {
    border:none;
    border-collapse:collapse;
    border-spacing:0;
    overflow:hidden;
}
caption, th, td {text-align: center;vertical-align:top;}

/* ======== General Purpose Classes ::
----------------------------------------------------------------- */
.alignleft {text-align:left;}
.alignright {text-align:right;}
.center {text-align:center;}
.clear {clear:both;padding:0;margin:0;line-height:0;}
.floatleft {float:left;}
.floatright {float:right;}
.hidden {display:none;}
.inline {display:inline;}
.large {font-size:20px;font-weight:bold;}
.light {color:#999;}
.small {font-size:10px;font-weight:normal;}

/* ======== Template ::
----------------------------------------------------------------- */
#wrap {width:960px;margin:0 auto;}
#header {
    height:111px;
    width:960px;
    margin:0;
    padding:0;
    width:960px;
}
#header-inner {
    height: 54px;
    width: 960px;
    padding:10px
}
#content {
    background: transparent;
    width:960px;
    margin: 0 auto;
}
#main {
    float:right;
    width: 720px;
    color: #555;
    background: #FFF
}

#main p { text-align: justify; font-size:1.2em; margin: 7px 0 7px 0; background: inherit }
#main img { margin: 0px 10px 3px 10px; position: relative; float: right; border: 1px solid  #f5f5f5; padding: 1px; background: #FFF }
#main h2 { color: #999; width: 100%; border-bottom: 1px solid #BBB; margin-bottom: -5px; line-height: 2px; background: inherit }
#main h3 { color: #555; font-size: 1.2em; font-weight: bold;background: transparent}
#main ul { }
ul#main ul { list-style-position: inside; margin-left: 2px }
#main ul li { list-style-type: square; margin-left: 15px }
#main ul ul li { list-style: none; margin-left: 10px; list-style-type: lower-alpha; list-style-position: inside; } 
#main .citation { background: #FFF url(../images/citation1.gif) no-repeat top left; font-style: italic; padding: 10px 0px 35px; font-size: 1.2em }
#main .citation p {  background: #FFF url(../images/citation2.gif) no-repeat top right; padding-bottom: 20px; padding-left: 35px; color: #555; }
.topleftcorner { float: left; margin: 10px 10px 0 0; border: 1px solid #ddd; padding: 5px; background: #f5f5f5  }
#main blockquote { text-align: justify; border-left: 8px solid #f0f0f0; padding-left: 8px; margin-right: 15px; margin-top: 5px; background: inherit }
#main br { margin: 0px 0 5px 0; background: inherit }

#sidebar {float: left; width: 200px; margin: 0 auto; background: #FFF }
#sidebar h2 { 
    color: #FFF; 
    border-bottom: 1px solid #f0f0f0; 
    font-size: 1em;
    padding-left: 8px;
    line-height: 10px;  
    background: url(../images/menus/sideh2.jpg) no-repeat top left;
    margin-bottom: 5px
}

#sidebar .box { border: none; padding: 0px 0 20px 0; margin: 0 0 1em 0; line-height: 0.14em; background: #f5f5f5 url(../images/menus/sidebottom.jpg) no-repeat bottom center }
#sidebar .box ul { padding-left: 8px }
#sidebar .box li a { text-decoration: none; font-size: 1em }

.extra {
    text-align: left;
    padding:8px;
    font-size:1.8em;
    font-family: "Times New Roman", times;
    margin:0px;
    color: #AAA;
    line-height: 25px;
    background: #FFF;
}
.extra h3 { color: #CCD8E1;  margin-bottom: 5px; font-size: 1.2em; background: #FFF }
.extra a { color: #8FB9DB; text-decoration: none; font-style: italic; background: #FFF }
.extra p { margin-top: 15px; background: #FFF }

#footer { clear: both; border-top: 2px solid #e5e5e5; padding: 7px 0 7px 0; color: #777; font-size: 0.9em; background: #FFF }
#footer .right  { float: right; text-align: right; background: #FFF; }

/* ======== Navigation ::
----------------------------------------------------------------- */
/* ==== Main Menu ==== */
#menu { float: right; margin: 0; padding: 0; background: transparent; height: 31px; width: 960px }
#menu  ul { list-style: none; padding: 0px 0; margin: 0; float: left; background-color: transparent }
#menu li {
   width: auto !important;
   width: 0%;
   float: left;
   margin: 0;
   font-size: 10px;
   line-height: 31px;
   white-space: nowrap;
   background: url(../images/menus/leftmenu.jpg) center left no-repeat;
   background-color: transparent; 
   list-style: none;
   padding-right: 2px;
}
#menu li:hover { font-weight: bold; }

#menu a {
   font-family: Verdana, Arial, Sans-Serif;
   font-size: 1.2em;
   display: block;
   padding-left: 0px;
   padding-right: 10px;
   text-decoration: none;
   color: #FFF;
   background: url(../images/menus/rightmenu.jpg) top right no-repeat;
   margin-top: 0px;
   margin-left: 9px
}

#menu a.current { font-weight: bold }
    
/* ==== Breadcrumbs Menu ==== */
#breadcrumbs {
    height: 28px;
    background: transparent;
    width: 960px;
    margin: 10px 0;
    color: #333;
    padding-left: 0px;
    font:1em bold Arial,Tahoma,Geneva,Helvetica,sans-serif;
}
#breadcrumbs a {text-decoration: none}

/* ==== Footer Menu ====- */
#footer ul { list-style: none; float:right; text-align:right; background:#FFF}
#footer li {display: inline }
#footer li a { text-decoration: none; background: #FFF }

Thanks for any advice you can offer.

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: Unwanted gaps underneath heading and paragraphs

OK... this is a margins and padding issue.

p tags:
At the moment these tags have both top/bottom padding (7 px) and top/bottom margin (.6 em, or about 7 or 8 px).

h3 tags:
This element also has a top/bottom margin of .6 em (defined in "address, h1, h2, h3, h4, h5, h6, dd, dt, li, p, pre"). However, most of the issues are actually caused by the h2 tag, which has a line-height of 2, a -5px bottom margin, and a .6em top/bottom padding.

My suggestions:
Start with the h2 tag. Remove the line-height and negative bottom margin. Give it a padding 0, see how it looks, then adjust as necessary. Try giving the h3 and the p tags a padding-bottom of 0, and then adjust it as necessary.