stretching of site when using wider screen

[pure11]

I just checked my site on a Mac which has a wider screen, using firefox, and it stretched the site, making it look all messed up

 

is there any way to set a fixed width for the store and center it fixed also so that if the screen is indeed wider like the Mac screens, the store site wont stetch?

 

Thanks for your help and Happy New Year!

[kewldude_3001]

there's a contribution that center's your store.....and if your working with tables its better to use %'s instead of actual values of row and column widths

[jonquil]

http://addons.oscommerce.com/category?search=centershop

[pure11]

is it possible to do this via stylesheet.css ?

 

this is what mine looks like

 

/*
 $Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }
.productsNotifications { background: #689A5F; color: #000000; font-weight: bold; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

BODY {
 text-align: center;
 color: #ffffff;
 background: #99CCFF;
 margin: 0;
  }
 #cwdusacontainer {
 border: 5px solid #99ccff;
 background: #000000;
 color: #ffffff;
  text-align: left;
}


A {
 font-size: 12px;
 color: #99CCFF;
 font-weight : bold;
 text-decoration: none;
}

A:hover {
 font-size: 12px;
 color: #ffffff;
 font-weight : bold;
 text-decoration: underline;
}

FORM {
display: inline;
}

TR.header {
 background: #000000;
}

TR.headerNavigation {
 background: #660000;
}

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #660000;
 color: #ffffff;
 font-weight : bold;
}

A.headerNavigation { 
 color: #99CCFF; 
}

A.headerNavigation:hover {
 color: #ffffff;
}

TR.headerError {
 background: #ff0000;
}

TD.headerError {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #ff0000;
 color: #ffffff;
 font-weight : bold;
 text-align : center;
}

TR.headerInfo {
 background: #660000;
}

TD.headerInfo {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #660000;
 color: #000000;
 font-weight: bold;
 text-align: center;
}

TR.footer {
 background: #660000;
}

TD.footer {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #660000;
 color: #660000;
 font-weight: bold;
}

.infoBox {
 background: #660000;
}

.infoBoxContents {
  background: #333333;
 background-repeat: repeat;
 background-position: top left;
 color: #689A5F;
 font-weight: bold;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

.infoBoxNotice {
 background: #333333;
}

.infoBoxNoticeContents {
 background: #FFE6E6;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: #660000;
 color: #ffffff;
}

TD.infoBox, SPAN.infoBox {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
 background: #333333;
color: #689A5F;
 font-weight: bold;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
 background: #333333;
 color: #689A5F;
 font-weight: bold;
}

TABLE.productListing {
 border: 1px;
 border-style: solid;
 border-color: #333333;
 border-spacing: 1px;
}

.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 background: #99CCFF;
 color: #000000;
 font-weight: bold;
}

TD.productListing-data {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #333333;
 color: #ffffff;
}

A.pageResults {
 color: #0000FF;
}

A.pageResults:hover {
 color: #0000FF;
 background: #FFFF33;
}

TD.pageHeading, DIV.pageHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 20px;
 font-weight: bold;
 color: #9a9a9a;
}

TR.subBar {
 background: #689A5F;
}

TD.subBar {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 color: #333333;
}

TD.main, P.main {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

TD.accountCategory {
 font-family: Verdana, Arial, sans-serif;
 font-size: 13px;
 color: #B50C0C;
}

TD.fieldKey {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

TD.fieldValue {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
}

TD.tableHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

SPAN.newItemInCart {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #689A5F;
}

CHECKBOX, INPUT, RADIO, SELECT {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
}

TEXTAREA {
 width: 100%;
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
}

SPAN.greetUser {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #689A5F;
 font-weight: bold;
}

TABLE.formArea {
 background: #f1f9fe;
 border-color: #7b9ebd;
 border-style: solid;
 border-width: 2px;
}

TD.formAreaTitle {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

SPAN.markProductOutOfStock {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #c76170;
 font-weight: bold;
}

SPAN.productSpecialPrice {
 font-family: Verdana, Arial, sans-serif;
 color: #ff0000;
}

SPAN.errorText {
 font-family: Verdana, Arial, sans-serif;
 color: #ff0000;
}

.moduleRow { }
.moduleRowOver { background-color: #689A5F; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #689A5F; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #689A5F; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #83847E; }
.checkoutsuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #689A5F; }
/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }


TABLE.popup {
 border-width: 1px;
 border-style: dotted;  
 border-color
}

[Fremen19]

What i would do in your case..

 

Just <center> it and I would use a static width, not %

 

Would always look the same size and always centered.

 

 

 

Fremen

[pure11]

got it perfect!

 

thanks!!!

 

HAPPY NEW YEAR~!