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

[Chuckwa]

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.

[kobra]

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;
	}

[Chuckwa]

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.

[Chuckwa]

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:

[Chuckwa]

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?

[Chuckwa]

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.

[Chuckwa]

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.

[kburner]

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" />

[Chuckwa]

I removed that entirely.

[fairestcape]

Careful which one you edit / remove.

The one you're after is just ABOVE the:-
<!--eof-branding display-->
... 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-->