Extra space at top - can't figure out!

Hi everyone! I know this is a recurring question here and I have tried to find the answer in other posts. So, I'm sorry to have to ask, but I would really appreciate any insight you can give!

My site is https://www.chacha-vintage.com.

There is a bunch of extra space at the top. I installed the excellent Web developer extension for Firefox and see that the space I'm referring to is defined in HeaderWrapper and also NavMainWrapper. However, in looking at my stylesheet, I can't see what the problem is with these areas.

Basically, I want to get rid of the space below the header and surrounding the "Home... Log In" line. Also, I would love it if my center box content would move up to align with the top of my left sideboxes.

Here are the Wrapper & Nav parts of my CSS:

/wrappers - page or section containers/
#mainWrapper {
background-color: #ffffcc;
text-align: left;
margin-left: .18in;
width: 100%;
vertical-align: top;
}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: 0em;
}

#logoWrapper {
width:792px;
height:88px;

border: 0px;
margin: 0em;
}

#tagline {
color:;
font-size: 2em;
text-align : center;
vertical-align: middle;
}

#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%;
}

.wrapperAttribsOptions {
margin: 0em 0em;
}

/navigation/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
margin: 0em;
font-size: 0.5em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #ffffcc;
font-weight: bold;
color: #300007;
width: 100%;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin-left: .08in;
padding: 0px 0in;
list-style-type: none;
text-align: center;
line-height: 1em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
padding: 0px 0in;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0px 0em;
margin-left: .08in;
color: #300007;
white-space: nowrap;
}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #000000;
}

#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}

#navEZPagesTOC ul li {
white-space: nowrap;
}

#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}

#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0em;
}

#navBreadCrumb {
background-color: ;
}

#navEZPagesTop {
background-color: #ffffcc;
}

#navBreadCrumb, #navEZPagesTop {
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0em;
}

#navColumnOne {
background-color: #ffffcc ;
}

#navColumnTwo {
background-color: #ffffcc;
}

Thanks so much!!

Maybe add to bottom of your stylesheet:

#navMain ul{
margin-top:0px;
margin-bottom:0px;
}

might get rid of much of the space.

Hi kiddo! Thanks so much! That did help a lot. Now I'm wondering if there's a blank table cell above my center content... Here is the element info when I hover on that space:

html > body #indexBody > div #MainWrapper > table #contentMainWrapper > tbody > tr > td

Does this mean there's a blank cell? If yes, how can I get rid of it?

Thanks again!

chacha-vintage:

Hi kiddo! Thanks so much! That did help a lot. Now I'm wondering if there's a blank table cell above my center content... Here is the element info when I hover on that space:

html > body #indexBody > div #MainWrapper > table #contentMainWrapper > tbody > tr > td

Does this mean there's a blank cell? If yes, how can I get rid of it?

Thanks again!

You have an empty <h1> declaration as well as an empty <h2> declaration at the top of your center column:

<h1 id="indexDefaultHeading"></h1>

Try commenting these out and see if that helps

Hi Clyde! Thanks for taking a look! So, I find that this is in the file tpl_index_default.php. However, can you tell me exactly what I'm supposed to be changing in this file?

Here is the exact code I believe you're referring to:

Thanks for your patience! I am just learning as I go!

chacha-vintage:

Hi Clyde! Thanks for taking a look! So, I find that this is in the file tpl_index_default.php. However, can you tell me exactly what I'm supposed to be changing in this file?

Here is the exact code I believe you're referring to:

<div class="centerColumn" id="indexDefault"> <h1 id="indexDefaultHeading"><?php echo HEADING_TITLE; ?></h1> <?php if (SHOW_CUSTOMER_GREETING == 1) { ?>

<h2 class="greeting"><?php echo zen_customer_greeting(); ?></h2>

<?php } ?>

Thanks for your patience! I am just learning as I go!

Just comment out the highlighted portions

Clyde, it worked! Thanks again!! :D

chacha-vintage:

Clyde, it worked! Thanks again!! :D

Glad to help

I have the same problem. I know this is probably not a very smart question but how exactly do I "comment something out"? Do I remove the entire line of code?

Thanks.