Tidying up messy css.

Hi guys,

I'm trying to edit my css files so that the side boxes on the left look cleaner or at least allow the writing to fit. unfortunately I have no idea what em means or looks like in terms of size unlike px.

The site i'm trying to edit is https://www.modderzwarehouse.com so you can see what the issue is.

The css is listed below.

body {margin: 0;font-family: verdana, arial, helvetica, sans-serif;font-size: 62.5%;color: #888787;background: #6a6b6f url(../images/bk.jpg) repeat center top;}

/*bof basic elements*/
a img {border: none;}
a:link, #navEZPagesTOC ul li a {color: #444443;text-decoration: none;}
a:visited {color: #444443;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: #dfba68;}
a:active {color: #444443;}
h1 {font-size: 1.5em;}
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;}
.clearBoth {clear: both;}
HR {height: 1px;margin-top: 0.5em;border: none;border-bottom: 1px solid #9a9a9a;}
h1, h2, h3, h4, h5, h6 {margin: 0.3em 3px;}

/*bof form elements*/
CODE {font-family: arial, verdana, helvetica, sans-serif;font-size: 1em;}
FORM, SELECT, INPUT {display: inline;font-size: 1em;margin: 0.1em;}
TEXTAREA {/*float: left;*/margin: auto;display: block;width: 95%;}
input:focus, select:focus, textarea:focus {background: #fffedf;}
FIELDSET {padding: 0.5em;margin: 0.5em 0em;border: 1px solid #ccc;}
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;}
LABEL.inputLabel {width: 11em;float: left;}
LABEL.inputLabelPayment {width: 15em;float: left;}
LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {width: 12em;float: left;}
P, ADDRESS {padding: 0.5em;}
ADDRESS {font-style: normal;}

/*bof warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {line-height: 1.8em;padding: 0.2em;border: 1px solid #000;}
.messageStackWarning, .messageStackError {background-color: #ff0000;color: #fff;}
.messageStackSuccess {background-color: #99FF99;color: #000;}
.messageStackCaution {background-color: #ffff66;color: #000;}

/*bof wrappers - page or section containers*/
#mainWrapper {background: transparent;text-align: left;width: 950px;vertical-align: top;position:relative; top:0px;}
#contentMainWrapper {background-color:#fff;}
#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, 

#popupImage {margin: 0em;padding: 0em;}
#navColumnOneWrapper, #navColumnTwoWrapper {} 
#mainWrapper {margin: auto;}
#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {float: left;}
#tagline {color:#b5b5b6;font-size: 1.65em;text-align :left;vertical-align:bottom;margin-left:10px;margin-bottom:25px;}
#logo {padding-top:15px;padding-left:15px;}
#sendSpendWrapper {border: 1px solid #cacaca;float: right;margin: 0em 0em 1em 1em;}
.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {margin: 0;width: 47%;}
.wrapperAttribsOptions {margin: 0.3em 0em;}

/*bof 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;}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {margin: 0.5em;}
#navBreadCrumb {background-color: #fff;margin-top:15px;margin-left:10px;}

/*bof header*/
#headerWrapper {background-color:#101010;margin-top:0px;}
#header-curr-lang {float:right;margin-top:50px;color:#b5b5b6;}
#header-curr-lang img{vertical-align:middle;} 
#currency_header {float:right;margin-right:35px;margin-top:3px;}
#lang_header {float:right;margin-right:15px;margin-top:5px;}
.header-checkout {color:#fffede;font-weight:normal;}
.header-checkout:hover {color:#dfba68;}
#navMainWrapper {margin: 0em;font-weight: normal;color: #fffede;background-image:url(../images/top-nav-bk.jpg);height: 54px;width: 950px;}
#navMain ul  {margin: 0;padding:  0.5em 0em;list-style-type: none;text-align: center;line-height: 1.5em;margin-left:15px;margin-top:7px;font-size:130%;}
#navMain ul li {display: inline;}
#navMain ul li a {text-decoration: none;padding: 0em 0.5em;margin: 0;color: #fffede;white-space: nowrap;}
#navMain ul li a:hover{color:#dfba68;} 
#navCatTabsWrapper {margin: 0em;background-color: #fff;font-weight: bold;color: #181818;height: 1%;width: 100%;display:none;}
#navCatTabs ul  {margin: 0;padding:  0.5em 0em;list-style-type: none;text-align: center;line-height: 1.5em;}
#navCatTabs ul li {display: inline;}
#navCatTabs ul li a {text-decoration: none;padding: 0em 0.5em;margin: 0;color: #181818;white-space: nowrap;}
#navEZPagesTop {background-color: #fff;display:none;}
#navEZPagesTop {font-size: 0.95em;font-weight: bold;margin: 0em;padding: 0.5em;color:#181818;}
#navEZPagesTop a{color:#181818;}
#navEZPagesTop a:hover {color:#67cadf;}
#navMainSearch {float: right;padding-top:15px;margin-right:20px;}
#navMainSearch input[type=image]{margin-top:-10px;vertical-align:bottom;}
.search-header-button {vertical-align:middle;}
.search-header-box {border:1px solid #000;width:100px;height:18px;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.cart-image {vertical-align:middle;}

/*bof ezpages*/
#navEZPagesTOCWrapper {font-weight: bold;float: right;height: 1%;border: 1px solid #000;}
#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;}

/*bof the main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, 

.centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {vertical-align: top;}
/*.content,*/ #productDescription, .shippingEstimatorWrapper {/*font-size: 1.2em;*/padding: 0.5em;}
.alert {color: #ff0001;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;}

/*bof shopping cart display*/
#cartContentsDisplay {border-left:1px solid #dfdfe7;border-right:1px solid #dfdfe7;border-top:0px solid #dfdfe7;}
#cartContentsDisplay td{border-bottom:1px dashed #ccc;padding-top:15px;}
.cartQuantity input{margin-left:15px;}
.rowOdd {background-color: #fff;height: 1.5em;vertical-align: top;}
.rowEven {background-color: #fff;height: 1.5em;vertical-align: top;}
.tableHeading TH {background-color:#101010;height:30px;color:#fffedf;}
.cartTableHeading{background-color:#101010;height:30px;color:#fffedf;}
.tableHeading, #cartSubTotal {background-color: #101010;height:30px;color:#fffedf;}
#cartSubTotal {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: #444443;position: relative;  /*do not remove-fixes stupid IEbug*/}
.cartOldItem {color: #444443;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;}
.mediaTitle {float: left;}
.mediaTypeLink {float: right;}
.normalprice, .productSpecialPriceSale {text-decoration: line-through;}
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {color: #ff0001;}
.orderHistList {margin: 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;}

/*bof image display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {margin: 0em 1em 1em 0em;}
.categoryIcon {}
#cartImage {margin: 0.5em 1em;}

/*bof attributes*/
.attribImg {width: 20%;margin: 0.3em 0em;}
.attributesComments {}

/*bof list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, 

.centerBoxContentsFeatured, .centerBoxContentsNew {margin: 1em 0em;}

/*bof sideboxes*/
#navColumnOne {background-color: #fff;padding-bottom:20px;}
#navColumnTwo {background-color: #fff;padding-right:10px;}
.columnLeft {}
h3.leftBoxHeading, h3.rightBoxHeading {font-size: 1.3em;color: #fffede;/*padding-top:15px;*/font-weight:normal;}
h3.leftBoxHeading a, h3.rightBoxHeading a{font-size: 1.0em;color: #fffede;}
.leftBoxHeading, .rightBoxHeading {margin: 0em;background-image: url(../images/sidebox-header.jpg);background-repeat:no-repeat;padding: 0.5em 20em;color:#fffede;}
.centerBoxHeading{/*background-image: url(../images/center-bk.jpg);background-repeat:no-repeat;*/color:#5a2e2e;font-weight:bold;padding: 0.5em 0.2em;padding-

left:15px;margin-bottom:0px;border-bottom:2px dotted #b5b5b5;font-size:150%;}

.centerBoxWrapperContents{border:0px solid #b5b5b5;padding-top:0px;}
#musicgenresHeading, #recordcompaniesHeading, #searchHeading, #manufacturersHeading, #currenciesHeading{padding-top:0px;}
.leftBoxContainer, .rightBoxContainer {border: 1px solid #fff;margin-top: 1.5em;margin-left:3px;}
.sideBoxContent {background-color: #fff;padding: 0.4em;padding-top:0px;border:0px solid #e1e1e9;border-left:1px solid #b5b5b5;border-right:1px solid #b5b5b5;border-

bottom:1px solid #b5b5b5;padding-top:10px;}
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {color: #444443;text-decoration: none;} 
/*.rightBoxContent {background-color: #fff;margin-bottom: 1em;}*/
#catBoxDivider {display:none;}
#whatsnew, #featured, #specials {font-size:100%;font-weight:normal;color:#444443;}
#whatsnew a, #featured a, #specials a{font-size:100%;font-weight:normal;color:#444443;}
#specialsHeading a, #whatsnewHeading a, #featuredHeading a {color:#fffede;}
#specialsHeading a:hover, #whatsnewHeading a:hover, #featuredHeading a:hover {color:#e2efd0;}
#shoppingcartHeading {font-size:1.1em;}
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  

#bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, 

.cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .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: #fff;}
#upProductsHeading {text-align: left;}
#upDateHeading {text-align: right;}

/*bof misc*/
.back {float: left;}
.forward, #shoppingCartDefault #PPECbutton {float: right;}
.bold {font-weight: bold;}
.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;}
#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: #fff;}
.information {padding: 10px 3px; line-height: 150%;}
#shoppingcartBody #shippingEstimatorContent {clear: both;}
.seDisplayedAddressLabel {background-color:#e2efd1;text-align: center;}
.seDisplayedAddressInfo {text-transform: uppercase;text-align: center;font-weight: bold;}
#seShipTo {padding: 0.2em;}

/*bof center boxes*/
.product_title {font-size:110%;font-weight:bold;}
.product_title a{color:#918f8f;}
.product_title a:hover{color:#dfba68;} 
.product_detail {margin-top:10px;}
.price {font-size:110%;font-weight:bold;color:#000;}
.normalprice {font-size:90%;}
.productSpecialPrice {font-size:90%;}

/*bof easy slider*/
#slider{margin:0 auto;}
#slider ul, #slider li,	#slider2 ul, #slider2 li{margin:0;padding:0;list-style:none;}
#slider2{margin-top:1em;}
#slider li, #slider2 li{/*define width and height of list item (slide) entire slider area will adjust according to the parameters provided here	

*/width:550px;height:302px;overflow:hidden;}	
#slider{margin:0 auto;}
/*bof easy slider numeric controls*/	
#control_div{width:200px;height:18px;position:relative;left:380px;top:0px;margin-bottom:10px;}
ol#controls{margin:1em 0;padding:0;height:18px;}
ol#controls li{margin:0 10px 0 0;padding:0;float:left;list-style:none;height:18px;line-height:18px;}
ol#controls li a{float:left;height:18px;line-height:18px;border:1px solid #ccc;background:#101010;color:#fffedf;padding:0 10px;text-decoration:none;}
ol#controls li.current a{background:#dfba69;color:#444;}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

#home-images{margin-top:25px;}
#home-text{font-size:120%;width:550px;}
.promote{margin-left:70px;}

/*bof product listing*/
.listingDescription {text-align:left;}
.productListing-even {border:1px dashed #ccc;}
.productListing-rowheading {color:#fffedf;background-color:#444;height:30px;}
.productListing-rowheading a{color:#fffede;}
.productListing-rowheading a:hover{color:#dfba68;}
#productsListingTopNumber {margin-top:15px;margin-bottom:15px;}
#productsListingBottomNumber {margin-top:15px;margin-bottom:15px;}
#productListHeading {margin-bottom:15px;color:#5a2e2e;}
.tabTable {border-left:1px solid #dfdfe7;border-right:1px solid #dfdfe7;}
.productListing-data {border-bottom:1px dashed #ccc;}

/*bof product info*/
#cartAdd {text-align: center;margin: 0em;border: 0px solid #000;padding: 0em;}
#product-divider {border-bottom:1px dashed #ccc;margin-top:20px;}
.navNextPrevWrapper {text-align:center;}
.navNextPrevCounter {text-align:center;}
#productDescription {color:#444;}
#productName {color:#444;font-weight:normal;font-size:2.0em;}
#productDetailsList {color:#444;margin-top:10px;margin-bottom:10px;}
#productAttributes {}
#attribsOptionsText {font-weight:normal;color:#444;}
.optionName {color:#444;margin-top:0px;} 
#alsoPurchased {margin-top:20px;}
#productPrices{text-align:center;}
#p-left{float:left;}
#p-right{float:left;}
#cart{border:1px solid #e1e1e9;width:100%;padding:20px;background:#f5f5f7;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}


/*bof monthly boxes*/
.box_image {margin-top:15px;margin-bottom:15px;}

/*bof turn off breadcrumbs on home page*/
body#indexHomeBody #navBreadCrumb{display:none;}

if anyone can help me make this look right that would be most appreciated. my ideal width would be around 300px i think. I'm aware that i may need to change the image sizes that's not an issue.

Thanks in advance

vvomble:

Hi guys,

I'm trying to edit my css files so that the side boxes on the left look cleaner or at least allow the writing to fit. unfortunately I have no idea what em means or looks like in terms of size unlike px.

"EM" and "EN" are printers' terminology and relate to the width of the letter " M " (em), and " N " (en).

The widths are therefore RELATIVE to the size of the font.

The advantage of using these is that widths and sizes SCALE with an increase or decrease in the governing (parent) font size, thus retaining visual integrity if the font is made bigger or smaller - whereas PX is FIXED.

There is no rule that says you can't change your size parameters from EM to PX if you want to. I do it often.

right so which bit do i need to edit to get it to fit?

You don't edit the CSS.

ADMIN CONSOLE >>> CONFIGURATION >>> LAYOUT SETTINGS...

Column Width - Left Boxes (set the desired width in PX)
... and a bit further down...
Column Width - Left (set the desired width in PX - I usually keep it the same as the Left Boxes)

Bad idea to use uppercase wording on a website - google regards this as "shouting" and severely penalises you for seo...

Use firefox browser, then go get the FIREBUG plugin. This enables offline page analysis, so you can then easily identify the components of a page and test out CSS (and other) changes, before committing these changes to a live site.

Your HEADER is also ridiculously BIG... It uses up important "above-the-fold" space that is better served showcasing PRODUCT.

Nobody cares how "proud" you are of your massive logo ( or ego :D) so reduce it by at least 80% and give the space over to product pictures and descriptions.

AMAZON'S site logo is just 30 pixels tall...

If you don't want a RIGHT COLUMN, switch it OFF in Admin Console...

ADMIN CONSOLE >>> CONFIGURATION >>> LAYOUT SETTINGS...
Column Right Status - Global = set to ZERO

stylesheet_betterCategoriesEzInfo.css, around line 12:```
.betterCategories a, .betterCategories a:visited,
.betterDocuments a, .betterDocuments a:visited,
.betterEzpages a, .betterEzpages a:visited,
.betterInformation a, .betterInformation a:visited,
.betterMoreinformation a, .betterMoreinformation a:visited,
.betterBestsellers a, .betterBestsellers a:visited {
display: block;
background-color: #fffffe;
border-top: 2px solid #ffffff;
border-bottom:2px dotted #b5b5b5;
padding: 4px;
font-size: 0.9em;

}

I think this is the wrong issue to solve, however; making the text smaller makes it harder to read. You do not appear to be using the right sideboxes at all, and if you turn off the right sidebar, you can make the left sidebar wider without sacrificing font size or main content area.
Admin > Configuration > Layout Settings > 
Column Right Status - Global
Column Left Width
Column Left Boxes Width.

Just looking at your site gives me a headache. Smaller header is ideal.

I know what you are saying however the point of the large banner allows me to showcase 3 of my products and the large banner has also got me extra custom because people want the cars in game, which featured in the banner.

I've found it in the config now so will play about with it once the sales die down for the night.

thanks for all your help guys

The large logo on the homepage is fine, to hook visitors. But after they have decided to navigate around your site, make it easier on them (anyone without a massive monitor) and switch to a smaller logo for internal navigation so they don't have to scroll down to see any content on every new page. This will involve some relatively minor coding and stylesheet work.

gjh42:

The large logo on the homepage is fine, to hook visitors. But after they have decided to navigate around your site, make it easier on them (anyone without a massive monitor) and switch to a smaller logo for internal navigation...

Glenn is much more polite than the rest of us, but I have to disagree with him on this point.

Huge amounts of research have been done on what is known as the UX (User Experience), CI's (Customer Insights), Funneling, Channeling and "Enticement".

Landing pages (including the Home Page), should be structured to meet the visitor's principal expectation. Most people will have arrived at your site because of a specific search on a search engine - so they expect to be able to get to what they searched for extremely quickly and efficiently. If it takes THREE CLICKS and a scroll on YOUR site, and TWO CLICKS on a competitor's site, then the competitor site is TWICE AS EFFICIENT as yours, and is more than THREE TIMES more likely to get the sale - even if your prices are lower!

Your home page is extremely unfriendly:

No refunds are given for users who purchase and use the excuse "I did not know I needed a USB memory stick" You will simply be advised to purchase a memory stick. Any user applying for a refund will have their refund refused unless otherwise agreed.

and

*

One of the biggest questions you guys will ask is: "Will I get banned for using this service?"

ANSWER: While you are technically breaking the rules of the game by adding or modding these features. If you have common sense you won't get banned.

You punish and scold your visitors, call them idiots basically, and then add some final insults for good measure - before they've even had a chance to see what you are selling!

Hey... would I ever try buy anything from you?

Not a chance in ten trillion ! :no:

I guess you'd have to understand the needs of my clientele, they are looking for a site that won't get them banned first and foremost if you can't offer that they won't buy. Basically yes it's worded for idiots, that's because most but not all of my clients are idiots. If it's not in plain English they don't understand it. if it is in plain English they still don't understand it and if it's written in plain English and as bold as the midday sun, they'll still get it wrong. It's taken years of dealing with people in this line of work and my expectations were high at first. All hope has now left me. My site is party of a very small market. Some of my products I am the only site that is able to offer them as yet. While this site is new my former site dealt with this customer range for a number of years.

My customers don't just buy when they come to the site they come on, look, think, go away, come back, look, think go away again and then come back. The reason it's successful comes down to pretty pictures and price essentially.

Don't worry i get that i sound like a d**k when typing this and while i understand what you guys are trying to tell me is right for 99% of websites I've been down those routes in the past and they don't work for this kind of business. Forza mods have been my baby for some time. However the reason for closing my old site down in favor of this one is to allow me to offer a wider range of products at a later date where as my old URL was too forza specific.

Thanks again for your help, comments, advice and other insights.

vvomble:

I guess you'd have to understand the needs of my clientele, they are looking for a site that won't get them banned first and foremost if you can't offer that they won't buy. Basically yes it's worded for idiots, that's because most but not all of my clients are idiots. If it's not in plain English they don't understand it. if it is in plain English they still don't understand it and if it's written in plain English and as bold as the midday sun, they'll still get it wrong. It's taken years of dealing with people in this line of work and my expectations were high at first. All hope has now left me. My site is party of a very small market. Some of my products I am the only site that is able to offer them as yet. While this site is new my former site dealt with this customer range for a number of years.

My customers don't just buy when they come to the site they come on, look, think, go away, come back, look, think go away again and then come back. The reason it's successful comes down to pretty pictures and price essentially.

Don't worry i get that i sound like a d**k when typing this and while i understand what you guys are trying to tell me is right for 99% of websites I've been down those routes in the past and they don't work for this kind of business. Forza mods have been my baby for some time. However the reason for closing my old site down in favor of this one is to allow me to offer a wider range of products at a later date where as my old URL was too forza specific.

Thanks again for your help, comments, advice and other insights.

Yes I suppose it's mostly us not understanding what you are selling (I have absolutely no idea - even when reading your site) and as long as you are giving your "idiots" what they are after, I suppose it works.

The principles of online selling are, as I have said, very well researched, so it would be very interesting to see that if you made your site more User Friendly, whether that would attract a larger number of customers.

I've always changed the designs on my sites from time to time but I always get better results from big visuals. I get that it has been researched but I very much doubt that it's been tested in a way that matches every industry, every type of client and especially not the line of work i'm in as it's more of a specialist product.

... so please bare with us ...

dw08gm:

... so please bare with us ...

I have no intention of stripping down on this issue :D (I doubt anyone would bear it).

It'll be easier for you to proceed with a properly formatted stylesheet.

This is what your page will look like using your first thread. I'm using BBedit.

body
{
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #888787;
background: #6a6b6f url(../images/bk.jpg) repeat center top;
}

/bof basic elements/
a img { border: none; }

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

a:visited
{
color: #444443;
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: #dfba68; }
a:active { color: #444443; }
h1 { font-size: 1.5em; }
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; }
.clearBoth { clear: both; }

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

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

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

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

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

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

FIELDSET
{
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #ccc;
}

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

LABEL.inputLabel
{
width: 11em;
float: left;
}

LABEL.inputLabelPayment
{
width: 15em;
float: left;
}

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

P, ADDRESS { padding: 0.5em; }
ADDRESS { font-style: normal; }

/bof warnings, errors, messages/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution
{
line-height: 1.8em;
padding: 0.2em;
border: 1px solid #000;
}

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

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

.messageStackCaution
{
background-color: #ffff66;
color: #000;
}

/bof wrappers - page or section containers/
#mainWrapper
{
background: transparent;
text-align: left;
width: 950px;
vertical-align: top;
position: relative;
top: 0px;
}

#contentMainWrapper { background-color: #fff; }

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage,

#popupImage
{
margin: 0em;
padding: 0em;
}

#navColumnOneWrapper, #navColumnTwoWrapper { }
#mainWrapper { margin: auto; }
#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg { float: left; }

#tagline
{
color: #b5b5b6;
font-size: 1.65em;
text-align: left;
vertical-align: bottom;
margin-left: 10px;
margin-bottom: 25px;
}

#logo
{
padding-top: 15px;
padding-left: 15px;
}

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

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

.wrapperAttribsOptions { margin: 0.3em 0em; }

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

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

#navBreadCrumb
{
background-color: #fff;
margin-top: 15px;
margin-left: 10px;
}

/bof header/
#headerWrapper
{
background-color: #101010;
margin-top: 0px;
}

#header-curr-lang
{
float: right;
margin-top: 50px;
color: #b5b5b6;
}

#header-curr-lang img { vertical-align: middle; }

#currency_header
{
float: right;
margin-right: 35px;
margin-top: 3px;
}

#lang_header
{
float: right;
margin-right: 15px;
margin-top: 5px;
}

.header-checkout
{
color: #fffede;
font-weight: normal;
}

.header-checkout:hover { color: #dfba68; }

#navMainWrapper
{
margin: 0em;
font-weight: normal;
color: #fffede;
background-image: url(../images/top-nav-bk.jpg);
height: 54px;
width: 950px;
}

#navMain ul
{
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
margin-left: 15px;
margin-top: 7px;
font-size: 130%;
}

#navMain ul li { display: inline; }

#navMain ul li a
{
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #fffede;
white-space: nowrap;
}

#navMain ul li a:hover { color: #dfba68; }

#navCatTabsWrapper
{
margin: 0em;
background-color: #fff;
font-weight: bold;
color: #181818;
height: 1%;
width: 100%;
display: none;
}

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

#navCatTabs ul li { display: inline; }

#navCatTabs ul li a
{
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #181818;
white-space: nowrap;
}

#navEZPagesTop
{
background-color: #fff;
display: none;
}

#navEZPagesTop
{
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
color: #181818;
}

#navEZPagesTop a { color: #181818; }
#navEZPagesTop a:hover { color: #67cadf; }

#navMainSearch
{
float: right;
padding-top: 15px;
margin-right: 20px;
}

#navMainSearch input[type=image]
{
margin-top: -10px;
vertical-align: bottom;
}

.search-header-button { vertical-align: middle; }

.search-header-box
{
border: 1px solid #000;
width: 100px;
height: 18px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

.cart-image { vertical-align: middle; }

/bof ezpages/
#navEZPagesTOCWrapper
{
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #000;
}

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

/bof the main content classes/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages,

.centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert { vertical-align: top; }

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

.alert
{
color: #ff0001;
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; }

/bof shopping cart display/
#cartContentsDisplay
{
border-left: 1px solid #dfdfe7;
border-right: 1px solid #dfdfe7;
border-top: 0px solid #dfdfe7;
}

#cartContentsDisplay td
{
border-bottom: 1px dashed #ccc;
padding-top: 15px;
}

.cartQuantity input { margin-left: 15px; }

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

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

.tableHeading TH
{
background-color: #101010;
height: 30px;
color: #fffedf;
}

.cartTableHeading
{
background-color: #101010;
height: 30px;
color: #fffedf;
}

.tableHeading, #cartSubTotal
{
background-color: #101010;
height: 30px;
color: #fffedf;
}

#cartSubTotal
{
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: #444443;
position: relative;
/do not remove-fixes stupid IEbug/
}

.cartOldItem
{
color: #444443;
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;
}

.mediaTitle { float: left; }
.mediaTypeLink { float: right; }
.normalprice, .productSpecialPriceSale { text-decoration: line-through; }
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount { color: #ff0001; }

.orderHistList
{
margin: 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; }

/bof image display/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage { margin: 0em 1em 1em 0em; }
.categoryIcon { }
#cartImage { margin: 0.5em 1em; }

/bof attributes/
.attribImg
{
width: 20%;
margin: 0.3em 0em;
}

.attributesComments { }

/bof list box contents/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch,

.centerBoxContentsFeatured, .centerBoxContentsNew { margin: 1em 0em; }

/bof sideboxes/
#navColumnOne
{
background-color: #fff;
padding-bottom: 20px;
}

#navColumnTwo
{
background-color: #fff;
padding-right: 10px;
}

.columnLeft { }

h3.leftBoxHeading, h3.rightBoxHeading
{
font-size: 1.3em;
color: #fffede;
/padding-top:15px;/
font-weight: normal;
}

h3.leftBoxHeading a, h3.rightBoxHeading a
{
font-size: 1.0em;
color: #fffede;
}

.leftBoxHeading, .rightBoxHeading
{
margin: 0em;
background-image: url(../images/sidebox-header.jpg);
background-repeat: no-repeat;
padding: 0.5em 20em;
color: #fffede;
}

.centerBoxHeading
{
/background-image: url(../images/center-bk.jpg);background-repeat:no-repeat;/
color: #5a2e2e;
font-weight: bold;
padding: 0.5em 0.2em;
padding- left: 15px;
margin-bottom: 0px;
border-bottom: 2px dotted #b5b5b5;
font-size: 150%;
}

.centerBoxWrapperContents
{
border: 0px solid #b5b5b5;
padding-top: 0px;
}

#musicgenresHeading, #recordcompaniesHeading, #searchHeading, #manufacturersHeading, #currenciesHeading { padding-top: 0px; }

.leftBoxContainer, .rightBoxContainer
{
border: 1px solid #fff;
margin-top: 1.5em;
margin-left: 3px;
}

.sideBoxContent
{
background-color: #fff;
padding: 0.4em;
border: 0px solid #e1e1e9;
border-left: 1px solid #b5b5b5;
border-right: 1px solid #b5b5b5;
border- bottom: 1px solid #b5b5b5;
padding-top: 10px;
}

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

/.rightBoxContent {background-color: #fff;margin-bottom: 1em;}/
#catBoxDivider { display: none; }

#whatsnew, #featured, #specials
{
font-size: 100%;
font-weight: normal;
color: #444443;
}

#whatsnew a, #featured a, #specials a
{
font-size: 100%;
font-weight: normal;
color: #444443;
}

#specialsHeading a, #whatsnewHeading a, #featuredHeading a { color: #fffede; }
#specialsHeading a:hover, #whatsnewHeading a:hover, #featuredHeading a:hover { color: #e2efd0; }
#shoppingcartHeading { font-size: 1.1em; }
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,

#bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate,

.cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .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: #fff; }
#upProductsHeading { text-align: left; }
#upDateHeading { text-align: right; }

/bof misc/
.back { float: left; }
.forward, #shoppingCartDefault #PPECbutton { float: right; }
.bold { font-weight: bold; }
.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;
}

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

.information
{
padding: 10px 3px;
line-height: 150%;
}

#shoppingcartBody #shippingEstimatorContent { clear: both; }

.seDisplayedAddressLabel
{
background-color: #e2efd1;
text-align: center;
}

.seDisplayedAddressInfo
{
text-transform: uppercase;
text-align: center;
font-weight: bold;
}

#seShipTo { padding: 0.2em; }

/bof center boxes/
.product_title
{
font-size: 110%;
font-weight: bold;
}

.product_title a { color: #918f8f; }
.product_title a:hover { color: #dfba68; }
.product_detail { margin-top: 10px; }

.price
{
font-size: 110%;
font-weight: bold;
color: #000;
}

.normalprice { font-size: 90%; }
.productSpecialPrice { font-size: 90%; }

/bof easy slider/
#slider { margin: 0 auto; }

#slider ul, #slider li, #slider2 ul, #slider2 li
{
margin: 0;
padding: 0;
list-style: none;
}

#slider2 { margin-top: 1em; }

#slider li, #slider2 li
{
/*define width and height of list item (slide) entire slider area will adjust according to the parameters provided here

*/
width: 550px;
height: 302px;
overflow: hidden;
}

#slider { margin: 0 auto; }

/bof easy slider numeric controls/
#control_div
{
width: 200px;
height: 18px;
position: relative;
left: 380px;
top: 0px;
margin-bottom: 10px;
}

ol#controls
{
margin: 1em 0;
padding: 0;
height: 18px;
}

ol#controls li
{
margin: 0 10px 0 0;
padding: 0;
float: left;
list-style: none;
height: 18px;
line-height: 18px;
}

ol#controls li a
{
float: left;
height: 18px;
line-height: 18px;
border: 1px solid #ccc;
background: #101010;
color: #fffedf;
padding: 0 10px;
text-decoration: none;
}

ol#controls li.current a
{
background: #dfba69;
color: #444;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus { outline: none; }
#home-images { margin-top: 25px; }

#home-text
{
font-size: 120%;
width: 550px;
}

.promote { margin-left: 70px; }

/bof product listing/
.listingDescription { text-align: left; }
.productListing-even { border: 1px dashed #ccc; }

.productListing-rowheading
{
color: #fffedf;
background-color: #444;
height: 30px;
}

.productListing-rowheading a { color: #fffede; }
.productListing-rowheading a:hover { color: #dfba68; }

#productsListingTopNumber
{
margin-top: 15px;
margin-bottom: 15px;
}

#productsListingBottomNumber
{
margin-top: 15px;
margin-bottom: 15px;
}

#productListHeading
{
margin-bottom: 15px;
color: #5a2e2e;
}

.tabTable
{
border-left: 1px solid #dfdfe7;
border-right: 1px solid #dfdfe7;
}

.productListing-data { border-bottom: 1px dashed #ccc; }

/bof product info/
#cartAdd
{
text-align: center;
margin: 0em;
border: 0px solid #000;
padding: 0em;
}

#product-divider
{
border-bottom: 1px dashed #ccc;
margin-top: 20px;
}

.navNextPrevWrapper { text-align: center; }
.navNextPrevCounter { text-align: center; }
#productDescription { color: #444; }

#productName
{
color: #444;
font-weight: normal;
font-size: 2.0em;
}

#productDetailsList
{
color: #444;
margin-top: 10px;
margin-bottom: 10px;
}

#productAttributes { }

#attribsOptionsText
{
font-weight: normal;
color: #444;
}

.optionName
{
color: #444;
margin-top: 0px;
}

#alsoPurchased { margin-top: 20px; }
#productPrices { text-align: center; }
#p-left { float: left; }
#p-right { float: left; }

#cart
{
border: 1px solid #e1e1e9;
width: 100%;
padding: 20px;
background: #f5f5f7;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

/bof monthly boxes/
.box_image
{
margin-top: 15px;
margin-bottom: 15px;
}

/bof turn off breadcrumbs on home page/
body#indexHomeBody #navBreadCrumb { display: none; }