Space Between Header and Navigation Bar

I am brand new to zen cart. I am having trouble customizing my site. I have added my custom header image no problem. I have moved the navigation bar below the header. The only problem is there is a white space between the header and navigation bar. I have tried some suggestions from the forums with no luck. Here is a link to my site to see the space.

https://www.greengosling.com

Thanks so much.

My first comment is that you have 2 stylesheets loading...

style2.css
layout.css

dupllicate definitions may clash and give you problems.

The white line between your logo and navbar is part of the image... either edit your picture of make the div 139 pixels high...

Thanks so much for the reply Steve. I am new to web site creation in general so thanks so much for the heads up on the 2 style sheets. In my previous post I did not give you the link to my shop but to my home page. There is a big space between header and navigation bar on my shop page.

https://www.greengosling.com/shop

I am going to try and figure out how to merge those 2 style sheets into one.

Thanks again.

First the links you have in the nav bar are white, and do not show on the white background;
stylesheet.css (line 384)

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
color:#FFFFFF;
margin:0;
padding:0 0.5em;
text-decoration:none;
white-space:nowrap;
}

Get yourself Firefox with the Firebug extension - the perfect combination for CSS troubleshooting.

The space below your header is caused by a br tag in your tpl_header.php template file.. You will need to edit the file and delete the line...

.....

Thanks so much again Steve.

I am having a little trouble with my navigation bar. If you look at my homepage (https://www.greengosling.com) you will see I have an arrow hover on the links on the navigation bar. I am having trouble duplicating that on the shop page (https://www.greengosling.com/shop).

Thanks for any information regarding this.

You have been a tremendous help so far.

Thanks again.

With Firefox and the addon Firebug; and with a little practice, you should be able to identify the areas in the stylesheet that need to be adjusted.

Edit your stylesheet.css

I would suggest removing all references to #navMain and then adding the CSS;

#navMain ul {background:#444 url(../images/bg-menu.png); color:#fff;border-bottom:1px solid #808080;border-top:1px solid #808080;list-style-type:none;margin:0;padding:0;width:100%;}
#navMain li {float:left;width:auto;}
#navMain a {color:#fff;display:block;padding:10px 5px;}
#navMain a:hover {background:#444 url(../images/bg-menu-hover.png) bottom; color:#fff;}

then adjust to suit...

I am driving myself crazy with the navigation bar. I still cannot seem to get rid of a space between my header image and navigation bar. Removing the "clearboth" definitely made the space smaller but it is still there. I have edited my image to get rid of the slight space at the bottom.
I am also having real difficulties with trying to get the navigation bar on my shop page to have the same hover arrow as my normal pages. I have tried matching things with Firebug. That is a really cool tool. What is wierd too now is that the navigation bar on my shop page looks different in IE and Firefox.

I'm having the same issue. It appears to be with the default install. There is a "break clearboth" between the logo area and the horizontal category area that generates the space. I just need help identifying what template file this is in so it can be overridden.

I'm having the same issue. It appears to be with the default install. There is a "break clearboth" between the logo area and the horizontal category area that generates the space. I just need help identifying what template file this is in so it can be overridden.

Mary, I just had the same issue and I removed the "<br>clearbroth" code from the file and it went away. the file that it is located in is the templates/template_defaults/common/tpl_header.php it took me a lot of searching to find the fix and that definitely got rid of my space.