Space between headerWrapper and logoWrapper

1.3.9h

I am trying to eliminate unwanted spaces. See below.

http://i56.tinypic.com/10qb86x.jpg

I made the mainWrapper background color Gray temporarily.

I made each element a different background color so I could see what is going on. That is how i discovered the unwanted spaces.

Anybody know what controls this? I'd like to eliminate all the Gray spaces, except where the page content will appear.

:lamo:

I think that if you go in to Admin/Configuration/Layout settings and set Define Breadcrumb Status to 0, the space next to "home" will go away. Of course, so will "home".

It's not my intention to get rid of the breadcrumb menu. :blink:

If I remember correctly the space above the left column is set by margin in the stylesheet. View source or inspect element to see which ID or class it is.

Depending on the template you are reworking the other spaces may be taken care of by removing <br class="clearBoth" /> from those specific areas.

/includes/templates/CUSTOM_TEMPLATE/common/tpl_header.php

Removing <br class="clearBoth" /> can sometimes have undesirable effects so keep checking on your changes and take note of where you made your change in case you need to restore.

Sometimes changing <br class="clearBoth" /> to <div class="clearBoth"></div> will help with the spaces.

The stock /classic/ stylesheet rule that gives the sidebox spacing is.leftBoxContainer, .rightBoxContainer { margin: 0em; border: 1px solid #9a9a9a; border-bottom: 5px solid #336633; margin-top: 1.5em; }Eliminate the margin-top if you want all sideboxes to touch, or add a new rule for whatever sidebox is at the top of the column if you only want to close the top gap:```
#categories {margin-top: 0;}

Ok I copied tpl_header.php to 'common' in my template folder. I found both instances of <br class="clearBoth" />

I commented out both, but the one between headerWrapper and logoWrapper messed up the layout:

Commenting out the second instance achieved the desired result and now there's no space between logoHeader and the Categories bar.

I corrected the first instance and I'm part way to my goal.

I'll check the margins in the CSS next. :bigups:

Ok found the Margins in the CSS and corrected more of the problem.

There are still a few outstanding spaces left:

Anybody know where the code that controls these Gray areas is? :huh:

It's a lot easier to advise correctly for your site when we can see it live.

There may be padding or possibly margins in various locations.

Ok i found the navColumnOneWrapper and navTwoColumnWrapper margins and set them to 0em. :clap:

BUT, I still havent solved the problem in the title of this thread. :dontgetit

Can anyone help me get rid of this useless empty space?

:lamo:

that may be the #navMainWrapper top margin.

No way to tell until we can see it live...
Screenshots are useless here.

buildingblocks:

that may be the #navMainWrapper top margin.

Nope :no:

Hell Guapo:

Nope :no:

well, sorry.....I said #navMainWrapper, top margin

and should have said #navMainWrapper top padding.

example: red denotes top padding

#navMainWrapper {padding:10px 5px 10px 5px;}

may not look exactly like mine

If that doesn't do it then.....a link...

Well. I fixed the problem with a negative value margin for logoWrapper:

My CSS is as follows:

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

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
height:150px;
margin-top: -10px;
}

But it still doesnt explain where the extra 10px gap is coming from. :lamo:

I'd like to do it without having to use a negative value for margin... Any ideas? :dontgetit

losteras.com/store

Get rid of your -10px margin and add this line to your stylesheet.

#headerWrapper {background-color: #F90;}

The 'gap' is still there, but now its the same colour as your logo wrapper - so it doesnt matter.

try bottom padding for #navMainWrapper

dgent:

Get rid of your -10px margin and add this line to your stylesheet.

#headerWrapper {background-color: #F90;}

The 'gap' is still there, but now its the same colour as your logo wrapper - so it doesnt matter.

I removed the -10px and tried what you said.

Advice appreciated but the 'hidden' gap will then cause a 10px unevenness above the logoWrapper. I would be forced to use a negative padding to correct the new issue. Plus, if I decide to change the color of logoWrapper, I'd be forced to change color in two places. :unsure:

For information, you can't do negative padding, only negative margins.

I looked at your site and was not able to find a cause for the gap... really strange. The fixes that should have helped, didn't (except for the negative margin).

buildingblocks:

try bottom padding for #navMainWrapper

Set padding-bottom to -0em and it caused the space under Home and Login to collapse within the DIV and had no effect on the Gray Mystery Space...

For the moment I commented out the -10px fix.

**Need a ZenCart Guru to solve this please. **:frusty:

gjh42:

For information, you can't do negative padding, only negative margins.

I looked at your site and was not able to find a cause for the gap... really strange. The fixes that should have helped, didn't (except for the negative margin).

I've look at sites posted here that had only slight variation from the standard install of Zencart and this mystery gap happens on those sites as well. :frusty: