I'm not sure what has caused that gap for you - it doesn't exist in my fresh install test site. The line-height: 14px; setting you made for body{} in your main stylesheet is the cause of the background not quite filling behind the letters of your headings.

Change/add this

margin-bottom: -0.7em;
line-height: 1.4em;

to bring the headings more into line:
Code:
.catBoxHeading1 { 
    font-family: 'times new roman', serif;
    font-weight: bold;
    font-size: 1.2em;
    color: #335511; 
    background-color: #00ccff;
    /*background-image: url(../images/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    display: block;
    padding: 0.0em 0.0em;
    margin-top: 0px;
    margin-bottom: -0.7em;
    line-height: 1.4em;
    }
Check in IE6 if you have it, as it may not correctly handle the negative margin-bottom even though it is valid CSS.