Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / problem with right magin sub categorie/products screen

problem with right magin sub categorie/products screen

Locked

Views: 1,220

Results 1 to 9 of 9
This thread is locked. New replies are disabled.
15 May 2008, 4:02 AM
#1
edm avatar

edm

New Zenner

Join Date:
Mar 2008
Posts:
52
Plugin Contributions:
0

problem with right magin sub categorie/products screen

Hi, I am using (mostley grey) template, I have just noticed when I am viewing the products in a sub category, the price and shopping cart quantity boxes are being cut in half on the right side.
I cannot find the right margin to change this?
My margins apper to be ok in all the other pages so far?
Any ideas please?

15 May 2008, 5:37 AM
#2
edm avatar

edm

New Zenner

Join Date:
Mar 2008
Posts:
52
Plugin Contributions:
0

Re: problem with right magin sub categorie/products screen

Delete my last comment other pages (ok) they are not.
Main page is OK, however information is going under my (right) side boxes on other pages.
I am also using
css Flyout Header by Jadetrue
and
Smartbackgrounds by Glen Herbert
I am running Zencart 1.3.8 on Easyphp (localhost)
I have not merged these 3 stylesheets in my custom_template folder, could this be my problem?
stylesheet
stylesheet_header_menu
stylesheet_smartbg

15 May 2008, 6:07 AM
#3
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: problem with right magin sub categorie/products screen

Having the stylesheet info in multiple files is not in itself bad; it may load a hair slower. If you have repeated or conflicting declarations, that can cause confusion in understanding what is supposed to happen.

15 May 2008, 6:50 AM
#4
edm avatar

edm

New Zenner

Join Date:
Mar 2008
Posts:
52
Plugin Contributions:
0

Re: problem with right magin sub categorie/products screen

Ok, I had a feeling this may happen, I will try to merge the 3 style sheets.

15 May 2008, 7:23 AM
#5
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: problem with right magin sub categorie/products screen

Having just one stylesheet file is good practice, but it won't have anything to do with fixing your problem. The cause is somewhere else.

15 May 2008, 11:10 AM
#6
edm avatar

edm

New Zenner

Join Date:
Mar 2008
Posts:
52
Plugin Contributions:
0

Re: problem with right magin sub categorie/products screen

Well I have merged stylesheets, but still no glory. I think the problem is in the portion of menu relating to PRODUCT, I say this because where the products are displayed in the sub category it is here that they stick out.
Then also in my shopping cart the product and its haing stickout but the total bar is within its margins. Here is a copy of my stylesheet.
/**

  • Main CSS Stylesheet
  • @package templateSystem
  • @copyright Copyright 2003-2006 Zen Cart Development Team
  • @copyright Portions Copyright 2003 osCommerce
  • @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
  • @version $Id: stylesheet.css 4387 2006-09-04 13:54:28Z drbyte $
    */

body {behavior: url(includes/csshover.htc);
}

div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#ececec;}

div#dropMenu {
width:100%;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin:0;
padding:0;
}

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
float:left;
line-height:1em;
width:16.667%;
*width:16.649%;
}

div#dropMenu ul.level1 {
width:100%;
margin:0 auto;
text-align:center;
background:#87d1ef; /*background color of top menu when NOT selected. */
z-index:1000;
float:left;
border:1px solid #000;
}

div#dropMenu li a {
display: block;
/* Hides from IE5-mac */
height: 1%;
/* End hide from IE5-mac */
padding: .6em 0;
text-decoration: none;
text-transform:uppercase;
color:#3300ff;
text-align:center;
border-right:1px solid #000;
}

div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;z-index:1000;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} /
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute; width: 12em;display:block;z-index:1000;}
div#dropMenu ul.level2 {background:#87d1ef;z-index:1000;position:absolute;left:0;}
div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level5,
div#dropMenu ul.level6,
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 12em; background:#87d1ef}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: 3300ff; text-transform:none;} /
this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#87d1ef;}

.clearBoth {
clear:both;
height:0;
font-size:0;
line-height:0;
}

{	
margin: 0;
font-family: lucida sans unicode, verdana, arial, helvetica, sans-serif;
font-size: 80%;
line-height: 160%;
color: #000;
background-color: #ccffcc;
}

a img {border: none; }

a {
color: #000;
text-decoration: none;
}
a:visited {
color: #6666ff;
text-decoration: none;
}
a:hover {
color: #33ccff;
text-decoration: underline;
}
h2, h3, h4, h5, h6 {
/font-family: georgia;/
color: #999;
}
h1 {
margin: 0px 0px 15px 0px;
/text-align: center;/
font: 240% georgia, helvetica, sans-serif;
color: #6666ff;
letter-spacing: 2px;
text-transform: uppercase;
/border-bottom: 1px solid #000;/
/clear: both;/
}
h2 {
font-size: 130%;
margin: 0;
}
h3 {
font-size: 100%;
}
p, ul, ol {
margin: 0 0 1.5em 0;
}
/wrappers - page or section containers/
#mainWrapper {
background-color: #d3f6f6;
text-align: left;
width: 99%;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
#headerWrapper { background-image: url(../images/smartbg.gif);}

<--#headerWrapper.smartBG_23 { background-image: url(../images/smartbg_23.gif);}-->

<--#headerWrapper.smartBG_shippinginfo { background-image: url(../images/smartbg_shippinginfo.gif);-->
}
#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 1em;
}

#logoWrapper{
/background-color: #d3f6f6;/
text-align: left;
margin: 0 0 0 5em;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#navColumnOneWrapper, #navColumnTwoWrapper {
margin: 0 0.5em;
}

#tagline {
/padding: 3em 0 0 0;/
text-align : right;
color: #03d0d5;
font-style: italic;
font-weight: bold;
font-size: 240%;
}

#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%;
}

.wrapperAttribsOptions {
margin: 0.3em 0em;
}

/navigation/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevCounter {
margin: 0em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper/, #navSuppWrapper, #navCatTabsWrapper/ {
margin: 0;
padding: 0.5em 0;
background-color: #87d1ef;
/border-bottom: 1px solid #03d0d5;/
}
#navCatTabsWrapper {
background-color: #87d1ef;
/display: none;/
border-top: 1px solid #222;
}
#navMain {
margin-top: -1px;
}
#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0 .5em;
padding: 0;
list-style-type: none;
position: relative;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
position: relative;
}

#navMain ul li a/, #navSupp ul li a/ {
padding: 0.5em;
margin: 0;
background-color: #87d1ef;
border-left: 1px solid #ccffcc;
border-right: 1px solid #cffcc;
border-bottom: 1px solid #ccffcc;
}

#navMain ul li a:hover/, #navSupp ul li a:hover, #navCatTabs ul li a:hover/ {
background-color: #eee;

}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #9a9a9a;
}

#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 {
background-color: #87d1ef;
padding: 3px;
border: 1px solid #222;
}

#navEZPagesTop {
background-color: #87d1ef;
padding: 0.5em;
border-top: 1px solid #222;
}

#navColumnOne, #navColumnTwo {
background-color: transparent;
}
code {
/font-family: arial, verdana, helvetica, sans-serif;/
}

form, select {
display: inline;
margin: 0.1em;
}

textarea {
margin: auto;
padding: 0 3px;
width: 100%;
background-color: #eee;
border: 1px solid #222;
color: #000;
font: inherit;
}
fieldset {
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #222;
}

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

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}
input {
width: auto !important; /*hack for Zen Cart resizing buttons, grr */
}
input[type="text"], input[type="password"] {
background-color: #ffffa0;
border: 1px solid #222;
font: inherit;
color: #000;
padding: 0 3px;
}
label.inputLabel {
width: 9em;
float: left;
}

label.inputLabelPayment {
width: 14em;
float: left;
padding-left: 2.5em;
}

label.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
width: 11em;
float: left;
}

#checkoutPayment LABEL.radioButtonLabel {
font-weight: bold;
}

address {
padding: 0.5em;
}

address {
font-style: normal;
}

.clearBoth {
clear: both;
}

hr {
height: 1px;
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #222;
}

/warnings, errors, messages/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
padding: .2em .5em;
border: 1px solid #000;
}

.messageStackWarning, .messageStackError {
background-color: #ff003;
color: #c00;
padding: 0 .5em;
margin-bottom: .5em;
}
.messageStackWarning img, .messageStackError img, .messageStackSuccess img, .messageStackCaution img {
display: none;
}
.messageStackSuccess {
background-color: #9f9;
color: #070;
}

.messageStackCaution {
background-color: #FFFF66;
color: #000000;
}

/The main content classes/
#navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}

/.content,/ #productDescription, .shippingEstimatorWrapper {
/padding: 0.5em;/
}
.alert {
color: #f99;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
#bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
/padding: 0.8em;/
}
.centerColumn {
padding: 3px;
}
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
}

/Shopping Cart Display/
#cartAdd {
float: right;
text-align: center;
border: 1px solid #000;
padding: 1em;
}

.tableHeading th {
border-bottom: 1px solid #222;
}

.tableHeading, #cartSubTotal {
background-color: #87d1ef;
}

#cartSubTotal {
border-top: 1px solid #222;
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 {
color: #33CC33;
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;
background-color: #87d1ef;
border: 1px solid #222;
}

.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
/color: #ff0000;/
font-weight: bold;
}

.orderHistList {
margin: 0 1em;
padding: 0.2em 0em;
}

#cartBoxListWrapper ul, #ezPageBoxList ul {
list-style-type: none;
}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
}

#cartBoxEmpty, #cartBoxVoucherBalance {
font-weight: bold;
}

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

.centerBoxWrapper {
border: 1px solid #222;
margin: 1.1em 0;
height: 1%;
}

/sideboxes/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a, h3.rightBoxHeading, h3.rightBoxHeading a {
margin: 0;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
padding: 3px;
font-weight: bold;
border-bottom: 1px solid #222;
background-color: #87d1ef;
}
.leftBoxContainer, .rightBoxContainer {
border: 1px solid #222;
margin: 0 0 1em 0;
}

.sideBoxContent {
background-color: #ececec;
padding: 0.4em;
}

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

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

/* categories box parent and child categories /
span.category-subs-parent {
font-style: italic;
}
span.category-subs-selected {
font-style: italic;
}
/
end categories box links */

/misc/
.back {
float: left;
}

.forward {
float: right;
}

.bold {
font-weight: bold;
}

.rowOdd {
background-color: #ececec;
vertical-align: top;
}

.rowEven {
background-color: #d3f6f6;
vertical-align: top;
}

caption {
/display: none;/
}

#myAccountGen li, #myAccountNotify li {
margin: 0;
}

.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
}

.accountQuantityDisplay {
width: 10%;
vertical-align: top
}

tr.tableHeading {
background-color: #87d1ef;
}
#prevOrders td {
border-bottom: 1px solid #222;
padding: 0 .5em 0 0;
}
.productListing-rowheading {
background-color: #87d1ef;
}
.productListing-data {
padding: .5em 0;
}
.productListing-data h3 {
margin: 0 0 1em 0;
}
#siteMapList {
width: 90%;
float: right;
}

.ratingRow {
margin: 1em 0em 1.5em 0em;
}

label#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #d3f6f6;
}

15 May 2008, 5:42 PM
#7
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: problem with right magin sub categorie/products screen

It is generally not practical to diagnose behavior from just a stylesheet, especially without a screenshot. If you do need to post a whole file, please use ```
[php] or [code]


You will need to identify the offending elements on your page to help figure out the CSS problem. You can use the Firefox Web Developer extension and its Information > Display Element Information button to get all class/id and ancestor info for any element you click on.

There are a couple of things I noticed about your stylesheet.
At the top, the body declaration seems to have been split, and this part is not identified:```
body {behavior: url(includes/csshover.htc);
}

div#dropMenu 
...
.clearBoth {
clear:both;
height:0;
font-size:0;
line-height:0;
}

{
margin: 0;
font-family: lucida sans unicode, verdana, arial, helvetica, sans-serif;
font-size: 80%;
line-height: 160%;
color: #000;
background-color: #ccffcc;
}

You have tried to comment out some smartbg examples, but I don't think the <-- --> is valid for CSS; you should use /* */ instead, or else delete the ones you are not using. Also, you have left a closing } loose:```
#headerWrapper { background-image: url(../images/smartbg.gif);}

<--#headerWrapper.smartBG_23 { background-image: url(../images/smartbg_23.gif);}-->

<--#headerWrapper.smartBG_shippinginfo { background-image: url(../images/smartbg_shippinginfo.gif);-->
}

17 May 2008, 1:06 AM
#8
edm avatar

edm

New Zenner

Join Date:
Mar 2008
Posts:
52
Plugin Contributions:
0

Re: problem with right magin sub categorie/products screen

Hi Gjh42, Thanks for advise, I managed to find problem, my left sidebox was up against the drop menu, so I gave it some padding,

[code]
#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 1em ;
What I didnt realise is that it had also padded my product listing data and heading 1em left as well,
I have now changed it to,

[code]
#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage
margin: 0em;
padding: 1em 0 ;

All apears ok now, fingers crossed.
I have also changed the body declaration to this
[code]
body {behavior: url(includes/csshover.htc);
}

.clearBoth {
clear:both;
margin: 0;
font-family: lucida sans unicode, verdana, arial, helvetica, sans-serif;
height:0;
font-size: 80%;
line-height: 160%;
color: #000;
background-color: #ccffcc;
}

Hope this is correct?
Regards
Eddie

17 May 2008, 5:58 AM
#9
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: problem with right magin sub categorie/products screen

The

.clearBoth {
clear:both;
}

was fine. These properties

margin: 0;
font-family: lucida sans unicode, verdana, arial, helvetica, sans-serif;
height:0;
font-size: 80%;
line-height: 160%;
color: #000;
background-color: #ccffcc;
}

belong to the body declaration in the stock stylesheet, and should be reunited with it:

body {behavior: url(includes/csshover.htc);
margin: 0;
font-family: lucida sans unicode, verdana, arial, helvetica, sans-serif;
height:0;
font-size: 80%;
line-height: 160%;
color: #000;
background-color: #ccffcc;
}

.clearBoth {
clear:both;
}