Link to home
Start Free TrialLog in
Avatar of Bob Schneider
Bob SchneiderFlag for United States of America

asked on

Page not centering

What causes a wrapper div to center?  I have a site that centers on some pages and not others and I have another site that centers in IE but not FF.  Something is wreaking havoc with the styles.  I am guessing I might be doing something wrong with my internal style sheets?

Here are the body and div styles in the site that works in ie but not ff.
body{
	margin:0;
	padding:0;
	height:100%;
	font-family:arial, serif;
	text-align:center;
 	background-color:#ececec;
}

#wrap{
	position:relative;
	height:100%;
	min-height:95%;
	width:1000px;
	display:block;
	margin:0 auto;
	padding:0;
	background-color:#fff;
	text-align:left;
}

#wrap:after{
	display:block;
	clear:both;
}

Open in new window

SOLUTION
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Bob Schneider

ASKER

I  took the display:block out of the style sheet.  Here is the page code:
<html>
<head>
<title>Irish Scamper</title>

<meta name="GENERATOR" Content="Microsoft Visual Studio 6.0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="postinfo" content="/scripts/postinfo.asp">
<meta name="resource" content="document">
<meta name="distribution" content="global">
<meta name="keywords" content="maple lake, mn, 5k, road race, march 12">
<meta name="description" content="The Irish Scamper 5k is held in conjunction with the Maple Lake St. Patrick's Day Festivities, which include a parade, craft show and much more! It is put on by the Irish track & field team. ">


<script language="javascript" src="/vira2/misc/scripts.js"></script>

<link rel="stylesheet" type="text/css" href="/vira2/misc/styles.css">

<style type="text/css">
	h3{
		margin-top:10px;
		background-color:#265621;
		color:#fff;
	}
	
	table{
		font-size:0.8em;
		background-color:#cc9;
		margin-top:10px;
	}
	
	p{
		font-size:0.9em;
	}
	
	th{
		text-align:right;
		padding:5px 5px 0 0;
		white-space:nowrap;
	}
	
	td{
		padding:5px 0 0 0;
	}
</style>

<script type="text/javascript">
<!--
function chkPart() {
 	if (document.part_data.first_name.value == '' || 
 	    document.part_data.last_name.value == '' ||
	 	document.part_data.address.value == '' || 
	 	document.part_data.city.value == '' || 
	 	document.part_data.state.value == '' || 
	 	document.part_data.zip.value == '' ||
	 	document.part_data.gender.value == '' ||
	 	document.part_data.email.value == '' || 
	 	document.part_data.dob_month.value == '' || 
	 	document.part_data.dob_day.value == '' || 
	 	document.part_data.dob_year.value == '') 
		{
  		alert('Please fill in all required fields');
  		return false;
  		}
 	else
		if (isNaN(document.part_data.zip.value))
    		{
			alert('The zip code field can not contain non-numeric values');
			return false;
			}
 	else
		if (isNaN(document.part_data.dob_month.value) ||
		   isNaN(document.part_data.dob_day.value) ||
		   isNaN(document.part_data.dob_year.value))
    		{
			alert('All date of birth/age fields must be numeric values');
			return false;
			} 	
	else
		if (document.part_data.zip.value.length != 5)
		{
		alert('Zip codes must be 5 characters long.');
		return false;
		}	
	else
		if (document.part_data.state.value.length != 2)
		{
		alert('Please use 2 characters for the state.');
		return false;
		}	
	else
		if (document.part_data.dob_year.value.length < 4)
		{
		alert('Please use 4 numbers for the year field in date of birth.');
		return false;
		}	
	else
   		return true;
}
-->
</script>
</head>

<body style="background-color:#fff;" onload="document.part_data.first_name.focus();">
	<div id="wrap">
		<div style="text-align:right;font-size:0.8em;margin:10px 10px 0 0;">
			<a href="mailto:youngsb@maplelake.k12.mn.us">Email Race Director</a>

		</div>
		
		
				<h3>Participant Registration for Irish Scamper&nbsp;5 K on 3/12/2011</h3>
				
				<div style="background-color:#ececec;">
					<h5 style="color:red;font-style:italic;text-align:left;margin:10px 0 0 10px;padding:0;">Important Notes:</h5>
					
					<p style="text-align:left;font-size:0.8em;">Do not use your browser's "Back" button, "Refresh" button, or close your browser prior to completing the registration process.  
					This will prematurely terminate your registration.  You will receive an email at the conclusion of this process notifiying that your registration has been 
					received.</p>
					
					<p style="text-align:left;font-size:0.8em;">To enter just one participant in this race use the form below.  To enter and pay for multiple participants at once, 
					<a href="group_reg.asp?this_event=184&amp;this_race=298" style="color:#f00;">click this link</a>.</p>

				</div>
				
				<form name="part_data" method="post" action="ind_reg.asp?this_race=298" onSubmit="return chkPart()">
				<table>
					<tr>
						<td>
						  	<table style="font-size:1.0em;">
						   		<tr>
									<th style="text-align:left;background-color:#265621;color:#fff;" colspan="4">
										Participant Data (*-required fields)
									</th>

								</tr>
							    <tr>
									<th>
										<span style="color:#d62002">*</span>First Name:
									</th>
									<td>
										<input type="text" name="first_name" id="first_name" maxLength="30">
									</td>
									<th>

										<span style="color:#d62002">*</span>Last Name: 
									</th>
									<td>
										<input type="text" name="last_name" id="last_name" maxLength="30">
									</td>
								</tr>
								<tr>
									<th>
										<span style="color:#d62002">*</span>Gender: 
									</th>

									<td>
										<select name="gender" id="gender">
											<option value="">&nbsp;</option>
											<option value="M">M</option>
											<option value="F">F</option>
										</select>
									</td>
									<th>

										Phone: 
									</th>
									<td>
										<input type="text" name="phone1" id="phone1" maxLength="3" size="2">&nbsp;-
										<input type="text" name="phone2" id="phone2" maxLength="3" size="2">&nbsp;-
										<input type="text" name="phone3" id="phone3" maxLength="4" size="3">
									</td>
								</tr>
								<tr>
									<th>

										<span style="color:#d62002">*</span>Address: 
									</th>
									<td>
										<input type="text" name="address" id="address" maxLength="50" size="30">
									</td>
									<th>
										<span style="color:#d62002">*</span>City: 
									</th>
									<td>

										<input type="text" name="city" id="city" maxLength="30">
									</td>
								</tr>
								<tr>
									<th>
										<span style="color:#d62002">*</span>State: 
									</th>
									<td>
										<input type="text" name="state" id="state" maxLength="2" size="2">

									</td>
									<th>
										<span style="color:#d62002">*</span>Zip/Postal Code: 	
									</th>
									<td>
										<input type="text" name="zip" id="zip" maxLength="7" size="7">
									</td>
								</tr>
								<tr>

									<th>
										<span style="color:#d62002">*</span>Email: 
									</th>
									<td>
										<input type="text" name="email" id="email" maxLength="50" size="25"> 
									</td>
									<th>
										<span style="color:#d62002">*</span>Date of Birth: 
									</th>

									<td>
										<input type="text" name="dob_month" id="dob_month" maxLength="2" size="1">&nbsp;/
										<input type="text" name="dob_day" id="dob_day" maxLength="2" size="1">&nbsp;/
										<input type="text" name="dob_year" id="dob_year" maxLength="4" size="3">
									</td>
								</tr>
								<tr>
									<th valign="top">
										Comments: 	
									</th>

									<td style="font-size:1.0em;" colspan="3">
										<textarea name="comments" id="comments" rows="3" cols="75"></textarea>
									</td>
								</tr>
						  	</table>
						</td>
					</tr>
					<tr>

						<td>
							
								<table style="font-size:1.0em;">
									<tr>
										<th style="text-align:left;background-color:#265621;color:#fff;" colspan="4">
											Select Race Items 
										</th>
									</tr>
									<tr>
										<td>

											T-shirts:
											<select name="shirt_size" id="shirt_size">
												<option value="">&nbsp;</option>
												
													<option value="Small">Small</option>
												
													<option value="Medium">Medium</option>
												
													<option value="Large">Large</option>
												
													<option value="XLarge">XLarge</option>

												
													<option value="XXLarge">XXLarge</option>
												
											</select>
											
											<select name="shirt_style" id="shirt_style">
												
													<option value="Long">Long&nbsp;Sleeve</option>
												
											</select>
										</td>
									</tr>

								</table>
							
						</td>
					</tr>
					<tr>
						<td class="submit_cell">
							<input type="hidden" name="submit_reg" id="submit_reg" value="submit_reg">
							<input type="submit" name="submit6" id="submit6" value="Continue">
						</td>
					</tr>

				</table>
				</form>
			
	</div>
</body>
</html>

Open in new window

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Why 715px?  It doesn't quite center so I tried to modify that width and then it went back to where it was.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Exactly what I needed.  Thanks!