Can't get page centered

Robert Ehinger
Robert Ehinger used Ask the Experts™
on
Here is the code from a page I am building. All the other pages are centered in the browser window but I can't seem to get this one centered. Please take a look at the code and advise.
Thank you!

Robert

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registration</title>
 
<link href='/static/spreadsheets/client/css/779923916-published_form_compiled.css' type='text/css' rel='stylesheet'>
<link href='/static/spreadsheets/client/css/779923916-published_form_compiled.css' type='text/css' rel='stylesheet'>
<style type='text/css'>
body.ss-base-body{width: 840px; text-align: center; background-image: url(images/lblue003.jpg);text-align: center; font-family:sans-serif}h1.ss-form-title{color:#444;padding-bottom:.2ex;border-bottom:1px solid #ddd;width:70%;text-align:left}span.ss-required-asterisk{color:#800;font-style:italic}div.errorbox-good{border:1px solid #ddd;padding:1.5ex .5em 0 .5em;background-color:#f7f7f7}label.ss-scalenumber{padding:0}td.ss-scalerow{padding:0 .7em}label.ss-q-title{color:#222;border-bottom:.1ex solid #ddd;width:40%;padding-bottom:.2ex;margin-bottom:.5ex}div.ss-form-entry{margin-bottom:.5em}label.ss-q-help{margin-bottom:2ex}div.ss-form-container h2.ss-section-title{background-color:transparent}div.ss-submit div.ss-form-entry{background:none;border:none}.style1 {color: #FF0000}
.style2 {color: #800; }
</style></head>
<body class="ss-base-body" dir="ltr"    
<div class="ss-form-container">
<div class="ss-form-heading">
  <h1 align="center" class="ss-form-title"><img src="Images/Sue'sBanner.jpg" width="840" height="140" /></h1>
  <p></p>
<div class="ss-form-desc ss-no-ignore-whitespace">
  <h3 align="center">Registration
   
    Please complete this registration form completely .</h3>
</div>
<p></p>
 
<hr class="ss-email-break" style="display:none;">
<div class="ss-required-asterisk">
  <h4 class="style2">* Required</h4>
</div>
</div>
<div class="ss-form"><form action="https://spreadsheets.google.com/spreadsheet/formResponse?formkey=dHZVb2I2eXNaWllvdkVSLVk5MFltMnc6MA&theme=0AX42CRMsmRFbUy03NThiZTgyMi1iNWZiLTQ1ZTUtYmJkZi00ZDMzODQ4NzA5YWI&ifq" method="POST" id="ss-form">
 
<br>
<div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_0">Name
      <span class="ss-required-asterisk style1">*</span></label>
<label class="ss-q-help" for="entry_0"></label>
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0"></div>
</div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-paragraph-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_1">Addresss
      <span class="ss-required-asterisk style1">*</span></label>
 
<label class="ss-q-help" for="entry_1"></label>
<textarea name="entry.1.single" rows="8" cols="75" class="ss-q-long" id="entry_1"></textarea></div>
</div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_5">Phone Number
      <span class="ss-required-asterisk style1">*</span></label>
<label class="ss-q-help" for="entry_5"></label>
<input type="text" name="entry.5.single" value="" class="ss-q-short" id="entry_5"></div>
</div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_6">Email
      <span class="ss-required-asterisk style1">*</span></label>
<label class="ss-q-help" for="entry_6"></label>
<input type="text" name="entry.6.single" value="" class="ss-q-short" id="entry_6"></div>
</div></div>
 
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-radio"><div class="ss-form-entry"><label class="ss-q-title" for="entry_2">Training Date to Attend
      <span class="ss-required-asterisk style1">*</span></label>
    <span class="style1">
    <label class="ss-q-help" for="entry_2"></label>
    </span>
    <ul class="ss-choices"><li class="ss-choice-item"><label class="ss-choice-label"><input type="radio" name="entry.2.group" value="August 9, 2011  5:30pm" class="ss-q-radio" id="group_2_1">
August 9, 2011  5:30pm</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="radio" name="entry.2.group" value="August 23, 2011  5:30pm" class="ss-q-radio" id="group_2_2">
August 23, 2011  5:30pm</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="radio" name="entry.2.group" value="September 13, 2011  5:30pm" class="ss-q-radio" id="group_2_3">
September 13, 2011  5:30pm</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="radio" name="entry.2.group" value="September 27, 2011  5:30pm" class="ss-q-radio" id="group_2_4">
September 27, 2011  5:30pm</label></li>
</ul></div>
</div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-checkbox"><div class="ss-form-entry"><label class="ss-q-title" for="entry_4">How did you hear about HASTraining?
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_4">Select all that apply</label>
<ul class="ss-choices"><li class="ss-choice-item"><label class="ss-choice-label"><input type="checkbox" name="entry.4.group" value="Advertisment" class="ss-q-checkbox" id="group_4_1">
Advertisment</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="checkbox" name="entry.4.group" value="Business Card" class="ss-q-checkbox" id="group_4_2">
Business Card</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="checkbox" name="entry.4.group" value="Web Site" class="ss-q-checkbox" id="group_4_3">
Web Site</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="checkbox" name="entry.4.group" value="Employer/Co-Worker" class="ss-q-checkbox" id="group_4_4">
 
Employer/Co-Worker</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="checkbox" name="entry.4.group" value="Other" class="ss-q-checkbox" id="group_4_5">
Other</label></li>
</ul></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item  ss-section-header"><div class="ss-form-entry">
  <h2 class="ss-section-title">Training sessions are $15 and must be paid at the start of the session.</h2>
  <div class="ss-section-description ss-no-ignore-whitespace">Payments may be made the day of the training using a cashier checks, business checks, or cash.  All checks must be made payable to Sue's Server Training.</div>
</div></div></div>
<br>
<div class="ss-item ss-navigate"><div class="ss-form-entry">
<input type="submit" name="submit" value="Submit"></div></div></form>
</div>
<div class="ss-footer"></div>
</div></body></html>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011
Commented:
Add margin:0 auto to the body.ss-base-body (first line in your CSS. 10th line in the code above)
LZ1
Top Expert 2011

Commented:
Also, try this code.  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registration</title>
 
<link href='/static/spreadsheets/client/css/779923916-published_form_compiled.css' type='text/css' rel='stylesheet'>
<link href='/static/spreadsheets/client/css/779923916-published_form_compiled.css' type='text/css' rel='stylesheet'>
<style type='text/css'>
body.ss-base-body{width: 840px; text-align: center; background-image: url(images/lblue003.jpg);text-align: center; font-family:sans-serif}h1.ss-form-title{color:#444;padding-bottom:.2ex;border-bottom:1px solid #ddd;width:70%;text-align:left;margin:0 auto;}
span.ss-required-asterisk{color:#800;font-style:italic}div.errorbox-good{border:1px solid #ddd;padding:1.5ex .5em 0 .5em;background-color:#f7f7f7}label.ss-scalenumber{padding:0}td.ss-scalerow{padding:0 .7em}label.ss-q-title{color:#222;border-bottom:.1ex solid #ddd;width:40%;padding-bottom:.2ex;margin-bottom:.5ex}div.ss-form-entry{margin-bottom:.5em}label.ss-q-help{margin-bottom:2ex}div.ss-form-container h2.ss-section-title{background-color:transparent}div.ss-submit div.ss-form-entry{background:none;border:none}.style1 {color: #FF0000}
.style2 {color: #800; }
</style></head>
<body class="ss-base-body">
<div class="ss-form-container">
<div class="ss-form-heading">
  <h1 align="center" class="ss-form-title"><img src="Images/Sue'sBanner.jpg" width="840" height="140" /></h1>
  <p></p>
<div class="ss-form-desc ss-no-ignore-whitespace">
  <h3 align="center">Registration
   
    Please complete this registration form completely .</h3>
</div>
<p></p>
 
<hr class="ss-email-break" style="display:none;">
<div class="ss-required-asterisk">
  <h4 class="style2">* Required</h4>
</div>
</div>
<div class="ss-form"><form action="https://spreadsheets.google.com/spreadsheet/formResponse?formkey=dHZVb2I2eXNaWllvdkVSLVk5MFltMnc6MA&amp;theme=0AX42CRMsmRFbUy03NThiZTgyMi1iNWZiLTQ1ZTUtYmJkZi00ZDMzODQ4NzA5YWI&amp;ifq" method="POST" id="ss-form">
 
<br>
<div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_0">Name
      <span class="ss-required-asterisk style1">*</span></label>
<label class="ss-q-help" for="entry_0"></label>
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0"></div>
</div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-paragraph-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_1">Addresss
      <span class="ss-required-asterisk style1">*</span></label>
 
<label class="ss-q-help" for="entry_1"></label>
<textarea name="entry.1.single" rows="8" cols="75" class="ss-q-long" id="entry_1"></textarea></div>
</div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_5">Phone Number
      <span class="ss-required-asterisk style1">*</span></label>
<label class="ss-q-help" for="entry_5"></label>
<input type="text" name="entry.5.single" value="" class="ss-q-short" id="entry_5"></div>
</div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_6">Email
      <span class="ss-required-asterisk style1">*</span></label>
<label class="ss-q-help" for="entry_6"></label>
<input type="text" name="entry.6.single" value="" class="ss-q-short" id="entry_6"></div>
</div></div>
 
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-radio"><div class="ss-form-entry"><label class="ss-q-title" for="entry_2">Training Date to Attend
      <span class="ss-required-asterisk style1">*</span></label>
    <span class="style1">
    <label class="ss-q-help" for="entry_2"></label>
    </span>
    <ul class="ss-choices"><li class="ss-choice-item"><label class="ss-choice-label"><input type="radio" name="entry.2.group" value="August 9, 2011  5:30pm" class="ss-q-radio" id="group_2_1">
August 9, 2011  5:30pm</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="radio" name="entry.2.group" value="August 23, 2011  5:30pm" class="ss-q-radio" id="group_2_2">
August 23, 2011  5:30pm</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="radio" name="entry.2.group" value="September 13, 2011  5:30pm" class="ss-q-radio" id="group_2_3">
September 13, 2011  5:30pm</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="radio" name="entry.2.group" value="September 27, 2011  5:30pm" class="ss-q-radio" id="group_2_4">
September 27, 2011  5:30pm</label></li>
</ul></div>
</div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-checkbox"><div class="ss-form-entry"><label class="ss-q-title" for="entry_4">How did you hear about HASTraining?
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_4">Select all that apply</label>
<ul class="ss-choices"><li class="ss-choice-item"><label class="ss-choice-label"><input type="checkbox" name="entry.4.group" value="Advertisment" class="ss-q-checkbox" id="group_4_1">
Advertisment</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="checkbox" name="entry.4.group" value="Business Card" class="ss-q-checkbox" id="group_4_2">
Business Card</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="checkbox" name="entry.4.group" value="Web Site" class="ss-q-checkbox" id="group_4_3">
Web Site</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="checkbox" name="entry.4.group" value="Employer/Co-Worker" class="ss-q-checkbox" id="group_4_4">
 
Employer/Co-Worker</label></li> <li class="ss-choice-item"><label class="ss-choice-label"><input type="checkbox" name="entry.4.group" value="Other" class="ss-q-checkbox" id="group_4_5">
Other</label></li>
</ul></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item  ss-section-header"><div class="ss-form-entry">
  <h2 class="ss-section-title">Training sessions are $15 and must be paid at the start of the session.</h2>
  <div class="ss-section-description ss-no-ignore-whitespace">Payments may be made the day of the training using a cashier checks, business checks, or cash.  All checks must be made payable to Sue's Server Training.</div>
</div></div></div>
<br>
<div class="ss-item ss-navigate"><div class="ss-form-entry">
<input type="submit" name="submit" value="Submit"></div></div></form>
</div>
<div class="ss-footer"></div>
</div></body></html>

Open in new window

Carlos LlanosIT Manager

Commented:
Add margin to body to center it.  Should be like this:

body {
margin: 0 auto;
}

Open in new window


Also remove the class from the body and then make a div right after the body with class of ss_base_body then take the css and put it in that class like this.

HTML
 
<body>
<div class="ss-base-body">

<!-- Rest of code -->

</div>
</body>

Open in new window


CSS
 
.ss-base-body {width: 840px; text-align: center; background-image: url(images/lblue003.jpg);text-align: center; font-family:sans-serif }

Open in new window

Carlos LlanosIT Manager

Commented:
PS...you have text-align:center in your ss-base-body css section twice...I copied from your code and just noticed that...please remove one of them as you only need 1.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial