IE 6 bug centering div tag with absolute positioning

Question

div id="outer" style="width:100%; text-align:center"

div style="position:absolute; top:197px; text-align: center; width:858px; margin:auto; left: 0; right:0"

I am using these 2 div tags to center a menu. Works beautifully except in IE 6.

I looked through the other questions, tried several things but nothing worked.

I would appreciate any suggestions,

Answer 1

First off...make sure your page has the proper DOCTYPE definition. Otherwise IE6 will go into quirks mode and make it near impossible to get your layout the way you want it.

HTML doctype declaration

Second of all...why the absolute positioning? You could just as easily have a single div like this:

<div style="width: 858px; margin-top: 197px; margin-left: auto; margin-right: auto;" />

Which should center the div exactly the way you want it (as long as I got everything right off the top of my head).

Answer 2

If you must have the absolute positioning, I seem to recall that you can do some tricks with margin in IE6.

<div id="outer" style="width:100%; text-align:center">
   <div style="position:absolute; top:197px; text-align:center; width:858px; left: 50%;border:solid 1px red;margin-left:-429px;">
      My Menu
   </div>
</div>

Answer 3

Try adding position:relative; to your outer div. And, like Justin suggests, make sure you're using a DOCTYPE.

Without an example of what should happen and what is happening it's hard to give a definitive answer.