IE 6 bug centrage balise div avec le positionnement absolu

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">

J'utilise ces deux balises <div> pour centrer un menu. Il fonctionne magnifiquement, sauf dans IE 6.

J'ai regardé les autres questions, essayé plusieurs choses mais rien n'a fonctionné.

J'apprécierais toutes les suggestions.

Answer 1

Tout d'abord ... assurez-vous que votre page a la définition DOCTYPE appropriée. Autrement IE6 passera en mode bizarreries et rendra presque impossible d'obtenir votre mise en page comme vous le souhaitez.

HTML doctype declaration

Deuxièmement ... pourquoi le positionnement absolu? Vous pourriez tout aussi facilement avoir un seul div comme ceci:

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

qui devrait centrer la div exactement comme vous le voulez (tant que je suis tout juste à côté du haut de ma tête).

Answer 2

Si vous devez avoir le positionnement absolu, il me semble que vous pouvez faire quelques astuces avec marge dans 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

Essayez d'ajouter position:relative; à votre outer div. Et, comme Justin suggests, assurez-vous que vous utilisez un DOCTYPE.

Sans un exemple de ce devrait se produire et ce qui est qui se passe, il est difficile de donner une réponse définitive.