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

[abcisme]

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

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

Thanks in advance!!

[abcisme]

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

[Sketchy]

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.

[abcisme]

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

[Sketchy]

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.

[abcisme]

Well, we're halfway there! 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..

Thank you so much for your help!

[Sketchy]

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.

[abcisme]

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?

[Sketchy]

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.

[abcisme]

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