1.3.5 .categoryListBoxContents

[tonkali]

unable to figure this out, how do I apply breaks (between the white space or better yet specifically where I would want them), in my category listing as seen here?

[kobra]

What and where do you want 'space'??
in the sideb box? or the center section?
Did not see "white" space or am not understanding what you are referring to.

[tonkali]

hi kobra,

thanks for the response :)

This is my first time doing this, I have to rebuild a cart and I need my category list to wrap like the one on this page. Don't I modify the .categoryListBoxContents class?

[seethrou]

Before modify, it may better to compare them. It seems that the effect don't use breaks in html.
The different is in the images width and height.

<div style='width: 33%;' class='categoryListBoxContents'>
<a href='http://www.the-online.com/cart/index.php?main_page=index&cPath=1_14'>
<img width='1' height='1' title=' Men's Pants & Shorts ' alt='Men's Pants & Shorts' src='images/pixel_trans.gif' />
<br />
Men's Pants & Shorts
</a>
</div>

<div style='width: 33%;' class='categoryListBoxContents'>
<a href='http://www.the-test.com/~opiumden/theDen/index.php?main_page=index&cPath=4_22'>
<img width='9' height='9' title=' Men's Pants & Shorts ' alt='Men's Pants & Shorts' src='images/catetory_icon.gif' />
<br />
Men's Pants & Shorts
</a>
</div>

Then compare to the css for any different.

.

[tonkali]

Before modify, it may better to compare them. It seems that the effect don't use breaks in html.

Then compare to the css for any different.

.

Thanks for responding seeThrou. This was first done (the prev link, with the breaking), in Zen v. 1.3.0.1 so the stylesheets are a bit different (particularly regarding Table layout in that version). Initially, did the comparison and didn't see anything that different 'cept the image but that wouldn't affect the space breaking. It looks like a white-space property but I got nowhere with that . Any other suggestions, anyone?

[tonkali]

sorry for the length here but below is the stylesheet being used on the others page (messy yep, i know and there are no overrides in this set-up just overwrites of various files, what a mess).

*/
BODY {
	background-color: #000000;
	color: #FFFFFF;
	margin: 0px;
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 0px;
   font: 11px Verdana, Arial, sans-serif;
}

.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: #FFFFFF;
  text-decoration: none;
}

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

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

/*HEADER CSS*/

TABLE.header {
  /*background-image: url(..images/opium-design-rev2_03.gif);*/
  background-repeat: no-repeat;
  background-color: #700809;
  border-right: 1px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 10px solid #000000;
}

TABLE.headerNavigation {
  /*background-image: url(../images/tile_back.jpg);*/
  background-color: #700809;
  border-right: 1px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #700809;
  width: 100% !important;
}

TD.headerNavigation {
/*  position: relative;
  vertical-align: middle;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  color:#000000;
  letter-spacing:1px;
  padding: 5px;*/
  	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
	margin: 5px;
	padding: 2px;
	font-weight: bold;
}

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

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

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

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: #131D1E;
	padding: 2px;
}

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

.leftboxheading, .rightboxheading, .centerboxheading, .singleboxheading {
  background-color: #232b2e;
  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 {
  background: #232b2e;
  /*background-image: url(../images/tile_back.jpg);*/
}

.leftboxcontent, .rightboxcontent, .centerboxcontent, .singleboxcontent {
  line-height: 125%;
  padding: 4px;
  border-top: 1px solid #700809;
  border-bottom: 1px solid #700809;
}

.leftboxfooter, .rightboxfooter, .centerboxfooter, .singleboxfooter {
  background-color: #232b2e;
  /*background-image: url(../images/tile_back.jpg);*/
  margin-bottom: 15px;
}

.plainBox, .plainbox-description {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  background:  #2c3638;
  border:1px solid  #232b2e;
  padding: 5px;
}
.plainBoxHeading, TD.tableHeading {
  font-size: 12px;
  font-weight: bold;
  padding: 11px 5px 5px;
}
.productListing-heading {
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  padding: 3px;
  height: 20px;
}

TD.productListing-heading{
	background-color: #232b2e;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #700809;  
	/*background-image: url(../images/tile_back.jpg);*/
}

TD.productlisting {
  /*border:1px solid #232b2e;*/
}

TD.productListing-data {
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	height: auto;
	width: auto;
	margin: 5px;
	padding-top: 20px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
}

SPAN.category-subheadings {
  font-weight: normal;
  font-size: x-small;
}

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

.center_column {
  padding: 8px;
}
.main_page{
  width: 100% !important;
  background-color: #131D1E;
/*border-right: 1px solid #131D1E;
  border-left: 1px solid #131D1E;
  border-bottom: 1px solid #131D1E;
  padding: 5px;*/
}

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

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

TR.footertop {
  background: #000000;
  /*background-image: url(../images/tile_back.jpg);*/
  font-size: 11px;
}

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

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

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

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

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

TD.productListing-data-description-even {
  background: #2c3638;
  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 {
   font-size: 12px;
   padding-top: 5px;
   padding-bottom: 5px;
}

SPAN.greetUser {
   color: #f0a480;
   font-weight: bold;
}

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

span.normalprice {
	text-decoration: line-through;
	font-size: 10px;
	font-weight: normal;
	color: #FFFFFF;
}

SPAN.productSpecialPrice, SPAN.productSalePrice, .stockWarning, span.coming {
	color: #FFCC33;
	font-weight: bolder;
	font-size: 16px;
}

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

SPAN.productPriceDiscount, .inputRequirement {
	font-size: 10px;
	color: #FFFFFF;
	background-color: #FF0000;
	padding: 2px;
	height: auto;
	width: auto;
	margin: 2px;
}
.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; }
.moduleRowSelected { background-color: #232b2e; }

/* 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-total-Amount {
  font-weight: bold;
  border-top: 1px solid #9a9a9a;
}
TD.ot-subtotal-Amount, TD.ot-cod-fee-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 */
A.category-top {
  color: #FFFFFF;
  text-decoration: none;
}
A.category-links {
  color: #FFFFFF;
  text-decoration: none;
}
A.category-subs, A.category-products {
  color: #FFFFFF;
  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;
}

a.headerNav {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 10px;
	text-transform: uppercase;
	text-decoration: none;
	margin: 2px;
	padding: 1px;
	height: auto;
	width: auto;
	background-color: #700809;
}

.phoneNumber {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #FFFFFF;
}