header problem in IE

[ZuluRose]

Hi, I've gotten several private messages regarding a header problem not displaying correctly in different browsers.

I was able to fix this issue, but I thought it was worth noting that if you make changes to the style sheet and comment the old data with <!-- xxx --> IE does not like those style of comments.

Ultimately, the stylesheet that comes with Zen Cart is not really XHTML strict based so you definately are not going to get the exact same results across browsers.

When I initially tried to get my style sheet validated using W3C's validator I found the following problems.

    * Line : 15 (Level : 2) Redefinition of margin-left : body
    * Line : 16 (Level : 2) Redefinition of margin-top : body
    * Line : 17 (Level : 2) Redefinition of margin-right : body
    * Line : 27 (Level : 1) You have no background-color with your color : #navEZPagesTOC ul li a
    * Line : 27 (Level : 1) You have no background-color with your color : #navEZPagesTOC ul li a
    * Line : 33 (Level : 1) You have no background-color with your color : a:visited
    * Line : 39 (Level : 1) You have no background-color with your color : #navCatTabs ul li a:hover
    * Line : 39 (Level : 1) You have no background-color with your color : #navCatTabs ul li a:hover
    * Line : 39 (Level : 1) You have no background-color with your color : #navCatTabs ul li a:hover
    * Line : 39 (Level : 1) You have no background-color with your color : #navCatTabs ul li a:hover
    * Line : 39 (Level : 1) You have no background-color with your color : #navCatTabs ul li a:hover
    * Line : 44 (Level : 1) You have no background-color with your color : a:active
    * Line : 57 (Level : 1) You have no background-color with your color : h3
    * Line : 91 (Level : 1) You have no color with your background-color : textarea:focus
    * Line : 91 (Level : 1) You have no color with your background-color : textarea:focus
    * Line : 91 (Level : 1) You have no color with your background-color : textarea:focus
    * Line : 115 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 115 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 115 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 115 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 115 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 115 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 176 (Level : 1) This property applies to block-level elements. : #mainWrapper
    * Line : 192 (Level : 1) You have no background-color with your color : #tagline
    * Line : 194 (Level : 1) This property applies to block-level elements. : #tagline
    * Line : 223 (Level : 1) This property applies to block-level elements. : .navNextPrevList
    * Line : 233 (Level : 1) You have no background-color with your color : #navCatTabsWrapper
    * Line : 233 (Level : 1) You have no background-color with your color : #navCatTabsWrapper
    * Line : 233 (Level : 1) You have no background-color with your color : #navCatTabsWrapper
    * Line : 236 (Level : 1) This property applies to block-level elements. : #navCatTabsWrapper
    * Line : 236 (Level : 1) This property applies to block-level elements. : #navCatTabsWrapper
    * Line : 236 (Level : 1) This property applies to block-level elements. : #navCatTabsWrapper
    * Line : 243 (Level : 1) This property applies to block-level elements. : #navCatTabs ul
    * Line : 243 (Level : 1) This property applies to block-level elements. : #navCatTabs ul
    * Line : 243 (Level : 1) This property applies to block-level elements. : #navCatTabs ul
    * Line : 265 (Level : 1) You have no background-color with your color : #navCatTabs ul li a
    * Line : 265 (Level : 1) You have no background-color with your color : #navCatTabs ul li a
    * Line : 265 (Level : 1) You have no background-color with your color : #navCatTabs ul li a
    * Line : 266 (Level : 1) This property applies to block-level elements. : #navCatTabs ul li a
    * Line : 266 (Level : 1) This property applies to block-level elements. : #navCatTabs ul li a
    * Line : 266 (Level : 1) This property applies to block-level elements. : #navCatTabs ul li a
    * Line : 284 (Level : 1) This property applies to block-level elements. : #navEZPagesTOC ul li
    * Line : 304 (Level : 1) You have no color with your background-color : #navEZPagesTop
    * Line : 334 (Level : 1) You have no background-color with your color : .alert
    * Line : 334 (Level : 1) Same colors for color and background-color in two contexts .messageStackError and .alert
    * Line : 334 (Level : 1) Same colors for color and background-color in two contexts .messageStackError and .alert
    * Line : 357 (Level : 1) This property applies to block-level elements. : #cartAdd
    * Line : 368 (Level : 1) You have no color with your background-color : #cartSubTotal
    * Line : 368 (Level : 1) You have no color with your background-color : #cartSubTotal
    * Line : 374 (Level : 1) This property applies to block-level elements. : #cartSubTotal
    * Line : 388 (Level : 1) This property applies to block-level elements. : .cartTotalDisplay
    * Line : 388 (Level : 1) This property applies to block-level elements. : .cartTotalDisplay
    * Line : 401 (Level : 1) You have no background-color with your color : .cartNewItem
    * Line : 406 (Level : 1) You have no background-color with your color : .cartOldItem
    * Line : 411 (Level : 1) This property applies to block-level elements. : .cartBoxTotal
    * Line : 434 (Level : 1) Same colors for color and background-color in two contexts .messageStackError and .productPriceDiscount
    * Line : 434 (Level : 1) Same colors for color and background-color in two contexts .messageStackError and .productPriceDiscount
    * Line : 434 (Level : 1) You have no background-color with your color : .productPriceDiscount
    * Line : 434 (Level : 1) Same colors for color and background-color in two contexts .messageStackError and .productPriceDiscount
    * Line : 434 (Level : 1) Same colors for color and background-color in two contexts .messageStackError and .productPriceDiscount
    * Line : 434 (Level : 1) Same colors for color and background-color in two contexts .messageStackError and .productPriceDiscount
    * Line : 434 (Level : 1) You have no background-color with your color : .productPriceDiscount
    * Line : 434 (Level : 1) Same colors for color and background-color in two contexts .messageStackError and .productPriceDiscount
    * Line : 434 (Level : 1) You have no background-color with your color : .productPriceDiscount
    * Line : 434 (Level : 1) Same colors for color and background-color in two contexts .messageStackError and .productPriceDiscount
    * Line : 434 (Level : 1) Same colors for color and background-color in two contexts .messageStackError and .productPriceDiscount
    * Line : 434 (Level : 1) You have no background-color with your color : .productPriceDiscount
    * Line : 457 (Level : 1) This property applies to block-level elements. : .totalBox
    * Line : 462 (Level : 1) This property applies to block-level elements. : .amount
    * Line : 462 (Level : 1) This property applies to block-level elements. : .amount
    * Line : 501 (Level : 1) You have no background-color with your color : h3.leftBoxHeading a
    * Line : 501 (Level : 1) You have no background-color with your color : h3.leftBoxHeading a
    * Line : 502 (Level : 1) This property applies to block-level elements. : h3.leftBoxHeading a
    * Line : 502 (Level : 1) This property applies to block-level elements. : h3.leftBoxHeading a
    * Line : 521 (Level : 1) You have no background-color with your color : h3.rightBoxHeading a
    * Line : 521 (Level : 1) You have no background-color with your color : h3.rightBoxHeading a
    * Line : 526 (Level : 1) You have no color with your background-color : .rightBoxHeading
    * Line : 531 (Level : 1) You have no background-color with your color : h3.leftBoxHeading a:hover
    * Line : 531 (Level : 1) Same colors for color and background-color in two contexts #navEZPagesTop and h3.leftBoxHeading a:hover
    * Line : 536 (Level : 1) Same colors for color and background-color in two contexts .messageStackError and h3.rightBoxHeading a:hover
    * Line : 536 (Level : 1) Same colors for color and background-color in two contexts .messageStackError and h3.rightBoxHeading a:hover
    * Line : 536 (Level : 1) You have no background-color with your color : h3.rightBoxHeading a:hover
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 546 (Level : 1) This property applies to block-level elements. : .attribImg
    * Line : 564 (Level : 1) You have no color with your background-color : #bannerboxHeading
    * Line : 568 (Level : 1) This property applies to block-level elements. : #upProductsHeading
    * Line : 572 (Level : 1) This property applies to block-level elements. : #upDateHeading
    * Line : 589 (Level : 1) You have no color with your background-color : .rowOdd
    * Line : 595 (Level : 1) You have no color with your background-color : .rowEven
    * Line : 610 (Level : 1) This property applies to block-level elements. : .accountTaxDisplay
    * Line : 610 (Level : 1) This property applies to block-level elements. : .accountTaxDisplay
    * Line : 620 (Level : 1) You have no color with your background-color : TR.tableHeading
    * Line : 644 (Level : 1) This property applies to block-level elements. : #ccacceptContent
    * Line : 652 (Level : 1) You have no background-color with your color : .productGeneral
    * Line : 658 (Level : 1) You have no background-color with your color : .productDescription
    * Line : 666 (Level : 1) You have no background-color with your color : .productPrice
    * Line : 689 (Level : 1) You have no background-color with your color : .alsoPurchased

Most if not all of these styles are the defualt styles that the validator warned against. There were also some styles that were straight up bogus, but that might have been on my part.

So for everyone who is having browser issues, make sure you submit your style sheet to the W3C CSS Validator to test it out and make the suggested changes.

I think I had only a few errors which when resolved all of my browser issues.

But just a heads up, that they style sheet could be fleshed out some more according to W3C Schools...

[kobra]

zulurose,

If am not mistaken...currently ZenCart is XHTML Transitional and not XHTML strict

[ZuluRose]

i dont have a copy of the original style sheet, but you might want to run it thru the validator and see what comes out.

So I am not sure that Zen Cart is XHTML Transitional.
For example use your Developer Tool Kit to search for "<br>" and you'll find plenty of examples that are not xhtml transitional. The code *should* be <br /> for XHTML Transitional and Strict.

In order to get my site (and some pages are still not working) to be validated I had to copy my site to my hard drive and use dreamweavers site wide find and replace on the <br> code.

If you have a a defualt zen site see if you can validate it.

My style sheet now passes and my home page is XHTML Transitional. But my inner pages need some work.
But that might be my problem ;)
http://www.zulurose.com

[ZuluRose]

I take that back, I made some adjustments to my header and linked it to an E-Z Page and now it is no longer passing the validation.
Arghhhh ... I was so close .. Back to work!

[misty]

zulurose, great template/design you have on your site..
Excellent..well done!!

[ZuluRose]

zulurose, great template/design you have on your site..
Excellent..well done!!

Thanks, I've had the site open for a little less than a week and have 3 orders! So I feel like I might be on the right track.

But I definately have to take my hats off to the Zen Cart team and forum, I've been pestering you guys for the last couple of weeks! And they have trained me up in their product pretty good.

But I still have more questions, but alteast the shop is open and I am happy with phase one.

-zulurose

PS, Does the USPS module work?

[misty]

PS, Does the USPS module work?

Sorry do not use that module.. someone who does will
hopefully answer your query

[kobra]

PS, Does the USPS module work?

Yes it works great!!!

You do require an account with USPS and they have gotten a bit faster in this creation. Once you have an account you then also need to request having this account moved to theiur "Live" server. Once this is all set and you have entered your account info in the admin for USPS it will process correctly

I do have a default 1.3.6 site that validates as transitional

[ZuluRose]

I got the USPS module working last night. Turn out I was not on their live server.

I think my errors with the XHTML Validation came from the swap image script (product info page) and some links I handcoded without using the '&amp;' code.

All my other pages validate correctly. But I am still having problems with the product listing because the validator does not like the JAVA scripting, and some hand coding. I'll work on that later tho...

Thanks for all the help. I guess my last issue with my Zen-Cart install is still in discussion on this thread. http://www.zen-cart.com/forum/showthread.php?t=51761

Corba, maybe you could take a look.