PDA

View Full Version : Trouble trying to centre webpage


twilightballoons
11-23-2007, 03:00 PM
Hi, I am having a few problems in trying to centre my webpage using css.

I have read throught the forums and read through the 'centered with CSS' tutorial with slight success.

I followed the tutorial and enclosed my content with the <div class="wrapper"> all content goes here </div>, I then followed the instructions and placed the:

body {
text-align : center ;
min-width : 770px ;
}


in my stylesheet. The page then centres in dreamweaver and when I move the page around it moves OK.

But, the problem I have is when I preview the site in Firefox it does not quite centre in the middle, and if I resize the page then the site moves to the left just a little bit not as it does in dreamweaver when I test in there.

If I then test the site using internet explorer, then the site centers fine, but the same problem occues when I resize the window.

If I then try to correct the problem with the:

body {
text-align : center ;
min-width : 770px ;
}
div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}

as it says in the tutorial, the same problem occurs with Firefox, but with internet explorer the page is not centred and it goes the same as Firefox.

I am designing the site to use oscommerce so put the xss in the stylesheet so this should not make much difference. The stlyesheet is listed below if that is any help and I have highlighted where I have entered the code.

I would be grateful if anyone can help, cheers.

http://www.oscommerce.com

Copyright (c) 2003 osCommerce

Released under the GNU General Public License
*/

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.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: #f2fff7; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

BODY {
background: #58c9fd;
color: #000000;
margin: 0px;
}

body {
text-align : center ;
min-width : 770px ;
}


div.wrapper {
margin-left : 10%;
margin-right : 10%;
}

A {
color: #000000;
text-decoration: none;
}

A:hover {
color: #AABBDD;
text-decoration: underline;
}

FORM {
display: inline;
}

TR.header {
background: #ffffff;
}

TR.headerNavigation {
background: #bbc3d3;
}

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

A.headerNavigation {
color: #FFFFFF;
}

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

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

TR.footer {
background: #bbc3d3;
}

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





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

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

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

.productListing-heading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #b6b7cb;
color: #FFFFFF;
font-weight: bold;
}

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

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

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

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: 10px;
}

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

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: 10px;
color: #ff0000;
}

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

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

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

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

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: #D7E9F7; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

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

twilightballoons
11-24-2007, 12:03 PM
Can anyone help with this issue?

I have been looking through tutorials around the web but I am still having the same issue. Whatever I seem to try, the page does not quite centre with firefix but centres with internet explorer, but when I resize the window the page does not go all the way to the left as it should.

I have designed the page using photoshop and sliced it using imageready, could this be causing the fault in some way??

I hope someone can help as I am really stuck!!

Cheers.

domedia
11-24-2007, 02:43 PM
It's probably due to the scrollbar, but since I can't see it I'm only guessing. The scrollbar will make things move a little and no-one considers this an issue.