Gap in container

My page, http://www.itplace.biz/HealthDivine/index.php?main_page=index&cPath=4

Has a gap after the container header on everypage, Im lost as to where to look and fix it, I thought it was css related, but cant find something that would cause it, :( im wonder if it its the tpl_header but again, stairing at the code for a week has made be unable to rectify the issue,

Can someone point me in the right direction, I would greatly apprecaite it
Thanks
aero

Try removing the padding in .centerColumn in the stylesheet.

You have your center column header inside the navBreadcrumb div, which may be causing a problem.

You can correct the problem by changing about four things in the stylesheet and adding a couple more BUT...

As stevesh, pointed out, you are going to have problems down the line with the code inside the breadcrumb.

AND... you are setting this up in the classic directory. Take a deep breath, backup, investigate using a custom override directory, and get a copy of the firebug extension for firefox.

Using a custom directory will make future upgrades easy. Not using it will be a nightmare.

You should probably be doing all this inside the indexCategories div.

You don't need a width for the top image, the core needs to be a specified width (628), the <br /> needs to go in the HeadingText (which should be headingText), and (right now) the 10 px padding-top in navBreadCrumb is adding the space you see.

Still, I would caution you NOT to fix the problem this way but start with an override and use the indexCategories div.

#navBreadCrumb {stylesheet.css (line 324)
background-image:url(../images/ContainerHeader.jpg);
background-repeat:no-repeat;
height:35px;
padding-top:0;
text-align:center;
width:632px;
}

Wicked,
That helped
Much appreciated

Using> #core {

border-color:#006600;
border-style:none solid;
border-width:medium 1px;
margin:0;
padding:0;
width:628px;
}also helps the look in firefox.

Just remember that you are building something that will NOT upgrade well.

all but the first page, is fixed
http://www.itplace.biz/HealthDivine/index.php still has a gap

this margin is pushing things apart;

.centerBoxWrapper {
margin:0;
}

Corrected that main page still had the gap, Im sooo new to Css its scaring me ;)

Sorry i mean the gap is still present,
http://www.itplace.biz/HealthDivine/index.php

i dont see this change in your stylesheet;
.centerBoxWrapper {
margin:0;
}

that would fix the gap...
get firefox 3 and the web developer extension... its a big big help for editing CSS...

i made the changes, still no effect

.attributesComments {}

/list box contents/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

.centerBoxWrapper {
margin:0;
}

h2.centerBoxHeading {
font-size: 1.3em;
color: #ffffff;
}

/sideboxes/
.columnLeft {}

i installed firebug just not sure how to use it to fix my issue, anyone have any more insight that might cure my gap issue
Thanks for your time.

I noticed yesterday it was fixed.... although the right hand side border is a little off..

s_t_e_v_e:

I noticed yesterday it was fixed.... although the right hand side border is a little off..

I believe yesterday the all products was fixed, but the front container always has the gap :(

Im not sure if its css related any more, i really have no clue as to where to check next.

The gap underneath the header text is not there in firefox 3, but the right hand side border is slightly offset. Everything looks good in my Internet explorer 7...

The categories side box is a little lower than the center box..

I like the look of your site... Its coming along great!

s_t_e_v_e:

The gap underneath the header text is not there in firefox 3, but the right hand side border is slightly offset. Everything looks good in my Internet explorer 7...

The categories side box is a little lower than the center box..

I like the look of your site... Its coming along great!

im using FF3, and i still see a cap under home

[IMG]http://www.itplace.biz/HealthDivine/gap.jpg[/IMG

I appreciate your compliment on the site, Its been a very long time in the making ;)

i see you use firebug... open it up and click Inspect and highlight the area with the gap... and look at the CSS that firebug shows you..

I still do not see this gap... (i have cleared my browser cache too)

someone else will have to make a comment based upon their browser to help....

If the gaps indicated by the arrows here are what you mean:

http://www.stevesh.com/test/gaps.jpg

You aren't going to be able to fix that until you get the center box header image out of the navBreadCrumbs element.

You need to remove the background image from here:

#navBreadCrumb {
background-image: url(../images/ContainerHeader.jpg);
background-repeat:no-repeat;
padding-top:10px;
height: 35px;
padding-top:0;
width:632px;
}

and then add the image to centerBoxHeading after you split it away from the left and right:

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
padding: 0.5em 0.2em;
}

stevesh:

If the gaps indicated by the arrows here are what you mean:

http://www.stevesh.com/test/gaps.jpg

You aren't going to be able to fix that until you get the center box header image out of the navBreadCrumbs element.

You need to remove the background image from here:

#navBreadCrumb {
background-image: url(../images/ContainerHeader.jpg);
background-repeat:no-repeat;
padding-top:10px;
height: 35px;
padding-top:0;
width:632px;
}

and then add the image to centerBoxHeading after you split it away from the left and right:

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
padding: 0.5em 0.2em;
}

When you say split away,

do you mean

.leftBoxHeading, .rightBoxHeading {
margin: 0em;
padding: 0.5em 0.2em;
}

.centerBoxHeading {
background-image: url(../images/ContainerHeader.jpg);
background-repeat:no-repeat;
}

When i try this the picture wont show up