Results 1 to 7 of 7
  1. #1
    Join Date
    Jul 2009
    Posts
    110
    Plugin Contributions
    0

    Default Help with Shopping Cart Sidebox Overflow

    Hi,

    I just noticed that my shopping cart sidebox, when having an item in it, spreads all the way to the right of the page. How can I adjust the width so there is no overflow - I have already set the widths of the sideboxes in my CSS file, but that didn't do anything.

    I'm attaching a screenshot.

    Thanks!
    Joanne
    Attached Images Attached Images  

  2. #2
    Join Date
    Jul 2009
    Posts
    110
    Plugin Contributions
    0

    Default Re: Help with Shopping Cart Sidebox Overflow

    Anyone?? There has to be someone in this forum who can help me - pleaseeeeeeee

    Joanne

  3. #3
    Join Date
    Sep 2006
    Posts
    542
    Plugin Contributions
    0

    Default Re: Help with Shopping Cart Sidebox Overflow

    Your side boxes are set too narrow. Go to admin and increase the width or open your style sheet and decrease the font size

  4. #4
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Help with Shopping Cart Sidebox Overflow

    The screenshot looks like the shopping cart items are set to be much too wide (like the full page width). We really need to see your site live to give the correct answer for styling problems like this.

  5. #5
    Join Date
    Jul 2009
    Posts
    110
    Plugin Contributions
    0

    Default Re: Help with Shopping Cart Sidebox Overflow

    So how to I make them narrower then? I haven't made any changes to the size before - so should be what the basic program is set to, right?

    Here is my stylesheet code.

    /**
    * Main CSS Stylesheet
    *
    * @package templateSystem
    * @copyright Copyright 2003-2007 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 5952 2007-03-03 06:18:46Z drbyte $
    */

    body {
    margin: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 62.5%;
    color: #5c2488;
    background-color: #ede1f9;
    background-image: url(http://www.joannes-digital-designs.c...rpleBack.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: Center;
    }

    a img {border: none; }

    a:link, #navEZPagesTOC ul li a {
    color: #5c2488;
    text-decoration: none;
    }

    a:visited {
    color: #3300FF;
    text-decoration: none;
    }

    a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    color: #5c2488;
    }

    a:active {
    color: #5c2488;
    }

    h1 {
    font-size: 1.5em;
    color: #5c2488;
    }

    h2 {
    font-size: 1.4em;
    }

    h3 {
    font-size: 1.3em;
    }

    h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
    font-size: 1.1em;
    }

    .biggerText {
    font-size: 1.2em;
    }

    h1, h2, h3, h4, h5, h6 {
    margin: 0.3em 0;
    }

    /* Might uncomment either or both of these if having problems with IE peekaboo bug:
    h1, h2, h3, h4, h5, h6, p {
    position: relative;
    }
    *html .centerColumn {
    height: 1%;
    }
    */

    CODE {
    font-family: arial, verdana, helvetica, sans-serif;
    font-size: 1em;
    }

    FORM, SELECT, INPUT {
    display: inline;
    font-size: 1em;
    margin: 0.1em;
    }

    TEXTAREA {
    margin: auto;
    display: block;
    width: 95%;
    }

    input:focus, select:focus, textarea:focus {
    background: #ffffff;
    }

    FIELDSET {
    padding: 0.5em;
    margin: 0.5em 0em;
    border: 0px solid #5c2488;
    }

    LEGEND {
    font-weight: bold;
    padding: 0.3em;
    color: black;
    }

    LABEL, h4.optionName {
    line-height: 1.5em;
    padding: 0.2em;
    }

    LABEL.checkboxLabel, LABEL.radioButtonLabel {
    margin: 0.5em 0.3em;
    }

    #logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    float: center;
    }

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

    P, ADDRESS {
    padding: 0.5em;
    }

    ADDRESS {
    font-style: normal;
    }

    .clearBoth {
    clear: both;
    }

    HR {
    height: 1px;
    margin-top: 0.5em;
    border: none;
    border-bottom: 1px solid #5c2488;
    }

    /*warnings, errors, messages*/
    .messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
    line-height: 1.8em;
    padding: 0.2em;
    border: 0px solid #5c2488;
    }

    .messageStackWarning, .messageStackError {
    background-color: #ff0000;
    color: #FEF7E7;
    }

    .messageStackSuccess {
    background-color: #99FF99;
    color: #000000;
    }

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

    /*wrappers - page or section containers*/
    #mainWrapper {
    background-color: #f8f7fc;
    color: #5c2488;
    text-align: left;
    width: 950px;
    vertical-align: top;
    align: center;
    border: 0px solid #5c2488;
    }

    #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
    margin: 0em;
    padding: 0em;
    width: 950px;
    align: center;
    background-color: #f8f7fc;
    }

    #logoWrapper{
    background-image: url(http://www.joannes-digital-designs.c...eadernew.png);
    background-repeat: no-repeat;
    background-color: #f8f7fc;
    width: 950px;
    height: 379px;
    align: center;
    }

    #navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
    margin: auto;
    }

    #navColumnOneWrapper, #navColumnTwoWrapper {
    margin-left: 0.5em;
    margin-right: 0.5em;
    }

    #tagline {
    color:#000000;
    font-size: 2em;
    text-align : center;
    vertical-align: middle;
    }

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

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

    .wrapperAttribsOptions {
    margin: 0.3em 0em;
    }

    /*navigation*/

    .navSplitPagesResult {}
    .navSplitPagesLinks {}

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

    #navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
    margin: 0em;
    background-color: #f8f7fc;
    background-image: url();
    padding: 0.5em 0.2em;
    font-weight: bold;
    color: #5c2488;
    width: 945px;
    height: 1%;
    }

    #navCatTabsWrapper {
    background-color: #f8f7fc;
    color: #5c2488;
    background-image:none;
    }

    #navMain ul, #navSupp ul, #navCatTabs ul {
    margin: 0;
    padding: 0.5em 0em;
    list-style-type: none;
    text-align: center;
    line-height: 1.5em;
    }

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

    #navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    text-decoration: none;
    padding: 0em 0.5em;
    margin: 0;
    color: #5c2488;
    white-space: nowrap;
    }

    #navCatTabs ul li a {
    color: #5c2488;
    }

    #navEZPagesTOCWrapper {
    font-weight: bold;
    float: right;
    height: 1%;
    border: 0px solid #5c2488;
    }

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

    #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
    margin: 0.5em;
    }

    #navMainSearch {
    float: right;
    }

    #navBreadCrumb {
    padding: 0.5em 0.5em;
    background-color: #f8f7fc;
    font-size: 0.95em;
    font-weight: bold;
    margin: 0em;
    }

    #navEZPagesTop {
    background-color: #ede1f9;
    background-image: url();
    font-size: 0.95em;
    font-weight: bold;
    margin: 0em;
    padding: 0.5em;
    }

    #navColumnOne, #navColumnTwo {
    background-color: transparent;
    }

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

    /*.content,*/ #productDescription, .shippingEstimatorWrapper {
    /*font-size: 1.2em;*/
    padding: 0.5em;
    }

    .alert {
    color: #FF0000;
    margin-left: 0.5em;
    }
    .advisory {}
    .important {
    font-weight: bold;
    }
    .notice {}
    .rating{}
    .gvBal {
    float: right;
    }
    .centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
    padding: 0.8em;
    }

    .smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
    font-size: 0.9em;
    }

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

    .tableHeading TH {
    border-bottom: 1px solid #5c2488;
    }

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

    #cartSubTotal {
    border-top: 1px solid #cccccc;
    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 {
    color: #660099;
    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: #f8f7fc;
    border: 0px solid #5c2488;
    }
    .mediaTitle {
    float: left;
    }
    .mediaTypeLink {
    float: right;
    }

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

    .productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
    color: #ff0000;
    }

    .orderHistList {
    margin: 1em;
    padding: 0.2em 0em;
    list-style-type: none;
    }

    #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 #5c2488;
    height: 1%;
    width: 595px;
    margin: 1.1em 0;
    }

    h2.centerBoxHeading {
    font-size: 1.3em;
    background-color: #5c2488;
    color: #ede1f9;
    background-image: url();

    }

    /*sideboxes*/
    .columnLeft {}

    .blanksideboxContent textarea {
    width: 155px;
    }

    h3.leftBoxHeading, h3.leftBoxHeading a,
    h3.rightBoxHeading, h3.rightBoxHeading a {
    font-size: 1em;
    color: #5c2488;
    }
    #manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
    font-size: 0.9em;
    color: #5c2488;
    }

    .leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    margin: 0em;
    padding: 0.5em 0.2em;
    }

    .leftBoxContainer, .rightBoxContainer {
    margin: 0em;
    border: 1px solid #5c2488;
    border-top: 5px solid #5c2488;
    border-bottom: 5px solid #5c2488;
    margin-top: 1.5em;
    }

    .sideBoxContent {
    background-color: #f8f7fc;
    padding: 0.4em;
    textarea: width: 155px;
    }

    h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
    color: #5c2488;
    text-decoration: none;
    }

    .rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
    color: #5c2488;
    }


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

    #bestsellers .wrapper {
    margin: 0em 0em 0em 1.5em;
    }

    #bestsellers ol {
    padding: 0;
    margin-left: 1.1em;
    }

    #bestsellers li {
    padding: 0;
    margin: 0.3em 0em 0.3em 0em;
    }

    #bannerboxHeading {
    background-color: #5c2488;
    }

    #upProductsHeading {
    text-align: left;
    }

    #upDateHeading {
    text-align: right;
    }

    /* categories box parent and child categories */
    A.category-top, A.category-top:visited {
    color: #5c2488;
    text-decoration: none;
    }
    A.category-links, A.category-links:visited {
    color: #5c2488;
    text-decoration: none;
    }
    A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
    color: #5c2488;
    text-decoration: none;
    }
    SPAN.category-subs-parent {
    font-weight: bold;
    }
    SPAN.category-subs-selected {
    font-weight: bold;
    }
    /* end categories box links */

    /*misc*/
    .back {
    float: left;
    }

    .forward, #shoppingCartDefault #PPECbutton {
    float: right;
    }

    .bold {
    font-weight: bold;
    }

    .rowOdd {
    background-color: #ede1f9;
    height: 1.5em;
    vertical-align: top;
    }

    .rowEven {
    background-color: #f8f7fc;
    height: 1.5em;
    vertical-align: top;
    }

    .hiddenField {
    display: none;
    }
    .visibleField {
    display: inline;
    }

    CAPTION {
    /*display: none;*/
    }

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

    .accountTotalDisplay, .accountTaxDisplay {
    width: 20%;
    text-align: right;
    /*vertical-align: top*/
    }

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

    TR.tableHeading {
    background-color: #ede1f9;
    color: #5c2488
    height: 2em;
    }

    .productListing-rowheading {
    background-color: #ede1f9;
    background-image: url();
    height: 2em;
    color: #5c2488;
    }

    #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: #ffffff;
    }
    .information {padding: 10px 3px; line-height: 150%;}

    #shoppingcartBody #shippingEstimatorContent {
    clear: both;
    }

    .seDisplayedAddressLabel {
    background-color:#5c2488;
    text-align: center;
    }
    .seDisplayedAddressInfo {
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    }
    #seShipTo {
    padding: 0.2em;
    }

  6. #6
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Help with Shopping Cart Sidebox Overflow

    Posting your stylesheet is the hard way to work. It took a bit of finagling, but I got to your site using info from your background-image paths, and this is what I found:
    stylesheet.css (line 195)
    Code:
    #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
        background-color: #F8F7FC;
        margin: 0;
        padding: 0;
        width: 950px;
    }
    You have set all of these elements to 950px width. Any time you want to change one item that is in a selector list, consider whether the rest will be good with that, and if not, separate that item into its own rule.

  7. #7
    Join Date
    Jul 2009
    Posts
    110
    Plugin Contributions
    0

    Default Re: Help with Shopping Cart Sidebox Overflow

    Thanks so much, I fixed it, and now it's fine

    Joanne

    Here's a link to my store: http://www.joannes-digital-designs.com

 

 

Similar Threads

  1. Replies: 2
    Last Post: 7 Oct 2009, 05:33 AM
  2. Help! replace Information/Shopping cart sidebox header with Images
    By missinglife in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 1 Oct 2009, 01:26 AM
  3. shopping cart sidebox with checkout button only when cart is full
    By sunnydaydreame in forum Basic Configuration
    Replies: 0
    Last Post: 5 Feb 2008, 12:52 AM
  4. Shopping Cart with Image Sidebox
    By PGlad in forum Addon Sideboxes
    Replies: 3
    Last Post: 29 Jan 2008, 08:51 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR