Column Grid Layout on 1.3.7 (single column problem)

**Taipa** · 12 May 2007, 04:31 AM

I'm running Zen 1.3.7 (but it was an upgrade from 1.2.7 - I know this means issues), and I've installed the Column Grid layout mod.

I've set the Product Layout to "columns", and the number of columns to "3", but I just get a vertical line of products down the side of the page, instead of a grid.

(see in action here: http://www.siteground138.com/~themon...dex&cPath=3_33)

The common solution for this problem that I found on these forums seems too be to add:

Code:

.categoryListBoxContents {
	float: left;
	}

to the stylesheet.css, but that doesn't have any effect.

To complicate matters, the template in use was made by someone else who is no longer available, and I'm not the greatest templater anyway (for my own site, I ended up paying a designer to create the Zen template, while I just did the backend), so I don't really have any clue what they have done with this template.

Here is my stylesheet, if that helps:

Code:

/*
//
// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce                                       |
// +----------------------------------------------------------------------+
// | Copyright (c) 2003 The zen-cart developers                           |
// |                                                                      |
// | http://www.zen-cart.com/index.php                                    |
// |                                                                      |
// | Portions Copyright (c) 2003 osCommerce                               |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license,       |
// | that is bundled with this package in the file LICENSE, and is        |
// | available through the world-wide-web at the following url:           |
// | http://www.zen-cart.com/license/2_0.txt.                             |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to       |
// | license@zen-cart.com so we can mail you a copy immediately.          |
// +----------------------------------------------------------------------+
// $Id: stylesheet.css 1223 2005-04-22 03:46:20Z ajeh $
*/
BODY {
	color: #000000;
	margin: 5px;
	margin-bottom: 10px;
	padding: 0px;
   font: 11px Verdana, Arial, sans-serif;
   	background-image: url(/images/greengrass.jpg);

}

.centershop {
	padding: 0px;
	margin: 0px auto;
	position: relative;
	text-align: left;
	width: 750px !important;
}

TD.main, P.main {
  font-size: 11px;
  line-height: 1.5;
}
A {
  color: #006600;
  text-decoration: none;
}

A:hover {
  color: #006600;
  text-decoration: none;
}

FORM {
	display: inline;
}
.banners {
  padding: 15px;
}

/*HEADER CSS*/

TABLE.header {
  background-color: #ffffff;
  border-right: 1px solid #9a9a9a;
  border-left: 1px solid #9a9a9a;
  border-bottom: 1px solid #9a9a9a;
}

TABLE.headerNavigation {
  background-color: #99CC33;
  border-right: 1px solid #9a9a9a;
  border-left: 1px solid #9a9a9a;
  border-bottom: 1px solid #9a9a9a;
  width: 100% !important;
}

TD.headerNavigation {
  position: relative;
  vertical-align: middle;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color:#000000;
  letter-spacing:1px;
  padding: 5px;
}

TD.breadCrumb {
  font-size: 10px;
  font-weight: bold;
  color: #9a9a9a;
  padding: 3px;
}

TD.headerNavigation A, TD.headerNavigation A:visited, td.footertop a  {
  font-weight: bold;
  color: #ffffff;
}

TD.headerNavigation A:hover, td.footertop a:hover  {
  color: #99CC33;
}

TR.headerError {
  background: #ff0000;
}

TD.headerError {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #ff0000;
  color: #ffffff;
  font-weight : bold;
  text-align : center;
}

TR.headerInfo {
  background: #00ff00;
}

TD.headerInfo {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #00ff00;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

/*SIDEBOX CSS*/

.column_left, .column_right, .column_single {
  background: #ffffff;
  padding: 2px;
}

.boxText {
  font-size: 11px;
  line-height: 125%;
}
.leftbox, .rightbox, .centerbox, .singlebox {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  background: #ffffff;
  border: 1px solid #9a9a9a;
  margin-bottom: 15px;
}

.leftboxheading, .rightboxheading, .centerboxheading, .singleboxheading {
  background-color: #99CC33;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  padding: 3px;
  height: 20px;
  padding-left: 5px;
}

td.leftboxheading a, td.rightboxheading a, td.centerboxheading a, td.singleboxheading a {
  color: #ffffff;
}
TR.leftboxheading, TR.rightboxheading, TR.centerboxheading, TR.singleboxheading {
}

.leftboxcontent, .rightboxcontent, .centerboxcontent, .singleboxcontent {
  line-height: 125%;
  padding: 4px;
}

.leftboxfooter, .rightboxfooter, .centerboxfooter, .singleboxfooter {
  background-color: #99CC33;
  margin-bottom: 15px;
}

.plainBox, .plainbox-description {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  background: #ffffff;
  border:1px solid #9a9a9a;
  padding: 5px;
}
.plainBoxHeading, TD.tableHeading {
  font-size: 12px;
  font-weight: bold;
  padding: 11px 5px 5px;
}
.productListing-heading {
  background-color: #99CC33;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  padding: 3px;
  height: 20px;
}
TD.productlisting {
  border:1px solid #9a9a9a;
float: left;
}

TD.productListing-data {
  font-size: 10px;
  padding: 5px;
}

/*center main section
-----------------------------------*/
TD.pageHeading, DIV.pageHeading, h1 {
  font-size: 16px;
  font-weight: bold;
  color: #9a9a9a;
  padding-top: 11px;
}

.center_column {
  padding: 8px;
}
.main_page{
  width: 750px !important;
  background-color: #ffffff;
  border-right: 1px solid #9a9a9a;
  border-left: 1px solid #9a9a9a;
  border-bottom: 1px solid #9a9a9a;
  padding: 5px;
}

/* footer
--------------*/

TABLE.footer {
  background: #ffffff;
  text-align: center;
  font-size: 10px;
  border-right: 1px solid #9a9a9a;
  border-left: 1px solid #9a9a9a;
  border-bottom: 1px solid #9a9a9a;
}

TR.footertop {
  background: #99CC33;
  font-size: 11px;
}

TD.footertop, TD.footerbottom {
  padding: 5px;
}

/*miscellaneous areas
-------------------------------------*/
TD.cartBox {
   background: #eff4f8;
   font-size: 10px;
   padding: 3px;
   border: 1px dotted #ffb062;
}

TR.productListing-odd, TR.upcomingProducts-odd {
  background: #ffffff;
}

TR.productListing-even, TR.upcomingProducts-even, .productsNotifications {
  background: #eff4f8;
}

TD.productListing-data-description-odd {
  background: #ffffff;
  font-size: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #9a9a9a;
}

TD.productListing-data-description-even {
  background: #eff4f8;
  font-size: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #9a9a9a;
}

td.pageresults a {
  color: #428dff;
}

td.pageresults a:hover {
  background: #FFFF33;
}

SPAN.newItemInCart {
  color: #ff0000;
  font-weight: bold;
}

TD.smallText, SPAN.smallText, P.smallText, td.pageresults{
   font-size: 10px;
}

TD.fieldKey {
  font-size: 12px;
  font-weight: bold;
}

TD.fieldValue {
  font-size: 12px;
}

CHECKBOX, INPUT, RADIO, SELECT {
  font-size: 11px;
}

TEXTAREA {
  width: 100%;
  font-size: 11px;
}

.greetUser {
   color: #f0a480;
   font-weight: bold;
   font-size: 12px;
   padding-top: 5px;
   padding-bottom: 5px;
}

SPAN.greetUser {}

SPAN.markProductOutOfStock {
	color: #c76170;
	font: bold 12px Verdana, Arial, sans-serif;
}

span.normalprice {
	text-decoration: line-through;
}

SPAN.productSpecialPrice, SPAN.productSalePrice, .stockWarning, span.coming {
  color: #ff0000;
}

span.productSpecialPriceSale {
  color: #ff0000;
	text-decoration: line-through;
}

SPAN.productPriceDiscount, .inputRequirement {
  font-size: 10px;
  color: #FF0000;
}
.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; }
.moduleRowSelected { background-color: #E9F4FC; }

/* message box */

.messageBox {}
.messageStackError, .messageStackWarning, errorBox {
  background-color: #ff0000;
  color: #ffffff;
  font-size: 10px;
  padding: 4px;
  border: 1px solid #9a9a9a;
}
.messageStackSuccess { background-color: #b3ffa8; padding: 2px; border: 1px solid #9a9a9a; }
.messageStackCaution { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffff00; }

/* checkout totals */
TD.ot-subtotal-Text, TD.ot-cod-fee-Text, TD.ot-total-Text, TD.ot-group-pricing-Text, TD.ot-gv-Text, TD.ot-loworderfee-Text, TD.ot-shipping-Text, TD.ot-subtotal-Text, TD.ot-tax-Text, TD.ot-coupon-Text {
  font-weight: bold;
}
TD.ot-subtotal-Amount, TD.ot-cod-fee-Amount, TD.ot-total-Amount, TD.ot-group-pricing-Amount, TD.ot-gv-Amount, TD.ot-loworderfee-Amount, TD.ot-shipping-Amount, TD.ot-subtotal-Amount, TD.ot-tax-Amount, TD.ot-coupon-Amount {}

/* product_info attribute comments */

.ProductInfoComments, TD.ProductInfoComments, SPAN.ProductInfoComments {
  color: #ff0000;
  font-size: 10px;
  text-align : left;
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 6px;
  border-top: 1px solid #9a9a9a;
}

/* General alert span class */
TD.alert, SPAN.alert {
  color: #FF0000;
  font-weight: bold;
}

/* General alert span class */
TD.alertBlack, SPAN.alertBlack {
  color: #000000;
  font-weight: bold;
}

/* popup tables */
TABLE.popupattributeqty, TABLE.popupcouponhelp, TABLE.popupcvvhelp, TABLE.popupimage, TABLE.popupimageadditional, TABLE.popupsearchhelp, TABLE.popupshippingestimator, TABLE.popupinfoshoppingcart {
  background-color: #ffffff;
	margin: 6px;
  padding: 6px;
  font: 11px Verdana, Arial, sans-serif;
}

/* categories_description */
TABLE.categoriesdescription {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  background: #D0D0D0;
  border:1px solid #9a9a9a;
}

TD.categoriesdescription {
  font-size: 11px;
  line-height: 1.0;
}

/* categories box parent and child categories and extra links */
A.category-top, A.category-links {
  color: #006600;
  text-decoration: none;
}
A.category-subs, A.category-products {
  color: #428dff;
  text-decoration: none;
}
SPAN.category-subs-parent {
  font-weight: bold;
}
SPAN.category-subs-selected {
  font-weight: bold;
}

/* attribute images table */
TABLE.products-attributes-images {
/*  width: 100%; */
/*  border: 1px solid #9a9a9a; */
  float: left;
  padding: 2px;
}
.unnamed1 {
	background-image: url(images/purplecircleslight.gif);
	background-position: -10px -10px;
	position: absolute;
	left: 10px;
	top: 10px;
	right: 10px;
}
.topnav {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #336600;
	border-right-color: #336600;
	border-bottom-color: #336600;
	border-left-color: #336600;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: x-large;
}
.leftBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	}

.sideBoxContent {
	background-color: #ffffff;
	padding: 0.4em;
	}
.categoryListBoxContents {
	float: left;
	}

There are other issues with how the template displays, such as the background image not showing up at all, but I assume those are 1.2.7 -> 1.3.7 template issues, and may or may not have anything to do with my column/grid problem. I am trying to correct the other issues as well, but they are less important right now than getting the grid to work properly.

I know it is installed properly, because I also installed it into the Classic template, and it works just fine in there, so I know it's an issue with my template somehow.

Any suggestions?

**kobra** · 12 May 2007, 09:46 AM

I know that this is not what you are wanting to hear but it is what it is ...

You are using the stylesheet from an old version dated $Id: stylesheet.css 1223 2005-04-22

This is full of tables that no longer exist as they have been converted to div's in the 1.3.x series

You will have to rebuild your template using the correct stylesheet version

**Taipa** · 12 May 2007, 11:44 AM

Originally Posted by kobra

I know that this is not what you are wanting to hear but it is what it is ...

You are using the stylesheet from an old version dated $Id: stylesheet.css 1223 2005-04-22

This is full of tables that no longer exist as they have been converted to div's in the 1.3.x series

You will have to rebuild your template using the correct stylesheet version

Thank you! Apparently, that was just what I needed to hear.
I didn't want to mess with the template too much yet since I didn't know how much it would break the layout.
But when you said that, I figured I'd give it a shot and see what happened. I replaced the custom (aka old) stylesheet.css with the default stylesheet.css that came with the Classic template in 1.3.7!
Not only did it fix my column/grid problem, it didn't kill the look of the site nearly as much as I thought. Even I can make the needed changes to rebuild the template.

So thank you, kobra, you have saved the day again! ;)