Can't get logo div and horizontal menu div to touch

Hi guys. I'm trying my hand at creating my own template. I'm using the Classic Green template as the basis for my changes. Just changing one thing at a time until it looks how I want it. Right now I've gotten stuck. For some reason there's a big space between the part where my logo goes, and where the horizontal menu for EZ Pages go. I don't want a gap there, but can't seem to find any CSS that might be causing it.

You can see the page here: http://www.chuckwa.com/store/

Right now there's a gap between the red bottom of my logo, and the black "border" around the EZ Pages navigation.

However I want there to be no gap, like this:

Any idea where that extra margin/padding/whatever is coming from and how to remove it? It shows up in both Mozilla and IE.

Try adding a height to this that is highlighted in red to your stylesheet

#logoWrapper{
	background-image: url(../images/header_background.gif);
	background-repeat: repeat-x;
	margin: 0px;
        height: 275px;
	}

That solved it, thanks!

Any idea why the DIV was too big without it? I'm still learning CSS and still figuring out how it all works.

Whoops, I might have spoken too soon. Adding the height did not solve the issue at all in IE.

In Mozilla, it looks good unless my browser window is open wider than the logo.gif, then I have a new problem:

Right now, I'm thinking it has something to do with the <br> that acts as a float clear in the HTML. If I change the default font size in Header DIV, it changes the size of the gap.

Anyone know which file I would need to edit to remove or modify that <BR> that gets inserted after the close of the logo DIV?

Ok, I have confirmed it is the

<br class="clearBoth" />

that appears after the logo that is causing this problem.

I created a work around using CSS, that appears to solve the problem in IE, and almost solves the problem in Mozilla (depending on resolution when page is rendered).

I would rather edit the file that inserts the BR into the document, that should allow me to implement a 100% fix. Any idea which file to edit?

header.php is not the right file. I most likely need the file that calls this file.

Ok. Problem solved.

The file I need to edit is \common\tpl_header.php

Once copying that to my custom template folder and editing it to comment out the clears, I've been able to get everything to display properly in Mozilla with no funny work arounds. One small work around to get everything 100% in IE, but even without that it works much better than before.

I may have missed this in an earliler thread. I am having the same problem with space between header & categories to match.

When going to \common\tpl_header.php what edit did you do to it.

Currently, mine looks like <br class="clearBoth" />

I removed that entirely.

Careful which one you edit / remove.

The one you're after is just ABOVE the:-

... around lines 90 / 94

<br class="clearBoth" />
<!--eof-branding display-->

... and I don't usually DELETE lines - I rather comment them out, so later, if I need to restore stuff, I know where my edits are:-

<!--WEBMASTER EDIT BEGIN<br class="clearBoth" />WEBMASTER EDIT END-->
<!--eof-branding display-->

Thanks Fairestcape for a much more detailed response. If you look at the source code on my page, you'll see I did like Fairestcape and mearly commented the lines out.

For my template I didn't need a clear there, and there are alternate ways of doing a clear other than a BR.

Thank you! It works great!

Good stuff!

Remember, the <br....> at this step is there to accommodate a banner (if you choose to use one), so that's why it's better to "comment out" the code.

Later, if you decide to invoke a banner, then you just uncomment the line...

Another hint about why to use "commenting in and out".

If you are very disciplined about using HTML, CSS and PHP comment tags against ALL EDITS you make to the core files - coupled of course with usage of the template over-ride system - then when you come to UPGRADE your ZC to a newer version, finding your edits is easy!

To establish a list of all instances where I have edited core code, I use the Developer Tool Kit and do a global search for "WEBMASTER EDIT".

... I now have a COMPLETE list of all my edited files, and this helps enormously in the upgrade processes. :cool:

Hey Chuckwa, I like your website ! but may I ask you how did you manage to have a multi images for the same product on your webstore ? Is it an addon ? or what ? !