CODEWITHSUNDEEP
cssinternet-explorer-6
gnosis
gnosis

Reputation: 929

How to center a <div> element in IE6

trying to implement a dialog-box style behaviour using a separate div section with all the stuff inside it.

When the "dialog box" needs to be shown, it has to display at the center of the WINDOW, not in the center of the page, that is, REGARDLESS of the scroling position. Furthermore, the correct solution will not move the "dialog box" if the user scrolls the page.

In Chrome and FF this works using position='fixed' and centering the div in the intuitive way.

This does not seem to work in IE6 (apparently fixed is not supported there).

Any ideas?

Upvotes: 2

Views: 10365

Answers (3)

Piskvor left the building
Piskvor left the building

Reputation: 92782

Try the method outlined here.

Upvotes: 2

Paul Sweatte
Paul Sweatte

Reputation: 24627

Use overflow-y and absolute positioning to emulate fixed positioning in IE6 using the following steps:

  1. Create an absolutely positioned div and give it the desired top and left coordinates on the page

  2. Set html {overflow-y: } to be hidden or visible instead of the default auto or scroll to eliminate the scrollbar for the absolutely positioned div

  3. Set body{overflow-y: } to be auto or scroll to insert a new scrollbar for the body content

  4. Set body { margin:0; height:100% } to make sure the content scrollbar goes the length of the page

  5. Set top and left margins on the body to separate the content from the absolutely positioned div

  6. Make sure the doctype is set to trigger Standards Mode in IE

  7. Set the absolutely positioned div to top:50%; left:50%;

  8. Add position:relative and the desired opacity to the container div

If the doctype is not set, move the html rules to the body tag, and the body rules to a wrapper div

<!DOCTYPE html>
<html>
  <head>
  <style>
  body { margin:0; margin-left: 14em; }

  #fixedbox { position: fixed; top: 1em; left: 1em; width: 10em; }

  #fixedbox { padding: 0.5em; border: 1px solid #000; }

  #container { height: 2000px; }

  @media,
    {
    html { _overflow-y: visible; *overflow-y: auto; }
    body { _overflow-y: auto; _height: 100%; }
    #container { _position: relative; }
    #fixedbox { _position: absolute; _top:50%; _left: 50%; }
    }
   </style>
  </head>
  <body>
    <div id="container">
      Fixed box
    </div>

    <div id="fixedbox">
      Homer
    </div>
  </body>
</html>

Upvotes: 0

Perpetualcoder
Perpetualcoder

Reputation: 13591

If I were you I would do it using jQuery and I would suggest you try it out too. This should fit perfectly for jQuery based solution [jQuery Version][1] or try out

body { 
    font: 80% verdana, arial, helvetica, sans-serif;        
    text-align: center; /* for IE */    
}   

#container {        
    margin: 0 auto;   /* align for good browsers */         
    text-align: left; /* counter the body center */
    border: 2px solid #000;         
    width: 80%;     
}

Upvotes: 4

Related Questions