Results 1 to 3 of 3
  1. #1
    Join Date
    Sep 2007
    Posts
    39
    Plugin Contributions
    0

    Default layout help needed, including some IE/FF issues

    ok first id like to say that the community here is excellent and i thank you all for your help and time..(probably the best experience ive ever had on a forum and that even includes with paid scripts...Awesome!)

    aside from the fact that zen cart is absolutely excellent... and well written .. cheere to the zen cart team!


    so heres my little problem
    ecanyoncreek.com

    if you look in ie 7 it looks great!

    but if you could take a look with fire fox and or ie6 or older..

    you'll see that on these other browsers/versions the header is seperated largely from the body.

    also one more reson for me to bang my head on my keyboard is the excessive nav bars in the body of the page

    i like this one "Home :: Candles :: Candle 1 "

    but if you click the category "candles"

    youll see the addition of "Home :: Candles :: Candle 1
    Candles
    "
    under this..which is kind of over kill and i think it pushes the page down

    also id like the side nav on the left in the invisible box to be aligned top but in my css. it looks as they are all set to "verticle-align:top".. i may have missed one so whats that under in the stylesheet or is there something else keeping it spaced down in the page..


    thx in advance..

  2. #2
    Join Date
    Sep 2007
    Posts
    39
    Plugin Contributions
    0

    Default Re: please help!

    heres my .css maybe this will help! :)
    Code:
    body {
    	margin: 0;
    	padding: 0;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 62.5%;
    	color: #000000;
    	background: #fff url(../images/bg_011.jpg);
    	text-align:left;
    	}
    
    a img {border: none; }
    
    a:link {
    	color: #0066FF;
    	text-decoration: none;
    	}
     
    a:visited {
    	color: #0066FF;
    	text-decoration: none;
    	}
    
    a:hover, #navCatTabs ul li a:hover {
    	color: #00CCFF;
    	}
    #navMain ul li a:hover {
    	color: #ffffff; 
       text-decoration: none;	
    }
    #navSupp ul li a:hover {
    	color: #ffffff;
    	}
    
    a:active {
    	color: #0000FF;
    	}
    
    h1 {
    	font-size: 1.5em;
    	color: #9a9a9a;
    	}
    
    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;Padding:0;
    	}
    
    CODE {
    	font-family: arial, verdana, helvetica, sans-serif;
    	font-size: 1em;
    	}
    
    FORM {
    	display: inline;
    	font-size: 1em;
    	margin: 0;
    	}
    
    input {border:1px solid #B6ABD5; background:#fff;}
    	
    	
    TEXTAREA {
    	float: left;
    	margin: auto;
    	display: block;
    	width: 850px;
    	}
    
    input:focus, textarea:focus {
    	background: #fff;
    	}
    
    FIELDSET {
    	padding: 0.5em;
    	margin: 0.5em 0em;
    	border: 1px solid #cccccc;
    	}
    
    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;
    	}
    	
    select {margin: 0;background:#fff;}
    select:focus {
    	background: #fff;
    	}		
    option {background:#fff; color:navy;}
    optgroup {background:#fff; color:navy; font-family:georgia, serif;}
    optgroup option {background:#fff; color:navy;}
    
    .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    	float: left;
    	}
    #logo {
    	float: left;
    	}
    LABEL.inputLabel {
    	width: 10em;
    	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 #9a9a9a;
    	}
    
    /*warnings, errors, messages*/
    .messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
    	line-height: 1.8em;
    	padding: 0.2em;
    	border: 1px solid #9a9a9a;
    	}
    
    .messageStackWarning, .messageStackError {
    	background-color: #ff0000;
    	color: #ffffff;
    	}
    
    .messageStackSuccess {
    	background-color: #99FF99;
    	color: #000000;
    	}
    
    .messageStackCaution {
    	background-color: #FFFF66;
    	color: #000000;
    	}
    
    /*wrappers - page or section containers*/
    #mainWrapper {
    	margin: auto;
    	background-color: #FFFFCC;
    	text-align: left;
    	width: 850px;
    	vertical-align: top;
    	}
    
    #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, , #popupAdditionalImage, #popupImage {
    	margin: 0em;
    	padding: 0em;
    	}
        
    #contentMainWrapper {
    	margin: 0 auto;
    	padding: 0;
    	width: 850px;
    	background-color: #FFFFFF;	
    	border: solid ;
    	border: #512000;
    } 	
    	
    #headerWrapper {
    	background-color: transparent;	
    }	
    	
    #logoWrapper{
    	margin: 0;
    	padding: 0;
    	height:70px;
    	}
     
    #navColumnOneWrapper {
    	margin: 0 0.5em;
    	padding: 120px 0 0 0;
    	}
    #navColumnTwoWrapper {
    	margin: 0 0.5em;
    	}
    #taglineWrapper {
    	margin:0;
    	padding:20px 0 0 200px;
    	vertical-align: middle;
    	color:#000;
    }
    #tagline {
    	/*color:#fff;*/
    	font-size: 1.3em;
    	font-weight: 400;
    	/*text-align : center;
    	vertical-align: bottom;*/
    	}
    
    #sendSpendWrapper {
    	border: 1px solid #cacaca;
    	float: right;
    	margin: 0em 0em 1em 1em;
    	}
    
    .floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto {
    	margin: 0;
    	width: 47%;
    	}
    
    .wrapperAttribsOptions {
    	margin: 0.3em 0em;
    	}
    
    /*navigation*/
    .navNextPrevWrapper{padding: 10px 0;}
    .navSplitPagesResult {padding: 5px 0;}
    .navSplitPagesLinks {}
    .navNextPrevCounter {
    	padding: 5px 0;
    	font-size: 0.9em;
    	}
    .navNextPrevList {
    	display: inline;
    	white-space: nowrap;
    	padding: 5px 5px 10px 5px;
    	list-style-type: none;
    	}
    
    #navMainWrapper {
    	margin: 0em;
    	padding: 0 0.2em;
    	background-color: transparent;
    	font-weight: bold;
    	color: #FFCC00;
    	height: 1%;
    	vertical-align: middle;
    	font-size:1.4em;
    }
    #navCatTabsWrapper {
    	margin: 0em;
    	padding: 0 0.2em;
    	background-color: #512000;
    	font-weight: bold; color:#FFFFFF;
    	height: 1%;
    	vertical-align: middle;
    	font-size:1.2em;
    }
    #navSuppWrapper {
    	margin: 0em;
    	padding: 0 0.2em;
    	background-color: transparent;
    	font-weight: bold;
    	color: #000;
    	height: 1%;
    	vertical-align: middle;
    	font-size:.9em;
    }
    
    #navCatTabs ul {
    	margin: 0;
    	padding: 0m;
    	list-style-type: none;
    	text-align: center;
    	line-height: 1.5em;
    	vertical-align: middle;
    }
    
    #navMain ul {
    	margin: 0;
    	padding: 0.5em 0 0 300px;
    	list-style-type: none;
    	text-align: center;
    	line-height: 1.5em;
    	vertical-align: middle;
    }
    #navSupp ul {
    	margin: 0;
    	padding: 0.5em 0em;
    	list-style-type: none;
    	text-align: center;
    	line-height: 1.5em;
    	vertical-align: middle;
    }
    	
    #navMain ul li, #navSupp ul li, #navCatTabs ul li {
    	display: inline;
    	}
    	
    #navMain ul li a {
    	margin: 0;
    	padding: 0em 0.5em;
    	text-decoration: none;
    	background: #ccc;
    	color: #000;
    	white-space: nowrap;
    	}
    	
    #navMain ul li a:hover {
    	text-decoration: none;
    	background: #ccc;
    	color: #fff;
    	}
    	
    #navSupp ul li a, #navCatTabs ul li a {
    	text-decoration: none;
    	padding: 0em 0.5em;
    	margin: 0;
    	color: #ffffff;
    	white-space: nowrap;
    	}
    
    #navSupp ul li :hover, #navCatTabs ul li a:hover {
    	text-decoration: none;
    	color: navy;
    	}
    		
    #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;
    	}
    
    #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
    	margin: 0.5em;
    	}
    
    #navMainSearch {
    margin: 0;
    padding: 8px 3px 9px 5px;
    	float: right;
       background: transparent;
       display:none;
    	}
    #navMainSearch input {
    	margin: 0;
    	display: inline;
    	font-size: 1em;
    	}
    	
    #navBreadCrumb {
    	padding: 0.5em 8px;
    	background-color: transparent;
    	font-size: 0.95em;
    	font-weight: 700;
    	margin: 16px 10px 5px 10px;
    	}
    
    #navEZPagesTop {
    	margin: 0em;
    	padding: 0.5em;
    	background-color: transparent;
    	font-size: 1.2em;
    	font-weight: bold;
    	color: #000;
    	text-align: right;
    }
    	
    #navEZPagesTop a {
    text-decoration: none;
    color: #787878;
    	}	
    #navEZPagesTop a:hover {
    text-decoration: none;
    color: navy;
    	}
    #navColumnOne {
    	vertical-align: top;
    	padding: 0 0 5px 0;
    	}
    #navColumnTwo {
    	vertical-align: top;
    	padding: 0 0 5px 0;
    	}
    /*The main content classes*/
    #contentColumnMain, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
    	vertical-align: top;
    	background-color:#FFFFFF
    	}
    
    /*.content,*/ #productDescription, .shippingEstimatorWrapper {
    	/*font-size: 1.2em;*/
    	padding: 0.5em;
    	background-color:#FFFFFF
    	}
    
    .italic {
    	font-style: italic;
    }	
    	
    .alert {
    	color: #FF0000;
    	margin-left: 0.5em;
    	}
    .advisory {}
    .important {
    	font-weight: bold;
    	}
    .notice {}
    .rating{}
    .gvBal {
    	float: right;
    	}
    #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
    	padding: 0.8em;
    	}
    .centerColumn{
    	padding: 0.8em;
    font-size:1.2em;
    	background-color: transparent;	
    }	
    
    .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 #9a9a9a;
    	background-color: navy;
    }
    
    .tableHeading, #cartSubTotal {
    	background-color: #CEDBF2;
    	}
    
    #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: #E4FEf5;
    	border: 1px solid #003D00;
    	}
    
    .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 #9a9a9a;
    	height: 1%;
    	margin: 1.1em 0;
    	width: %100;
    	}
    
    h2.centerBoxHeading {
    	font-size: 1.3em;
    	color: navy;
    	}
    
    /*sideboxes*/
    .columnLeft {}
    
    h3.leftBoxHeading, h3.leftBoxHeading a,
    h3.rightBoxHeading, h3.rightBoxHeading a {
    	color: navy;
    	}
    h3#manufacturersHeading, h3#currenciesHeading, h3#musicgenresHeading, h3#recordcompaniesHeading, h3#searchHeading, h3#search-headerHeading {
    	color: navy;
    }
    
    .leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    	margin: 0em;
    	padding:.3em .2em;
    	}
    .leftBoxHeading, .rightBoxHeading {
    background: transparent;
    color: navy;
    	}	
    .leftBoxContainer, .rightBoxContainer {
    	margin: 0em;
    	border: 1px solid #000;
    	border-width: 0 0 2px 0;
    	margin-top: 1.5em;
    	}
    
    .sideBoxContent {
    	background-color: transparent;
    	padding: 0.4em;
    	}
    	
    .sideBoxContent a:hover {
    	text-decoration: none;
    	color: #B6ABD5;
    	}
    a.sideBoxContent a {
    	text-decoration: none;
    	color: navy;
    	}		
    
    h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
    	color: #FFFF33;
    	text-decoration: none;
    	} 
    
    .rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
    	color: #FFFFFF;
    	}
    
    .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, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
    	text-align: center;
    	}
    #navEZPageNextPrev {
    	padding: 10px 0;
    }
    #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: transparent;
    	color: navy;
    }
    
    #upProductsHeading {
    	text-align: left;
    	}
    
    #upDateHeading {
    	text-align: right;
    	}
    
    /* categories box parent and child categories */
    a.category-top, a.category-top:visited {
    	color: navy;
    	text-decoration: none;
    	font-size:1em;
    	}
    a.category-links, a.category-links:visited {
    	color: navy;
    	text-decoration: none;
    	}
    a.category-subs, a.category-products, a.category-subs:visited, a.category-products:visited {
    	color: navy;
    	text-decoration: none;
    	}
    SPAN.category-subs-parent {
    	font-weight: bold;
    	}
    SPAN.category-subs-selected {
    	font-weight: bold;
    	}
    	
    category-top a:hover, category-links a:hover, category-subs a:hover, category-products a:hover {
    	text-decoration: none;
    	color: #B6ABD5; 
    }	
    /* end categories box links */
    
    /*misc*/
    .back {
    	float: left;
    	}
    
    .forward, #shoppingCartDefault #PPECbutton {
    	float: right;
    	}
    
    .bold {
    	font-weight: bold;
    	}
    
    .rowOdd {
    	background-color: #E8E8E8;
    	height: 1.5em;
    	vertical-align: top;
    	}
    
    .rowEven {
    	background-color: #F0F0F0;
    	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: #cacaca;
    	height: 2em;
    	}
    
    tr.productListing-rowheading,.tableHeading{background:#B6ABD5;font-size:1em;text-align:center;color:navy;height:24px;margin:0;padding:.5em 0.2em;}
    tr.productListing-rowheading a,.productListing-heading a,.tableHeading a{background:transparent;color:navy;}
    .productListing-heading{font-weight:700;font-size:1em;}
    #productListing{background-color: #F9F7F3;}
    .productListing-even .productListing-data,.productListing-even .linkListing-data{padding:5px 0;font-size:1em;background:#F9F4EC;color:#000;}
    .productListing-odd .productListing-data,.productListing-odd .linkListing-data{padding:5px 0;font-size:1em;color:#000;background:#F9F7F3;}
    .productListing-even {font-size:1em;background:#F9F4EC;color:#000;}
    .productListing-odd {font-size:1em;color:#000;background:#F9F7F3;}
    .itemTitle{font-size:1.1em;font-weight:700;text-align:left;padding:0 0 0 3px;}
    .listingDescription{text-align:left;clear:left;padding:0 0 0 3px;}
    
    .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;
    	}

  3. #3
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,369
    Plugin Contributions
    0

    Default Re: layout help needed, including some IE/FF issues

    I can maybe get you started...

    i like this one "Home :: Candles :: Candle 1 "
    but if you click the category "candles"

    youll see the addition of "Home :: Candles :: Candle 1
    Candles

    under this..which is kind of over kill and i think it pushes the page down
    You have Categories-Tabs Menu turned on, which duplicates your categories in a row across the top of the page. Then you also have Breadcrumbs turned on, which is giving you that extra line of links below the category tabs. I too found that to be a bit much so I turned off the category tabs. You might want to try that, since you've got all the categories in their left sidebox anyway. You can find these settings in admin/configuration/layout settings.

    HTH

    Rob
    Breakfast: the most important donut of the day.

 

 

Similar Threads

  1. Replies: 11
    Last Post: 22 Nov 2006, 08:27 PM
  2. Email SMTP issues (needed 'smtpauth' instead of 'smtp')
    By petpromises in forum General Questions
    Replies: 23
    Last Post: 8 Nov 2006, 01:48 PM
  3. CSS advice needed: "clearBoth" div breaking my layout?
    By squidliberty in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 12 Jul 2006, 05:27 PM
  4. Issues - differences in IE & Firefox - help needed
    By woodlandsprite in forum General Questions
    Replies: 0
    Last Post: 23 May 2006, 06:46 PM

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
  •