33

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

Brettski
  • 19,351
  • 15
  • 74
  • 97

6 Answers6

70

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">
<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
  • 11,261
  • 5
  • 35
  • 44
  • 3
    buit-oxa, a very interesting answer indeed. Thank you. – Brettski May 03 '09 at 05:29
  • 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 May 03 '09 at 14:03
  • Honestly never heard of quirks mode before, thank you much for the answer and to teach me a little more about my craft. – Brettski May 04 '09 at 03:29
  • I didn't realize adding Doctype and XHTML will resolve this. Thanks! – Viet Jun 04 '12 at 03:18
3

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">
<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
  • 6,511
  • 8
  • 46
  • 66
  • Automatic horizontal margins combined with a set width is the proper way to center block level elements. Common practice, try it yourself :) – Arve Systad May 03 '09 at 14:04
2

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
  • 3,453
  • 6
  • 26
  • 20
  • 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 May 03 '09 at 05:00
  • Old thread, but I'mma up this answer (and ALSO the commonly accepted one) simply because it was this answer in particular that reminded me to put text-align:center to the body. ;-) – Greg Pettit Jan 17 '12 at 19:11
0

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
  • 3,710
  • 8
  • 31
  • 49
0

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
  • 142,451
  • 95
  • 218
  • 261
  • christ knows why someone voted you down as this is exactly how you center a page – wheresrhys May 03 '09 at 12:05
  • 1
    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 May 03 '09 at 14:02
-1

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
  • 1