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
  • 256 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by tranchibinh
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.