Centering in IE issues

[samadhy]

This is my first time building a site with css.
so I’ve finally got this to look decent in IE, except for getting the centering in IE which looks fine elsewere. Can’t figure our where I’ve gone wrong.
Here’s my css.

Code:

@charset “UTF-8”;
/* CSS Document */

* {
margin: 0;
padding: 0;
}

body {
font-size: 62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: url(images/body-bg.png) repeat-x top;
text-align: center;
}

li {
font-size: 1.3em;
padding-top: 2px;
vertical-align: bottom;
}

.clear {
clear: both;
}

p {
font-size: 1.3em;
margin-bottom: 0.8em;
}

h1 {
font size: 3em;
margin-bottom: 0.8em;
}

h2 {
font size: 2em;
text-transform: uppercase;
margin-bottom: 0.8em;
}

h3 {
font size: 2em;
color: #CC0000;
text-transform: uppercase;
margin-bottom: 0.8em;
}

span.proud {
text-decoration: underline;
color: #E8d3A2;
font-size: 2em;
font-style: oblique;
text-align: center;
}

span.town {
font size: 2em;
color: #000000;
text-transform: uppercase;
}

span.copyright {
font-size: 1.4em;
}

div#page-wrap {
width: 950px;
margin: 0 auto;
text-align: left;
}

div#tagline {
width: 950px;
margin-left: 200px;
}

div#tagline p {
margin: 10px 1px 10px 60px;
}

div#logo {
background-image: url(images/FS_logo.png);
background-repeat: no-repeat;
background-position: top left;
float: left;
padding-bottom: 0px;
}

div#submenu {
float: right;
}

ul#navsub {
width: 950px;
float: right;
list-style: none;
padding-top: 1px;
padding-bottom: 25px;
}

ul#navsub li {
float: right;
text-align: left;
}

ul#navsub li a {
display: block;
width: 150px;
color: #000000;
font-weight: bold;
text-align: center;
text-decoration: none;
padding: 0px 0px 0px 0px;
}

ul#navsub li a:hover, ul#nav li a:active {
color: #CCCCCC;
}

ul#nav {
float: right;
list-style: none;
padding-top: 1px;
padding-bottom: 5px;
padding-right: 200px;
}

ul#nav li {
float: right;
text-transform: uppercase;
text-align: center;
}

ul#nav li a {
display: block;
width: 122px;
height: 34px;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-image: url(images/red.jpg);
background-repeat: no-repeat;
padding: 0px 0px 0px 0px;
}

ul#nav li a:hover, ul#nav li a:active {
background-image: url(images/grey.jpg);
background-repeat: no-repeat;
color: black;
}

div#main-content {
padding-bottom: 10px;
padding-top: 30px;
}

div#intro {
padding-top: inherit;
padding-bottom: inherit;
}

div#main-content div#left-col {
float: left;
width: 200px;
padding-top: 20px;
}

div#main-content div#left-col p {
padding-top: 5px;
}

div#main-content div#left-col div#cards {
float: left;
width: 200px;
vertical-align: bottom;
}

div#main-content div#left-col div#cards p {
padding-top: 50px;
}

div#main-content div#left-col p {
font-weight: bold;
}

div#main-content div#left-col a {
color: #666666;
text-decoration: none;
}

div#main-content div#left-col a:hover, a:active {
color: #000000;
text-decoration: underline;
}

div#main-content div#center-col {
float: left;
width: 500px;
padding-top: 20px;
}

div#main-content div#center-col p{
padding-top: 20px;
}

div#main-content div#center-col a {
color: #CC0001;
text-decoration: none;
}

div#main-content div#center-col a:hover, a:active {
color: #666666;
text-decoration: underline;
}

div#main-content div#center-col ul {
padding-left: 30px;
}

div#main-content div#center-col li {
list-style-type: disc;
}

div#main-content div#right-col {
float: right;
width: 230px;
padding-top: 30px;
padding-left: 20px;
background-image: url(images/form.gif);
background-repeat: no-repeat;
background-position: left;
}

div#main-content div#right-col form1 {

}

div#footer {
background: #E8d3A2;
color: white;
padding: 5px 0 5px 0;
text-transform: uppercase;
border-top: 5px solid #333333;
text-align: center;
}

div#footer p {
font-weight: bold;
}

div#footer a {
color: #666666;
text-decoration: none;
}

div#footer a:hover, a:active {
color: #000000;
text-decoration: underline;
}

The site is at http://www.foundationsolutions.com/index3.html

[Ngo-Baheng]

Which version of IE? If its IE5 then i dont think its possible to center using the margin: 0 auto trick.

Also if its IE5 then dont worry about it as most people on IE will be using IE6 upwards.

[TheDoc]

Looks like IE6 is the one causing you problems.

It miiiggghhht have something to do with the text-align: left; on the page wrap.

[Author]

Posts