Remove space below header

I am using ZenCart v1.3.0.1. and I am having a problem with a space being left below the header.

I am creating a custom template, based on the default template using overrides. I have looked through the style sheet, the tpl_header.php, turned off category tabs, but just can't figure out what I need to adjust to get ride of the space.

You can view the site here http://www.xtremeliners.com/dealer/ any help would be greatly appreciated.

Just a quick glance, but something is causing your #headerWrapper div to be 29px higher than the image.

Any ideas where I would begin to look for this. I did a quick search using the developers tool kit and I could only find one file "tpl_header.php" that contains "#headerWrapper". It is also shows up in one place in the CSS style sheet.

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

There is also another bit in the CSS for "#logoWrapper"

#logoWrapper {
	width:770px;
	height:204px;
	background-color: #ffffff;
	}

I just don't know where else to look. Any more help would be greatly appreciated.

If you don't have a copy of FireFox with the Web Developer's Tool Kit, best get yourself one. You WILL need it.

Let's see....
Extra </a> in your logoWrapper on line 42 - leftover in php file edit no doubt.
You have two BODY tags -- one at each end of the stylesheet.
You tell navMainWrapper to "walk and talk" starting at line 2 and turn it off at the end of the stylesheet.

Let's start with those and see what happens.

I have tried to fix the problems but I do not see the two body tags or the navMainWrapper problem mentioned in the previous post. I have posted my style sheet and was hoping someone could point out the specific problems. Thank you in advance.

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #000000;
	background-color: #ffffff;
	}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
	color: #0061af;
	text-decoration: none;
	}
 
a:visited {
	color: #0061af;
	text-decoration: none;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
	color: #028eff;
	}

a:active {
	color: #028eff;
	}

h1 {
	font-size: 1.5em;
	}

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.3em;
	}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
	font-size: 1.1em;
	}

.biggerText {
	font-size: 1.2em;
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0.3em;
	}

CODE {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 1em;
	}

FORM, SELECT, INPUT {
	display: inline;
	font-size: 1em;
	margin: 0.1em;
	}

TEXTAREA {
	float: left;
	margin: auto;
	display: block;
	width: 95%;
	}

input:focus, select:focus, textarea:focus {
	background: #F0F8FF;
	}

FIELDSET {
	padding: 0.5em;
	margin: 0.5em 0em;
	border: 1px solid #cccccc;
	}

LEGEND {
	font-weight: bold;
	padding: 0.3em;
	}

LABEL, h4.optionName {
	line-height: 1.5em;
	padding: 0.2em;
	}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
	margin: 0.5em 0.3em;
	}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}
	
#logo {
	margin: 0px;
}

LABEL.inputLabel {
	width: 11em;
	float: left;
	}

LABEL.inputLabelPayment {
	width: 15em;
	float: left;
	}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {
	width: 12em;
	float: left;
	}

P, ADDRESS {
	padding: 0.5em;
	}

ADDRESS {
	font-style: normal;
	}

.clearBoth {
	clear: both;
	}

HR {
	height: 1px;
	margin-top: 0.5em;
	border: none;
	border-bottom: 1px solid #9a9a9a;
	}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	padding: 0.2em;
	border: 1px solid #000000;
	}

.messageStackWarning, .messageStackError {
	background-color: #ff0000;
	color: #ffffff;
	}

.messageStackSuccess {
	background-color: #99FF99;
	color: #000000;
	}

.messageStackCaution {
	background-color: #FFFF66;
	color: #000000;
	}

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #ffffff;
	text-align: left;
	width: 770px;
	vertical-align: top;
	}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

#logoWrapper {
	width:770px;
	height:204px;
	background-color: #ffffff;
	}

#navColumnOneWrapper, #navColumnTwoWrapper {
	margin: auto;
	} 

#mainWrapper {
	margin: 0;
	} 

#tagline {
	padding-top:0px;
	color:#000000;
	font-size: 2em;
	text-align : left;
	vertical-align: middle;
	}

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
	}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
	margin: 0;
	width: 47%;
	}

.wrapperAttribsOptions {
	margin: 0.3em 0em;
	}

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
	margin: 0em;
	font-size: 0.9em;
	}
.navNextPrevList {
	display: inline;
	white-space: nowrap;
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	}

#navSuppWrapper {
	margin: 0em;
	background-color: #ffffff;
	background-image:url(../images/xmain_11.jpg);
	font-weight: bold;
	color: #ffffff;
	height: 78px;
	width: 100%;
	}

#navMainWrapper {
	margin: 0em;
	background-color: #ffffff;
	background-image:url(../images/xmain_nav.jpg);
	font-weight: bold;
	color: #ffffff;
	height: 17px;
	width: 100%;
	}

#navCatTabsWrapper {
	margin: 0em;
	background-color: #ffffff;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

#navMain ul, #navSupp ul, #navCatTabs ul  {
	margin: 0;
	padding:  0em 0em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
	}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	white-space: nowrap;
	}

#navMain ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #ffffff;
	}

#navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #0061af;
	}

#navEZPagesTOCWrapper {
	font-weight: bold;
	float: right;
	height: 1%;
	border: 1px solid #000000;
	}

#navEZPagesTOC ul {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	line-height: 1.5em;
	}

#navEZPagesTOC ul li {
	white-space: nowrap;
	}

#navEZPagesTOC ul li a {
	padding: 0em 0.5em;
	margin: 0;
	}

#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
	margin: 0.5em;
	}

#navBreadCrumb {
	margin-top:0px;
	background-image:url(../images/centercolumn_capsule.gif);
	background-repeat:no-repeat;
	background-position:center;
	font-size: 1em;
	font-weight: bold;
	padding: 0.5em 0 0.5em 1.5em;
	}

#navEZPagesTop {
	background-image:url(../images/fullwidth_capsule.gif);
	background-repeat:no-repeat;
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	padding: 0.5em 0 0.5em 1.5em;
	}

#navColumnOne, #navColumnTwo {
	background-color: #ffffff;
	background-image:url(../images/xmain_08.jpg);
	}


/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
	vertical-align: top;
	}

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
	/*font-size: 1.4em;*/
	padding: 0.5em;
	}

.alert {
	color: #FF0000;
	margin-left: 0.5em;
	}
.advisory {}
.important {
	font-weight: bold;
	}
.notice {}
.rating{}
.gvBal {
	float: right;
	}
.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
	padding: 0.8em;
	}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
	font-size: 0.9em;
	}

/*Shopping Cart Display*/
#cartAdd {
	float: right;
	text-align: center;
	margin: 1em;
	border: 1px solid #000000;
	padding: 1em;
	}

.tableHeading TH {
	border-bottom: 1px solid #cccccc;
	}

.tableHeading, #cartSubTotal {
	background-color: #e9e9e9;
	 }

#cartSubTotal {
	border-top: 1px solid #cccccc;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	padding-right: 2.5em;
	}

.tableRow, .tableHeading, #cartSubTotal {
	height: 2.2em;
	}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay   {
	padding: 0.5em 0em;
	}

.cartUnitDisplay, .cartTotalDisplay {
	text-align: right;
	padding-right: 0.2em;
	}

#scUpdateQuantity {
	width: 2em;
	}

.cartQuantity {
	width: 4.7em;
	}

.cartNewItem {
	color: #33CC33;
	position: relative;  /*do not remove-fixes stupid IEbug*/
	}

.cartOldItem {
	color: #660099;
	position: relative;   /*do not remove-fixes stupid IEbug*/
	}

.cartBoxTotal {
	text-align: right;
	font-weight: bold;
	}

.cartRemoveItemDisplay {
	width: 3.5em;
	}

#cartAttribsList {
	margin-left: 1em;
	}

#mediaManager {
width: 50%; 
margin: 0.2em;
padding: 0.5em;
}
.normalprice, .productSpecialPriceSale {
	text-decoration: line-through;
	}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
	color: #ff0000;
	}

#cartBoxListWrapper ul, #ezPageBoxList ul {
	list-style-type: none;
	}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
	margin: 0;
	padding: 0.2em 0em;
	} 

.totalBox {
	width: 5.5em;
	text-align: right;
	padding: 0.2em;
	}

.lineTitle, .amount {
	text-align: right;
	padding: 0.2em;
	}

.amount {
	width: 5.5em;
	}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
	margin: 0em 1em 1em 0em ;
	}

.categoryIcon {}
#cartImage {
	margin: 0.5em 1em;
	}

/*Attributes*/
.attribImg {
	width: 20%;
	margin: 0.3em 0em;
}

.attributesComments {}

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

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 1.4em;
	text-decoration: underline;
	color: #333333;
    padding-top: 1.0em;
	}
	
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover{
	color: #666666;
	text-decoration: underline;
	} 

.leftBoxHeading, .rightBoxHeading {
	margin: 0em;
    height: 32px;
	background-image:url(../images/xmain_02.jpg);
	background-repeat:no-repeat;
	padding: 0em 0em;
	}

.centerBoxHeading {
	margin: 0em;
	background-image:url(../images/title_bg.gif);
	background-repeat:no-repeat;
	padding: 0.5em 0.2em;
	}

.leftBoxContainer, .rightBoxContainer {
	background-image:url(../images/xmain_05.jpg);
	background-repeat:repeat-y;
	margin-top: 0em;
	}

.sideBoxContent {
	background-image:url(../images/xmain_07.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 1.3em;
	padding-top: 0em;
	padding-left: 1.7em;
	padding-bottom: 3.0em;
	}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
	text-align: center;
	}

#bestsellers .wrapper {
	margin: 0em 0em 0em 1.5em;
	}

#bestsellers ol {
	padding: 0;
	margin-left: 1.1em;
	}

#bestsellers li {
	padding: 0;
	margin: 0.3em 0em 0.3em 0em;
	}

#bannerboxHeading {
	background-color: #0000CC;
}

#upProductsHeading {
	text-align: left;
	}

#upDateHeading {
	text-align: right;
	}

/*misc*/
.back {
	float: left;
	}

.forward {
	float: right;
	}

.bold {
	font-weight: bold;
	}

.rowOdd {
	background-color: #E8E8E8;
	height: 1.5em;
	vertical-align: top;
	}

.rowEven {
	background-color: #F0F0F0;
	height: 1.5em;
	vertical-align: top;
	}

CAPTION {
	/*display: none;*/
	}

#myAccountGen li, #myAccountNotify li {
	margin: 0;
	} 

.accountTotalDisplay, .accountTaxDisplay {
	width: 20%;
	text-align: right;
	/*vertical-align: top*/
	}

.accountQuantityDisplay {
	width: 10%;
	vertical-align: top
	}

TR.tableHeading {
	background-color: #cacaca;
	height: 2em;
	}

#siteMapList {
	width: 90%;
	float: right;
	}

.ratingRow {
	margin: 1em 0em 1.5em 0em;
	}

LABEL#textAreaReviews {
	font-weight: normal;
	margin: 1em 0em;
	}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {
	background-color: #ffffff;
	}

Please don't post your entire stylesheet. It just clutters up the forum and it's much easier anyway for us to use the web developer tools (such as the one recommended by dbltoe) to see the CSS in the context of your site.

Anyway, to your problem. There are several causes of this type of whitespace. Where it is visible in both Firefox and Internet Explorer, such as here, and you have an element that spans your mainWrapper, it is usually safe and effective to go to your tpl_header.php file and remove the > <br class="clearBoth" />line that you will find immediately above the <!--eof-branding display--> comment to resolve the problem.

Sorry about posting my style sheet and thank you both for your help.

Removing the sugested line from the tpl_header.php has solved the problem in FireFox but there is still a small whitespace showing in explorer it looks to be 1 or 2 pixels much smaller than before.

Could it be the problems that dbltoe pointed out in the style sheet? If so what do I need to edit to resolve the errors. Thanks again.

Since you've done the clear both fix, Firefox is giving you a clean bill of health. Checking the stylesheet with TopStylePro doesn't show anything in that area that IE should have a fit over.

Kuroi?

dbltoe:

Since you've done the clear both fix, Firefox is giving you a clean bill of health. Checking the stylesheet with TopStylePro doesn't show anything in that area that IE should have a fit over.Indeed it doesn't, but there is something that Internet Explorer should but doesn't like - an empty div with an ID. In this case taglineWrapper. For some reason, even though its empty, IE gives this type of div some physical space, so I recommend forcing non-display by adding the following to your stylesheet> #taglineWrapper {display:none}

I added the code you suggested to the style sheet but I am still getting the white space??

Persistant little bugger this one. I'm afraid that I think you will need to hack to clean him out.

I recommend taking out the #taglineWrapper styling (it won't do any harm, but why clutter up your CSS) and instead put in> #headerWrapper {_margin-bottom:-2px}The underscore is very important as this means that the adjustment will only be recognised by IE where you have the problem and won't mess up your display in other browsers.

This hack is known to work in all Windows IE browsers up to version 6, but not MAC IE (which has now been abandoned even by Microsoft). I don't know whether IE7 will act like its bretheren, but I also rather hope you wouldn't have the original bug in IE7 either!

That did it!!! Thanks a lot kuroi. It looks perfect in internet explorer and firefox!!!

Empire:

That did it!!! Thanks a lot kuroi. It looks perfect in internet explorer and firefox!!!That's great news. You may want to fix the link in your sig so that other people can admire it too :smile:

Hello,

I had the same problem so prior to playing with the stylesheet.css, I tried a copy and paste of "empire's" stylesheet and replaced mine. The site appeared completely "bizarre". I therefore went back to my previous version of stylesheet but the site is still displayed wrongly.
Can anybody help ? How come the site didn't go back to it's original version after replacement of the "wrong" css ?

Pierre

Something I did wrong... SORRY
I got an older backup and replaced the stylesheet. Works now.
Can't delete my message, else I would have (admin if you want to deleted those two messages of mine, don't hesitate).
Pierre

I was having the same problem. After reading and trying everything else, I decreased #logoWrapper (in css) height until it looked right. I'm using Future Zen template.

i just downloaded the firefox web developer addin and am using to edit the css and all i can say is WOW!!!!

where has this tool been all my life!!!

you guys should make it a sticky!!!!

and an announcement...

im happily editing away now and making all sorts iof changes first time.

Tim

Another convert!

Everything's easy with the right tools.

Might want to get firebug as well. You'll find it very helpful with the html problems.

I've been fooling with a template (in various versions) and haven't been able to get rid of the white space in some of them, but following the tips in this thread, I did eliminate it from one version. Thanks for all the help! :thumbsup:

Mary Ellen,
You may correct the others with a fix to your .leftBoxContainer call in the stylesheet.css. > margin-top: .0m; should probably be> margin-top: 0em;