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开发者_JAVA百科://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
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?
Make sure you have set the DOCTYPE. If not IE will enable quirk "dirty mode"
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.
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.
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.
try using
display:block;
for the container
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">…</div>
</body>
</html>
加载中,请稍侯......
精彩评论