Code Question: Why will this div/img not center in IE8?

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

From stackoverflow

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.

Brettski : 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.
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).

wheresrhys : christ knows why someone voted you down as this is exactly how you center a page

Arve Systad : 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.

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.

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

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>
```
Brettski : buit-oxa, a very interesting answer indeed. Thank you.

Arve Systad : 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

Brettski : Honestly never heard of quirks mode before, thank you much for the answer and to teach me a little more about my craft.

buti-oxa : You are welcome.
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.

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

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

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>

Code Question

Tuesday, March 15, 2011

Why will this div/img not center in IE8?

0 comments:

Post a Comment

Blog Archive