Solved

Page not centering

Posted on 2011-02-11
12
307 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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
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

Ready to get started with anonymous questions?

It's easy! Check out this step-by-step guide for asking an anonymous question on Experts Exchange.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

615 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