CODEWITHSUNDEEP
cssinternet-explorer-6
Deborah
Deborah

Reputation: 21

IE 6 bug centering div tag with absolute positioning

<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 two <div> tags to center a menu. It works beautifully except in IE 6.

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

I would appreciate any suggestions.

Upvotes: 1

Views: 2795

Answers (3)

Justin Niessner
Justin Niessner

Reputation: 245459

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

Upvotes: 1

Zack The Human
Zack The Human

Reputation: 8481

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.

Upvotes: 0

Joel
Joel

Reputation: 19368

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>

Upvotes: 0

Related Questions