CFMENU dans IE6 se décale vers la gauche et est plus large que contenant DIV

J'ai un CFMENU horizontal à l'intérieur d'un DIV, et dans IE7/IE7/FF/Chrome, le menu est flottant vers la droite, comme spécifié dans mon CSS, mais dans IE6, le menu se décale vers la gauche de la DIV qui le contient, et sa largeur s'étend au-delà des limites de la DIV contenant. J'ai inclus tous les fichiers HTML et CSS applicable ci-dessous:CFMENU dans IE6 se décale vers la gauche et est plus large que contenant DIV

HTML:

<body> 
    <div align="center"> 
     <div id="bodyContainer"> 
      <div class="contentContainer"> 
       <div id="middlenav"> 
        <div class="linksContainer"> 
         <cfmenu name="ajaxMenu" type="horizontal"> 

         ... 

         </cfmenu> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

CSS:

body, img, div, p, a, form, fieldset, ol, ul, label { 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    border: none; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 15px; 
    color: black; 
} 



body { 
    background-color: #E6E6E6; 
    background-repeat: repeat-x; 
    width: 100%; 
} 



div { 
    overflow: hidden; 
} 



p, form, table, ol, ul { 
    padding-top: 10px; 
} 



ol ul { 
    padding-top: 5px; 
    list-style-type: disc; 
} 



ol, ul { 
    margin-left: 30px; 
} 



li { 
    padding-bottom: 5px; 
} 



a { 
    text-decoration: none; 
} 



a:hover { 
    text-decoration: underline; 
} 



.linksContainer { 
    float: right; 
    padding-top: 5px; 
    padding-bottom: 5px; 
} 



.linksContainer a { 
    font-size: 13px; 
} 



.contentContainer { 
    background-color: white; 
    border-color: #00338D; 
    border-style: solid; 
    border-width: 2px; 
    border-top: none; 
    border-bottom: none; 
} 



#ajaxMenu { 
    width: 960px; 
} 



#ajaxMenu, 
#ajaxMenu div.bd, 
#ajaxMenu ul, 
#ajaxMenu li.yuimenubaritem { 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    background: white; 
} 



#ajaxMenu a.yuimenubaritemlabel { 
    border-color: black; 
    border-width: 0px 0px 0px 2px; 
} 



#ajaxMenu li.first-of-type .yuimenubaritemlabel { 
    border-left-width: 0px; 
} 



#ajaxMenu ul { 
    height: auto; 
    width: auto; 
    border-style: none; 
} 



/* Hide down arrow on CF_generated AJAX menus */ 
#ajaxMenu .submenuindicator { 
    visibility: hidden; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    width: 0px; 
} 



#ajaxMenu li { 
    height: auto; 
    width: auto; 
} 



#ajaxMenu li.yuimenuitem { 
    margin-bottom: -5px; 
} 



#ajaxMenu li.yuimenuitem a { 
    padding: 5px 12px 5px 12px; 
} 



#ajaxMenu li a { 
    font-size: 13px; 
    padding: 1px 8px 1px 8px; 
    text-decoration: none !important; 
}

Source

2010-07-22 Eric Belair

Veuillez faire une faveur à vos utilisateurs et cesser de soutenir IE6. Gmail ne prend même pas en charge IE6. Microsoft a des employés dont la seule fonction consiste à s'assurer qu'IE6 s'en va. Allons aider! :) – jarofclay

C'est une hiérarchie folle que vous avez là. – Amit

je crois que vos principaux problèmes sont que IE6 ne reconnaît pas l'existence du cfmenu comme une balise valide pour le ciblage css (ce n'est pas un code HTML valide), et même si cela est changé en balise valide comme div, il doit avoir l'ensemble id, pas le name, pour que css le stylise.

Source

2010-07-22 19:30:40 ScottS

cfmenu est traité côté serveur et génère un code HTML valide (ish). – jarofclay

D'accord, alors M. Belair devrait publier le HTML généré si cela va être débogué. – ScottS

IE6 est généralement éjecté par le "rembourrage". Google "boîte modèle IE6". Vous pouvez essayer de mettre à zéro les bourrages gauche et droit et d'utiliser des marges à la place (si nécessaire) pour résoudre le problème.

Source

2010-08-02 02:54:10 eapen

CFMENU dans IE6 se décale vers la gauche et est plus large que contenant DIV

Répondre

Questions connexes