CODEWITHSUNDEEP
cssinternet-explorer-7centering
user632097
user632097

Reputation: 23

Can't center site in IE7

This is an embarrassingly basic problem, but I've been wracking my brains trying to find the solution and finally the frustration got too much for me...

All I'm trying to do is center a website in IE7. It works fine in Firefox, Safari, IE8, and Chrome. Just not IE7:

#container
{
    margin:0 auto;
    width:1035px;
}

I just can't see how this can go wrong. I've tried strict and transitional doctypes, I've also put the body in a text-align:center (makes no difference).

Any advice on this matter would be gratefully received.

Ok, here's (some of the) surrounding code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->

</head>
<body>

    <div id="container">

        <div id="content-container">
            <div id="content">

                /* content */               

            </div>

        </div>
    </div>
</body>
</html>

CSS (main):

html,body
{
    text-align: center;
    background-color:#F8F5EF;
    height:100%;
    margin:0;
    padding:0;
    width:100%;

}

#container
{
    margin: 0 auto;
    width:1100px;
}

#content-container
{
    float: left;
    width: 1100px;
    background-image:url('../images/BG1.gif');
    background-repeat:no-repeat;
    background-position:0px 0px;    
}

#content
{
    float: left;
    width: 778px;
    padding: 15px 0px 80px 15px;
    margin: 0 0 60 0px;

}

The IE7.css file doesn't modify those items.

Thanks!

G

Upvotes: 1

Views: 4699

Answers (7)

Tom Vojtek
Tom Vojtek

Reputation: 21

Make sure you have set the DOCTYPE. If not IE will enable quirk "dirty mode"

Upvotes: 2

Domokun
Domokun

Reputation: 2780

You could try doing this for your container: 

#container {
   position: absolute;
   margin:0 0 0 50%;
   width:1100px;
   left: -550px; /*half the element width*/
}

If the above doesn't fit your needs, try position:relative;

I found using percentage margins worked for IE7 when nothing else did. Though auto margins seem to work sometimes - your code in jsFiddle seemed fine under IE7.

The negative positioning to the left is needed to bring back the element, which is centered from its left edge.

Upvotes: 1

TNC
TNC

Reputation: 5386

Without posting your surrounding HTML/CSS we can't really help, as this code works in all IE (just tested)

Live Example

Which leads me to believe you have something affecting the styles. If you can show that or provide a link, I think more help can be provided.

Here is the CSS used:

#content {
    width:     100px;
    margin: 0 auto;
    border: 1px dashed red;
}

HTML used:

<div id="content">
        content here
    </div>

Updated code, using your css/html provided:

http://jsfiddle.net/hyVjs/2/

This code is fine. One of your sub css files is messing you up :)

Have you tried removing your conditional css files and see if it still isn't working?

Upvotes: 2

Marcel
Marcel

Reputation: 28087

Yeah, if I'm going to center a container, I usually text-align:center; the body and left align inside the container for backwards compatibility. Old habit I'm going to kill some day.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>a box</title>
        <style>
            body { text-align:center; }
            #wrap { width:36em; padding:2em; margin:1em auto; text-align:left; background:#eee; }
        </style>
    </head>
    <body>
        <div id="wrap">&hellip;</div>
    </body>
</html>

Upvotes: 0

Ian Wood
Ian Wood

Reputation: 6573

text-align is for aligning text...

in ie7 make sure you have given the parent container a width other than auto then all should be well.

Upvotes: 1

Muhamad Bhaa Asfour
Muhamad Bhaa Asfour

Reputation: 1035

try using 

display:block;

for the container

Upvotes: 0

Jogendra
Jogendra

Reputation: 111

If the container is a DIV then

#container
{
    margin:0 auto 0 auto;
    position:relative;
    width:1035px;
}

if it does not work, use a css-reset first. It will definitely work.

Upvotes: 0

Related Questions