Height of top category wrapper

It seems that the white wrapper around the category nav bar at the top, just below the header image is too tall, and cuts into the image of my header. I installed with 'test data' which had a gazillion categories and needed that space, but I only have 1 row of categories.

I tried separating the #navCatTabsWrapper, from the group, and changing the height: 1% to .5%... I also tried commenting out the background-image /tile_back.gif, in that separated statement, but it seems to ignore it. Below is the cut and paste of how this section reads default. (Am I looking in the right place?)

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

Any suggestions on how I can isolate that one area and make it 'shorter'

I haven't changed my DNS yet, so the url is: http://174.132.165.94/~kreweofc/store/

Any help is appreciated,
Dana

What browser are you seeing this in?

height: 1%; - Is not a real height but one for "stupid" IE and should not be altered
Try removing the padding/set to "0" in this statement

#navCatTabsWrapper {
	margin: 0em;
	background-color: #abbbd3;
/*	background-image: url(../images/tile_back.gif); */
	padding: 0em;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	}

Thanks for the reply... I'm using IE7, but did check it in Firefox and Opera. My solution did 'scrunch' the catnavbar into the breadcrumb. I tried your solution and maybe it did reduce the height of the cat navbar wrapper slightly, but barely enough to notice.

Re-thinking this .. maybe 'too much white space' is not a bad thing (talking about the padding around the wrapper), so maybe my problem, then, is ...

...that there needs to be some 'separation' between the header image and this wrapper. What I'm trying to tweak is to get a little more of the bottom of the images in the header to show. It's as if this navbar wrapper needs to move down a bit. You can see the image of the Jester... I want to at least see his lips (for example). If you look at the original ZC header image (the jpg, not as displayed), it has a shadow line in the lower portion of that image, and in my replacement header, I simply layered the photos across the old header (above the shadow line), so I could keep the same dimensions of the original header.

I went back and looked at the header on the original template, and now I see that the cat navbar on that template overlaps the header image, there also. You can see this by looking at the original header image. Here's a link to it, so you can see just the image file... notice the tiny shadow line at the bottom, you cannot see this in either template:

http://174.132.165.94/~kreweofc/store/includes/templates/koc/images/header_bg-original.jpg

this is my replacement header image:

http://174.132.165.94/~kreweofc/store/includes/templates/koc/images/header_bg.jpg

How do I separate the header image, from the cat navbar wrapper, so the entire height of the header image will display ?? (is this more HTML code rather than CSS??)

(sorry for being long winded)...

thanks,
Dana

To display your image full height of 110px edit this in your sylyesheet to 110px

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	height: 75px;
	}

Perfecto!

Well, I guess I was looking so hard in the details that I ignored the obvious. Works perfectly. Thanks for your help!