Help Centering Body Page in browser

new to site

[georgialax]

Here is the code, that I need help with. I set the absolute position so I keep the page content from expanding to the right when you use a larger screen.

p, a, td, input, textarea, select, option {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: <%= textColor %>;
}

p, form {
margin: 0;
color: #Da710b;
}

input {
margin-bottom: 15px;
color: #000000;
}

td.basic {
vertical-align: top;
padding-right: 15px;
padding-left: 0;
}

/***********************************************************
* Entire Page
*/

body.page {
margin: 0 auto;
padding-left:5%;
padding-right:5%;
vertical-align:middle;
background-image: url(Images/Cloud-Background.jpg);
}

td.pageContent {
position:absolute;
width:750px;
background: #ffffff;
padding: 25px;
}

img.pageMinimumWidth {
width: 700px;
}

/***********************************************************
* Main Navigation Bar
*/

td.navBar {
background-image: url(Images/NavBar.jpg);
width:800px;
background-repeat: no-repeat;
}

[SuzyUK]

Hi georgialax, and Welcome to WebmasterWorld!

Not quite sure what you're aiming at here, but I can tell you that Table properties do not accept CSS positioning, which makes sense when you think about it, you can't position a table cell separate from the entire structure of the whole table - absolute position takes an element and removes it from the entire flow of the document (like a post-it note stuck on the screen)

centering a page or more commonly seen centering an element on a page is accomplished by giving the container element, usually a div, a width (that container can be a table, but not a table cell or row) then using

margin: 0 auto; 

if you then want to put a maximum width on that element instead of a width to save it from getting too big on a large screen you would use max-width instead of width.. max-width is where you might need some workarounds for older versions of IE (6 and below)

[georgialax]

Thanks for your help with this, I ended up getting some help and did it like this.

p {
margin: 0;
color: #Da710b;
}
form
{
margin:0 auto;
width:777px;
{

input {
margin-bottom: 15px;
color: #000000
}

td.basic {
vertical-align: top;

}

/**********************************************************************
* Entire Page
*/

body.page
{
margin-left: auto; margin-right: auto;
vertical-align:middle;
text-align: center;
width:777px;
background: url(Images/background.gif);
}

td.pageContent {
background: #ffffff;
width: 777px;
margin: 0 auto;
padding: 0px 0px 7px 0px;
vertical-align:middle;
}

img.pageMinimumWidth {
width: 777px;
}

/**********************************************************************
* Main Navigation Bar
*/

td.navBar {

background-image: url(Images/fulfill_header.gif);
background-repeat: no-repeat;
width:777px;
height: 50px;
padding: 0 0px 0 0px;
}