CSS changes for 1.3.5 (and 1.3.0.2)

[kuroi]

This is a list of the changes found in the 1.3.5 stylesheet (derived in part from one compiled by jettrue) together with unofficial explanations and recommendations for applying them to your own stylesheet (whether you are upgrading at this time or not).

Fix navCatTabs display in Opera (and Safari?)

In Opera and I believe Safari, the nav cat tabs were displayed as a single straight line (sometimes leading to very wide pages). The following change fixes that problem, and can (and should) be applied to all 1.3 templates (i.e. it is not specific to 1.3.5)

Move the white-space: nowrap from the LI tags to the A tags, i.e. change

#navMain ul li, #navSupp ul li, #navCatTabs ul li {

display: inline;
white-space: nowrap;

}

#navMain ul li a, #navSupp ul li a {

text-decoration: none;
padding: 0em 0.9em;
margin: 0; color: #fff;

}

to

#navMain ul li, #navSupp ul li, #navCatTabs ul li {

display: inline;

}

#navMain ul li a, #navSupp ul li a {

text-decoration: none; padding: 0em 0.9em;
margin: 0; color: #fff;
white-space: nowrap;

}

Correction of Cart Attributes ID to class

In 1.3.5 the cart attributes list ID was corrected to be a class as it can, and often does, appear more than once on the product info page.

for stylesheets that will only be used on 1.3.5 Zen Carts, you can simply replace the "#" in #cartAttribsList with a ".", otherwise make a copy of your #cartAttribsList styles and also apply them to .cartAttribsList, e.g.

#cartAttribsList {

margin-left: 1em;

}

.cartAttribsList {

margin-left: 1em;

}

Following the copy approach would be a good idea even if you aren't planning an immediate upgrade to 1.3.5 and won't do any harm to shops running earlier versions of Zen Cart.

Cross Browser compatibility for the unordered list (UL) in history sidebox

UL tags are notorious for creating cross browser differences, This is because FF and IE have (unusually) different default settings. The following change has been introduced into the 1.3.5 stylesheet but can equally be applied to earlier 1.3 stylesheets.

.orderHistList {

margin: 1em;
padding: 0.2em 0em;

}

Improvements to Shopping Cart Sidebox

The 1.3.5 shopping cart sidebox has been overhauled. This fixes the duplicating border bug but goes further and removes some of the inline styling and creates a lot more flexibility for styling from the stylesheet.

The following should be added when upgrading to 1.3.5 (it can be added for earlier versions with no ill effects)

#cartBoxEmpty, #cartBoxVoucherBalance {

font-weight: bold;

}

The items marked in red should be added as shown below. Again there will be no ill effects if you add them to stylesheets for stores running on earlier versions of Zen Cart

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

Kuroi's magic bullet

OK. This one didn't find its way into the 1.3.5 release, but I recommend it anyway. Find the following section in your stylesheet

h1, h2, h3, h4, h5, h6 {

margin: 0.3em;

}

and add a second parameter denominated in anything other than em e.g. px or % or (my favorite) 0

h1, h2, h3, h4, h5, h6 {

margin: 0.3em 3px;

}

This will mean that all of your headings will have the same left (and right) margin rather than one based on their differing font sizes and so can left align neatly when they follow each other vertically. This can be applied to any 1.3 stylesheet, though you may have some work to do if you've previously tried to align them by styling lots of individual IDs instead.

[kuroi]

CORRECTION

It appears that Kuroi's magic bullet did find it's way into 1.3.5, but only into the classic template, not the template_default.