Solved

Page not centering

Posted on 2011-02-11
12
269 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
  • 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now