Edit the table width of listing product

[dylandaddy]

Hi experts,

I was having a hard time trying to edit the table width of the listing products.

My source code is like this now:

<table width="100%" border="0" cellpadding="0" cellspacing="0">

However, i wish i could edit it to 500 px so my product table won't go over my whole page width of 850px (two column of 150 on the both sides).

Anyone knows how to do it??

http://topallinc.com/store/index.php...=index&cPath=1


Thanks in advance !!

[Kim]

Moderator's note - One post per topic, please. Extra posts have been removed.

[stevesh]

You'll have to remove the red part here:


#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin:10px; text-align:center; line-height:20px;

and fiddle with the width here, probably after breaking out productMainImage to it's own statement:

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

[dylandaddy]

i tried but it didnt work out. i noticed the table expands when i put extra long Products Description. Is there any way to kind of constrain the width of table somehow??

Here is my site:
http://topallinc.com/store/index.php...=index&cPath=1

Thanks again

[gjh42]

You need to remove the width completely from this rule, as it applies to a wide range of elements, some of which are only supposed to be small things like a sidebox heading:

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

You entered this for the description of a test product:

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB B

A "word" that long with no spaces will cause problems. Try some real text and see how it behaves.

[dylandaddy]

Oh my god !!! That works !!!!! Thank you so much!!!!!!!!

[dylandaddy]

Ohh...sorry to bother you guys again.

gjh42: i actually copy a formal paragraph and past into the description and it work well.

Both gjh42 and stevesh: i did what you told, and it works in my dreamweaver, so i save the stylesheet.css and stylesheet_main.css and upload to my FTP.
However, when i download the html from my browser and open back in my Dreamweaver, coding width:850px; and text-align:center;
still exsist respectly. I wonder is there anything that overides it or did i miss anything.


Appreciated

[dylandaddy]

http://topallinc.com/store/index.php...&products_id=1

Thats where the problem continues.

And i dont think i really solve the previous issue because i changed only the description:
http://topallinc.com/store/index.php...=index&cPath=1

[gjh42]

You did not remove the width: 850px; as I suggested. When I tested that in Web Developer on your site on the product info page, the product description went back to the correct width.

The product listing shows the left column and center column correctly, with right column turned off. Why do you think there is a problem there?