Member Avatar for rouse

I tried this code to center my main container, it works in FF, Chrome, and Safari, but not IE8.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <!-- Inline CSS -->
        <style type="text/css">
            body{
                background: black;
            }
            #container{
                position: absolute;
                margin: 0 auto;
                width: 59.375em;
                height: 52.25em;
                /*                background: #ffffff url('img/greyGradiant.png');
                                background-repeat: repeat-y;
                */
                background-color: white;
                border-style:solid;
                border-width:1px;
                border-color: red;
            }
        </style>
        <title>Starter for</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <div id="container">
            <p>TODO write content </p>
            <p>TODO write content </p>
            <p>TODO write content </p>
            <p>TODO write content </p>
            <p>TODO write content </p>
            <p>TODO write content </p>
        </div>
    </body>
</html>

Also "min-height" does not seem to work with IE8 also.

  • 5 Contributors
  • 7 Replies
  • 277 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by tranchibinh

Dani AI

Generated

A few focused notes and actionable fixes that address what the thread shows.

The root cause is that the layout is relying on an absolutely positioned box while expecting margin: 0 auto to centre it. Different IE modes/versions treat auto margins on positioned elements inconsistently, and “min-height not working” is commonly a symptom of IE running in quirks/compatibility mode. The body text-align:center trick that and used is a valid workaround, but it masks the underlying issue rather than fixing it.

Quick checklist to diagnose

  • Confirm the page is in standards mode (valid DOCTYPE) and check IE’s Document/Browser Mode with F12.
  • Verify there is no positioned ancestor (an ancestor with position other than static becomes the containing block for absolute children).
  • Make sure the container has an explicit width.
  • If IE is forcing compatibility, add an early X-UA-Compatible directive.

Example meta to prefer standards mode (place near the top of the head):

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Recommended fixes

  • Best: remove absolute positioning and use a normal block with a fixed width and automatic side margins (this is the most robust approach across browsers).
  • If you must keep absolute positioning, center reliably by anchoring both sides and letting auto margins do the work:
#container {
  position: absolute;
  left: 0;
  right: 0;
  width: 960px;   /* explicit width required */
  margin: 0 auto;
}

If older IE still refuses to obey min-height, it usually means IE is rendering in quirks/compatibility mode. As a fallback for older IE versions you can supply an explicit height via conditional comments:

<!--[if lt IE 8]>
<style>
  #container { height: 520px; } /* fallback when min-height is ignored */
</style>
<![endif]-->

Putting this together: check Document Mode first, remove absolute positioning if possible (as suggested), and only use the body text-align:center hack as a last resort. and were right to point out IE’s quirks — the goal is to correct the document mode and container positioning so browsers behave consistently.

Recommended Answers

All 7 Replies

Member Avatar for ko ko

The container is absolute position and the margin auto ignore in IE. Remove the "position: absolute" from the container. The style tag should be write after the title tag and meta tags.

Member Avatar for rouse

The absoulute position was placed there after reading a fix for the problem. Removing it does not resolve the issue for IE8, nor does repositioning the CSS.
Thanks!

Member Avatar for ko ko

You was not give the x and y position for container. If there is no specify value for x and y position, IE use it default value '0'. So the container would be top left corner of the browser window. You need to give the x and y position for IE. Here is example:

#container {
     position: absolute;
     top: 0;
     left: 50%
     }

Go there, it will explain you better.

Member Avatar for jpadams

Try adding this to the Container Div and remove the postion absolute.

text-align: center;
	margin-left: auto;
	margin-right: auto;
Member Avatar for rouse

I found this on a search on the web a few seconds ago. The key seems to be to place the center align for the text in the body.

body{
                background: black;
                /* This fixes the center for IE */
                text-align: center;
            }

            #container{
                margin: 0 auto;
                margin-top: 0px;
                width: 59.375em;
                height: 52.25em;
                /* This counter the body center */
                text-align: left;
               ...
Member Avatar for MidiMagic

I found this on a search on the web a few seconds ago. The key seems to be to place the center align for the text in the body.

This is a known bug in IE rendering.

Absolute positioning is another known bug in IE. It does not render the same as other browsers render it.

Edited by MidiMagic because: n/a
Member Avatar for tranchibinh

I have a simple idea to solve your problem

body{
                background: black;
                /* This fixes the center for IE */
                text-align: center;
            }

            #container{
                margin: 0 auto;
                width: 59.375em;             
                text-align: center;
                background-color: white;
                border-style:solid;
                border-width:1px;
                border-color: red;}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.