Center Align in Firefox, but not Explorer? - Virtual Assistant Forums

#1 (**permalink**) 04-15-2008

Below is my main CSS file. Is there something I can do to this, so that the entire page while center in MS explorer, just as it does in Firefox? Right now, in explorer it just hangs to the left. (here's the URL www.jacksonao.com)
If anyone knows, I'd love to hear.

}

#header p {
padding-left: 10px;
}

#header a {
}

/* Menu */

#menu {
width: 778px;
height: 35px;
background: url(images/img03.jpg) no-repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-bottom: 0px;
}

#menu ul {
margin: 0;
padding: 14px 0 0 0;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
padding: 0 20px 0 15px;
background: url(images/img04.gif) no-repeat left center;
text-decoration: none;
font-weight: bold;
color: #666666;
}

#menu a:hover {
text-decoration: underline;
}

/* Page */

#page {
width: 778px;
margin: 0 auto;
padding: 20px 0;
}

/* Content */

#content {
float: left;
width: 480px;
}

.post {
padding: 0 0 20px 0;
}

.title {
margin: 0;
border-bottom: 2px solid #4A3903;
}

.byline {
margin: 0;
}

.meta {
border-top: 1px solid #4A3903;
text-align: right;
color: #646464;
}

.meta a {
padding-left: 15px;
background: url(images/img06.gif) no-repeat left center;
font-weight: bold;
}

/* Sidebar */

#sidebar {
float: right;
width: 280px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
}

#sidebar li ul {
padding: 15px 0;
}

#sidebar li li {
padding-left: 30px;
border-bottom: 1px dotted #4A3903;

}

#sidebar h2 {
margin: 0;
padding: 20px 0 2px 30px;
background: url(images/img05.gif) no-repeat left bottom;
border-bottom: 2px solid #4A3903;
}

#sidebar a {
text-decoration: none;
}

#sidebar a:hover {
text-decoration: underline;
}

/* Footer */

#footer {
width: 778px;
height: 35px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-bottom: 0px;
background-color: #FF6699;
}

#2 (**permalink**) 04-15-2008

Do this:

1 - In your HTML after <body> add <div id="wrapper">
2 - At the end of your HTML add </div> just before </body>
3 - In your CSS add this:

Code:

body {
	min-width:778px;
	text-align:center;
}
#wrapper {
	width:778px;
	margin-left:auto; margin-right:auto;
	text-align:left;
}

Here is a very simple centered page:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centered</title>

	<style type="text/css">
		body {
			min-width:778px;
			text-align:center;
		}
		#wrapper {
			width:778px;
			margin-left:auto; margin-right:auto;
			text-align:left;
		}
	</style>
   
</head>

<body>
<div id="wrapper">
	
   This is a centered page!
   
</div>
</body>
</html>

I hope this makes sense

#3 (**permalink**) 04-15-2008

perfect sense....
you've saved the day once more
the result... a centered page.
http://www.jacksonao.com

#4 (**permalink**) 04-15-2008

I'm glad it worked for you.
We are going to teach CSS practically with examples. This will be the first example

so don't miss our sessions

#5 (**permalink**) 04-15-2008

I'll be sure to watch. I missed the start of the HTML lessons....

#6 (**permalink**) 04-15-2008

That's OK Sarah - the HTML classes are archived here and we won't start the next part of the series for about a month so you have plenty of time to catch up if you like.

P.S. site looks good!