Solved

Page not centering

Posted on 2011-02-11
12
303 Views
Last Modified: 2012-05-11
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

0
Comment
Question by:Bob Schneider
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
  • 2
  • +1
12 Comments
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 56 total points
ID: 34870542
you can try after giving the width in percentage, and then rest of the value in margins. For example

width:80%;
margin-left:10%;
margin-right:10%;
0
 
LVL 13

Assisted Solution

by:darren-w-
darren-w- earned 112 total points
ID: 34870764
 In #wrap set

margin-left:auto;
margin-right:auto;

Open in new window


try removing : display:block;
0
 
LVL 16

Accepted Solution

by:
s8web earned 332 total points
ID: 34870967
You may have a float issue. IE doesn't get the pseudo class :after. Otherwise your css looks proper.

margin:0 auto;  is shorthand for

margin-top: 0;
margin-right:auto;
margin-bottom: 0;
margin-left:auto;

so that's not it. If it's not the float issue, it's something else in your markup/css. Quite possibly unclosed or unbalanced tags somewhere.

If you could link to a problem page or provide the full, parsed code of a page we can take a closer look.

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Assisted Solution

by:s8web
s8web earned 332 total points
ID: 34870977
btw, display:block on your wrapper is most likely unnecessary.
0
 
LVL 13

Assisted Solution

by:darren-w-
darren-w- earned 112 total points
ID: 34871124
Just tested it out in ie8 and ff and it looks fine?

<html>
    <head>
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script  type="text/javascript">
        </script>
        <style>
            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;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <p>test</p>
            <ul>
                <li>non</li>
                <li>non</li>
                <li>test</li>
                <li>non</li>
                <li>non</li>
            </ul>
        </div>
    </body>
</html>

Open in new window

0
 
LVL 16

Assisted Solution

by:s8web
s8web earned 332 total points
ID: 34871654

@darren-w

Your example has no floated elements to clear, or a doctype. Clear is used to give floated elements size. Floated elements do not take up space therefore something has to be done to 'clear' them.

The absence of the doctype will allow your example to work (if there were floated elements) in IE8, but would break in Firefox and other standards compliant browsers.

Here is an example you can test with. There are floated elements in this example. They are largish to make the page run long.

I do need to make a correction. It seems as though Firefox doesn't get :after either.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script  type="text/javascript">
        </script>
        <style>
            body{
                margin:0;
                padding:0;
                height:100%;
                font-family:arial, serif;
                text-align:center;
                background-color:#ececec;
            }

            #wrap{
                position:relative;
                height:100%;
                width:1000px;
                display:block;
                margin:0 auto;
                padding:0;
                background-color:#fff;
                text-align:left;
            }
            #wrap:after{
                display:block;
                clear:both;
            }
        </style>
    </head>
    <body>
		<div id="wrap">
			<div style="float:left;">
				<img src="http://farm3.static.flickr.com/2067/2417441762_f9c10c1437.jpg" 
				alt="by OliBac" width="500" height="500">
				<br />
				<a href="http://www.flickr.com/photos/olibac/2417441762/sizes/m/in/photostream/">
				from http://www.flickr.com/photos/olibac/2417441762/sizes/m/in/photostream/</a>
			</div>
			<div style="float:left;">
				<img src="http://farm4.static.flickr.com/3012/3017515135_2b8ab4f3a4.jpg" 
				alt="by paul (dex)" width="500" height="375">
				<br />
				<a href="http://www.flickr.com/photos/dexxus/3017515135/sizes/m/in/photostream/">
				from http://www.flickr.com/photos/dexxus/3017515135/sizes/m/in/photostream/</a>
			</div>
			<div style="float:right;">
				<img src="http://farm2.static.flickr.com/1180/1385351213_1b65d3d473_z.jpg" 
				alt="by OiMax" width="427" height="640">
				<br />
				<a href="http://www.flickr.com/photos/oimax/1385351213/sizes/z/in/photostream/">
				from http://www.flickr.com/photos/oimax/1385351213/sizes/z/in/photostream/</a>
			</div>
			<div style="clear:both;"></div>
		</div>
    </body>
</html>

Open in new window

0
 

Author Comment

by:Bob Schneider
ID: 34871946
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

0
 
LVL 16

Assisted Solution

by:s8web
s8web earned 332 total points
ID: 34872024
add:

form{width:715px;margin:0 auto;}
 
to your css
0
 
LVL 16

Assisted Solution

by:s8web
s8web earned 332 total points
ID: 34872035
You also should put a doctype in there. Add as the very first line:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

0
 

Author Comment

by:Bob Schneider
ID: 34872382
Why 715px?  It doesn't quite center so I tried to modify that width and then it went back to where it was.
0
 
LVL 16

Assisted Solution

by:s8web
s8web earned 332 total points
ID: 34872459
715px is the width of your form. For margin:0 auto to work, you have to define a width.

When you say it doesn't quite center, can you provide more information or show us? I tested on my end and it centered.

Did you put the DocType in there? That can have a large affect.
0
 

Author Closing Comment

by:Bob Schneider
ID: 34875253
Exactly what I needed.  Thanks!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question