views:

9908

answers:

8

I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.

<html>
<head>
<title>Welcome</title>
<style>
    #pageContainer {width:300px;margin:0 auto;text-align:center;}
    #toLogo{border:none; }
</style>
</head>
<body>
    <div id="pageContainer">
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a>
    </div>
</body>
</html>

I said it was really simple. :)

Thank you,

Brett

A: 

Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.

You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.

<html>
<head>
<title>Welcome</title>
<style>
    #container {text-align:center;border:1px solid blue}
    #pageContainer {width:300px; margin:0 auto; border:1px solid red}
    #toLogo{border:none; }
</style>
</head>
<body>
    <div id="container">
     <div id="pageContainer">
     <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a>
     </div>
    </div>
</body>
</html>

(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.

Bryan
That did center it in IE8, but I don't understand why I need it. I have other sites that use margin: 0 auto; to center a containing div.
Brettski
A: 

You probably want to change it to the following:

<html>
<head>
<title>Welcome</title>
<style>
    body { text-align: center; }
    #pageContainer {width:300px;margin:0 auto;}
    #toLogo{border:none; }
</style>
</head>
<body>
    <div id="pageContainer">
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a>
    </div>
</body>
</html>

The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).

Darryl Hein
christ knows why someone voted you down as this is exactly how you center a page
wheresrhys
As IE8 is actually standards compliant on this level, you can indeed apply the sepcification and standards. The text-align property only centers inline-level elements, and not block level eleements, as DIV is. text-align:center; in this case will only center the *text* within the body, not the container elements. The only thing he needs is a doctype, as the above answer states.
Arve Systad
+2  A: 

The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.

<html>
  <head>
    <title>Welcome</title>
    <style>
      body { text-align: center;}
      #pageContainer {width:300px; margin:0px auto;
            text-align:center; border:thin 1px solid;}
      #toLogo{border:none; }
    </style>
  </head>
  <body>
    <div id="pageContainer">
      <a href="http://portal.thesit.com" id="toSite">
        <img src="LOGO_DNNsmall.png" id="toLogo">
      </a>
    </div>
  </body>
</html>

I added a 1px border to the div so that you could see what was happening more clearly.

You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Welcome</title>
    <style>
      #pageContainer {width:300px; margin:0px auto;
            text-align:center; border:thin 1px solid;}
      #toLogo{border:none; }
    </style>
  </head>
  <body>
    <div id="pageContainer">
      <a href="http://portal.thesit.com" id="toSite">
        <img src="LOGO_DNNsmall.png" id="toLogo">
      </a>
    </div>
  </body>
</html>

Now you'll be able to see your 300 px div center on the page.

Nathan DeWitt
Automatic horizontal margins combined with a set width is the proper way to center block level elements. Common practice, try it yourself :)
Arve Systad
+17  A: 

Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>Welcome</title>
<style>    
    #pageContainer {width:300px;margin:0 auto;text-align:center;}    
    #toLogo{border:none; }
</style>
</head>

<body>

<div id="pageContainer">
    <a href="http://portal.thesit.com" id="toSite">
    <img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>

</body>
</html>
buti-oxa
buit-oxa, a very interesting answer indeed. Thank you.
Brettski
Doctype > quirks mode, any day. Quirks mode may differ from browser to browser, while standards mode is pretty much the same (yep, IE8 is standards compliant!) except a few minor differences. +1
Arve Systad
Honestly never heard of quirks mode before, thank you much for the answer and to teach me a little more about my craft.
Brettski
You are welcome.
buti-oxa
A: 

Microsoft say it is a bug. So be sure they will fix it in the next update...so my advice is not to change anything.

A: 

FOR BLUEPRINT USERS This drove my nuts, until i found this post: problem with ie8 and blueprint Long story short, in you html code change the

 <!--[if IE]>
 <link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

for

<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->

Regards Alex

Alex Angelico
A: 

Alejandro: Thank you!!! This drove me nuts as well.

Jeff
A: 

This works for me on IE6,7,8,FF 3.6.3:

    #container
    {
        width:100%;
    }

    #centered
    {
        width:350px;
        margin:0 auto;
    }

and

    <div id="container">
        <div id="centered">content</div>
    </div>

ben