Header alignment issue in IE, Fine in FF - suggestions, please?

I am hoping someone here can help me figure out what is causing this alignment issue in FF. I have tried everything I could think of in my stylesheet with no success. There is some padding around my navbar and my header that should not be there. It looks correct in Firefox, but in IE6 it is off to the left about 1px and there is padding between the header logo and the navbar..

Any ideas? I feel like I'm losing my mind.. LOL :blink:

http://www.catskillcakecompany.com/zencart/

Thanks in advance!!

I'm still stuck on this.. If anyone can help, I would REALLY appreciate it!

Here's my stylesheet:

body {
margin: auto;
font-family: Arial, Verdana, Sans-Serif;
font-size: 70%;
background-image: url(../images/bg2.gif);
background-repeat: repeat-y;
background-position: center;
text-align: center;
}

a img {border: none; }

a {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

.leftBoxContainer a, .rightBoxContainer a {
font-size: 12px;

}

.leftBoxContainer a:hover, .rightBoxContainer a:hover {
}

h1 {
font-size: 1.4em;
}

h2 {
font-size: 1.3em;
}

h3 {
font-size: 1.2em;
}

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

.biggerText {
font-size: 1.1em;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Trebuchet MS', Verdana, Sans-Serif;
font-size: 150%;
font-weight: normal;
}

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

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

input {
border: 1px solid;
}
input[type="hidden"] {
display:none;
}

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

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

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

#logo {
margin-top: 15px;
float: right;
padding-right: 20px;
visibility: hidden;
}

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

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

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

ADDRESS {
padding: 0.5em;
}

ADDRESS {
font-style: normal;
}

.clearBoth {
clear: both;
}

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

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

/wrappers - page or section containers/
#mainWrapper {
text-align: left;
width: 810px;
vertical-align: top;
}

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

#logoWrapper {
width:810px;
height:175px;
margin:0px;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}

#navColumnOneWrapper, #navColumnTwoWrapper {
padding-left: 7px;
padding-right: 7px;
padding-top: 0px;
padding-bottom: 0px;
margin: auto;
}

#tagline {
}

#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;
position:relative;
top:0.5em;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper, #navSuppWrapper {
margin: 0em;
font-weight: bold;
width: 100%;
}

#navCatTabsWrapper {
height:0px; }

#navCatTabsWrapper {
border-bottom:1px solid;
}

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

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

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0.25em 0.25em;
margin: 0;
}

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

#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:1.5em 1.5em 0em;
font-size: 1.0em;
font-weight: bold;
padding: 0.3em 1.5em;
}

#navEZPagesTop {
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em 0 0.5em 1.5em;
}

#navColumnOne, #navColumnTwo {
}

/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.3em;
padding: 0.25em;
margin-bottom: 20px;
font-family: 'Microsoft Sans Serif', Verdana, Sans-Serif;
}

.alert {
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
margin:0px 0px;
padding-left: 0.25em;
padding-right: 0.25em;
padding-top:1.5em;
margin:0em 0em;
}

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

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

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

.tableHeading, #cartSubTotal {

}

#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 {
position: relative; /do not remove-fixes stupid IEbug/
}

.cartOldItem {
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;
}

#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.rightBoxHeading {
font-family: Arial;
font-weight: bold;
}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover{
text-decoration: none;
}

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

.centerBoxHeading {
padding: 0.2em 0.2em;
}

.leftBoxContainer {
border: 1px solid;
margin-top: 1.5em;
margin-left: 0.2em;
margin-right: 0.2em;
}

.rightBoxContainer {
border: 1px solid;
margin-top: 1.5em;
margin-left: 0.2em;
margin-right: 0.2em;
}

.sideBoxContent {
padding: 0.35em;
}

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

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

/misc/
.back {
float: left;
}

.forward {
float: right;
}

.bold {
font-weight: bold;
}

.rowOdd {
height: 1.5em;
vertical-align: top;
}

.rowEven {
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 {
height: 2em;
}

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

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

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

.tabTable {
margin: 1em 0em;
}
.tabTable td {
padding: 0.5em 0em;
}

.navNextPrevWrapper {
margin-bottom:2em;
}

#productDescription {
clear:both;
}

table #orderHistoryDetailedOrder, table #orderHistoryStatus {
padding-top:1.5em;
}

#cartContentsDisplay tr,
#accountHistInfo tr {
vertical-align:top;
}

Okay.. when using the former mini-ZC logo as an actual store banner(not that you had done that) or float the logo div right. The tagline wrapper always gets crushed and IE is not shy to show that.

In your above code from the current template's stylesheet.css, find:

#tagline {
}

Change it to:

#tagline { display: none
}

As for the tad margin on the right perimeter.. for a test, try removing 2px off your two sets of side column widths in admin.

Thanks for your response! Unfortunately, that didn't seem to do anything.. :no:

Rawr.. apparently, that IE dev bar is a joke. Deciphering problems in IE is a real headache, because nothing seems to work on it.

Okay, you may have to use a negative margin-top value for #navMainWrapper to cinch down that space. That should take care of that.

I still can't find what's at fault for that 1px right problem. :wacko:

Well, we're halfway there! :P The negative margin-top value worked - it pulled the navbar up 3px in Firefox, but it still looks fine.

Now to figure out why the darn heading is off by 1px.. :frusty:

Thank you so much for your help!

Whoah.. I see how much FF gobbled up. Hmm.. that still bothers me why the space in the first place. I didn't look to see if there was an extra div tag in the header.

It never occurred to me, until now. Your mainWrapper is set at 810px wide.. the exact same size as the background image in the body. IE likes to interpret images oddly. So, how about trying to increase the mainWrapper width by small increments.. say +2px to start.

Ok, so this is probably not the RIGHT way to fix it, but it worked! I found a trick that makes it so that only IE will see a certain CSS value. If you put an underscore before the name it will only be seen by IE.

SO I did this:

#navMainWrapper, #navSuppWrapper {
_margin-top: -3px;
_margin-left: 1px;
_margin-right: 0px;
font-weight: bold;
width: 100%;
}

#logoWrapper {
width:810px;
height:175px;
margin:0px;
_margin-left:1px;
}

Works in my browser - does it look ok to you?

I guess those hacks don't work in IE7. The page is just the way it was in the beginning. :(

As far as the width adjustment goes, you should adjust the main wrapper and not the header. I can see a 1px extension all the way down the right side.

In the meantime, I'll keep pondering the header/nav gap problem.

grr. I was afraid of that.. sigh Thanks for your help - I really do appreciate it! I have been so frustrated with this!!

Unfortunately, I can't install IE7 because I don't have Service Pack 2 installed. (For some reason, when I install SP2 my video card stops working).. Yes, I need a new PC, but that's a whole other frustration.. LOL

Yeah, compatibility problems are the absolute worse thing ever. :censored:

I wish I could be more help, but I'm really stumped why the mainWrapper image is bumping off a pixel.

As for the header, I just realized that I have one of my old 1.3.5 templates installed with the reverse navbar.. the same as yours. So, I compared page sources and ours don't match.

On mine, the code starts out as mainWrapper-logoWrapper-taglineWrapper-headerWrapper-navMainWrapper.

Your's goes mainWrapper-headerWrapper-logoWrapper-taglineWrapper-navMainWrapper.

So, that may account for the header/nav space due to improper nesting in the tpl_header.php.

Nope.. I tried reordering to the way yours are.. No change.. I give up! BAHHHHH!

I may have gotten it!!

I used a conditional template for IE browsers, based on this thread:
http://www.zen-cart.com/forum/showthread.php?t=49391

Please tell me this worked for IE7!!!

Yikes. Unfortunately, all it did was switch sides.

I'll see what I can come up with by digging deeper yet.

Well that just sucks! :frusty: I am out of ideas myself... I'm about to throw in the towel and start back from scratch! :no:

Well I feel stupid - I just realized that I have IE7 on my laptop (I usually only use my desktop for working on this stuff).. LOL

So I made a separate stylesheet for IE6 and IE7 and now they are both passable.. There is still a TINY margin on each of the headers, but it's liveable until I can find an ultimate solution.

I'm going to keep fooling around and see what else I can find! Many thanks!!!

I always add this to every stylesheet before I get started:

*{padding:0;margin:0;}

This gets all my padding and margins that aren't defined set to 0, just so I don't have to deal with inconsistencies, and makes cross browser issues either. If a padding or margin is set to a specific value, then the above is ignored for that tag.

Anyway, don't know if that will help you, but it can't hurt.

Sketchy figured this out for me (THANK YOU SKETCHY!)

Two issues:

1. I moved the background image to the mainwrapper. For some reason, when the background image was in the body tag it was causing a misalignment.

2. I changed my tagline css from:

#tagline{
display:none; 
}

to:

#tagline{
font-size:0em;
}

It all lines up perfectly now! :clap:

Awww shucks, again.. you're very welcome! :D