CSS Menus ayant des problèmes de navigateur croix

Question

Je suis en train de résoudre un problème avec un menu CSS où le menu ne s'affiche pas correctement dans IE 6 alt text http://content.screencast.com/users/Dokmanc/folders/Jing/media/72b0aae5-4e7a-437e-8a57-da892b05b7ad/2010-06-15_2056.png

Je vois que le code HTML a un code conditionnel pour le faire fonctionner avec différents navigateurs mais je ne le comprends pas assez bien.

Est-ce que quelqu'un peut suggérer un correctif pour que l'onglet sélectionné s'affiche dans l'ordre sans la grille grise?

Merci!

Voici le CSS:

#pad 
{ 
    height: 140px; 
} 
.dropline 
{ 
    position: relative; 
    padding-bottom: 0px; 
    list-style-type: none; 
    margin: 0px 0px 0px 5px; 
    padding-left: 0px; 
    width: 860px; 
    padding-right: 0px; 
    background: url(../images/menus/ulback.gif) repeat-x; 
    height: 40px; 
    top: 0px; 
    list-style-image: none; 
    padding-top: 0px; 
    left: 5px; 
} 
.dropline TABLE 
{ 
    margin: -3px -10px; 
    width: 25px; 
    border-collapse: collapse; 
    height: 17px; 
} 
.dropline LI 
{ 
    margin-bottom: 0px; 
    float: left; 
} 
.dropline LI A 
{ 
    padding-bottom: 0px; 
    line-height: 40px; 
    padding-left: 0px; 
    padding-right: 19px; 
    display: block; 
    font-family: tahoma, sans-serif; 
    float: left; 
    height: 40px; 
    color: #fff; 
    font-size: 12px; 
    text-decoration: none; 
    padding-top: 0px; 
} 
.dropline A 
{ 
    text-align: right; 
    padding-bottom: 0px; 
    line-height: 40px; 
    padding-left: 0px; 
    padding-right: 19px; 
    font-family: tahoma, sans-serif; 
    float: right; 
    height: 40px; 
    color: #fff; 
    font-size: 12px; 
    text-decoration: none; 
    padding-top: 0px; 
} 
.dropline A:hover 
{ 
    color: yellow; 
} 
.welcomeuser 
{ 
    text-align: right; 
    padding-bottom: 0px; 
    line-height: 40px; 
    padding-left: 20px; 
    padding-right: 0px; 
    font-family: tahoma, sans-serif; 
    float: right; 
    height: 40px; 
    color: #fff; 
    clear: inherit; 
    font-size: 12px; 
    text-decoration: none; 
    padding-top: 0px; 
} 
.dropline LI A B 
{ 
    padding-bottom: 0px; 
    padding-left: 20px; 
    padding-right: 0px; 
    display: block; 
    float: left; 
    height: 40px; 
    cursor: pointer; 
    padding-top: 0px; 
} 
.dropline UL 
{ 
    z-index: 10; 
    border-bottom: #fff 1px solid; 
    position: absolute; 
    padding-bottom: 0px; 
    list-style-type: none; 
    margin: 0px; 
    padding-left: 0px; 
    width: 860px; 
    padding-right: 0px; 
    background: #f8f8f8; 
    height: 25px; 
    border-top: #ff9933 3px solid; 
    top: 40px; 
    list-style-image: none; 
    padding-top: 0px; 
    left: -9999px; 
} 
.dropline UL LI 
{ 
    line-height: 25px; 
    height: 25px; 
} 
.dropline UL.right LI 
{ 
    float: right; 
} 
.dropline UL LI A 
{ 
    padding-bottom: 0px; 
    line-height: 25px; 
    padding-left: 10px; 
    padding-right: 10px; 
    height: 25px; 
    color: #000; 
    font-size: 11px; 
    font-weight: bold; 
    border-right: #e60 1px solid; 
    padding-top: 0px; 
} 
.dropline UL LI A:hover 
{ 
    line-height: 25px; 
    background: none transparent scroll repeat 0% 0%; 
    height: 25px; 
    color: #c60; 
} 
.dropline UL.right LI A 
{ 
    border-left: #e60 1px solid; 
    border-right: 0px; 
} 
.dropline UL LI A.last 
{ 
    border-bottom: 0px; 
    border-left: 0px; 
    border-top: 0px; 
    border-right: 0px; 
} 
.dropline :hover UL 
{ 
    left: 0px; 
} 
.dropline LI.current UL 
{ 
    z-index: 1; 
    left: 0px; 
} 
.dropline LI.current A 
{ 
    line-height: 36px; 
    background: url(../images/menus/tab_a.gif) no-repeat right top; 
    height: 44px; 
} 
.dropline LI.current A B 
{ 
    line-height: 36px; 
    background: url(../images/menus/tab_b.gif) no-repeat left top; 
} 
.dropline LI.current UL LI A 
{ 
    padding-bottom: 0px; 
    line-height: 25px; 
    padding-left: 10px; 
    padding-right: 10px; 
    background: none transparent scroll repeat 0% 0%; 
    height: 25px; 
    color: #000; 
    padding-top: 0px; 
} 
.dropline LI.current UL LI.current_sub A 
{ 
    color: #c60; 
} 
.dropline LI.current UL LI A:hover 
{ 
    color: #c60; 
} 

Et voici le balisage ASPX:

<div id="top_nav"> 
    <asp:ContentPlaceHolder ID="phTopNav" runat="server"> 
     <!-- MENU --> 
     <ul id="dropline" class="dropline" runat="server" style="left: -6px; top: -2px; width:1000px;" clientidmode="Static"> 

      <li runat="server" id="Home"> 
       <a runat="server" id="lnkHome" href="../Default.aspx" 
       title="Go to the Home page"><b>Home</b> 
       <!--[if gte IE 7]><!--></a> 
       <!--<![endif]--> 
       <!--[if lte IE 6]> 
       <table> 
        <tr> 
         <td> 
          <![endif]--><!--[if lte IE 6]> 
         </td> 
        </tr> 
       </table> 
       </a><![endif]--> 
      </li> 

      <li runat="server" id="ApplyNow"> 
       <a runat="server" id="lnkEditOrder" href="../OrderChinaVisa.aspx" title="Use our Price Calculator and simultaneously begin the China Visa application process!"><b>Apply Now!</b> 
       <!--[if gte IE 7]><!--></a> 
       <!--<![endif]--> 
       <!--[if lte IE 6]> 
       <table> 
        <tr> 
         <td> 
          <![endif]--><!--[if lte IE 6]> 
         </td> 
        </tr> 
       </table> 
       </a><![endif]--> 
      </li> 
      <li runat="server" id="CheckStatus"> 
       <a id="lnkCheckStatus" runat="server" href="../Check_Status.aspx" 
       title="Check on the status of a placed order"><b>Check Status</b><!--[if gte IE 7]><!--></a><!--<![endif]--> 
       <!--[if lte IE 6]> 
       <table> 
        <tr> 
         <td> 
          <![endif]--><!--[if lte IE 6]> 
         </td> 
        </tr> 
       </table> 
       </a><![endif]--></li> 
      <li runat="server" id="Affiliate"> 
       <a id="lnkAffiliate" runat="server" href="../Secure/VisaActivity.aspx" 
       title=""><b>Affiliate</b><!--[if gte IE 7]><!--></a><!--<![endif]--> 
       <!--[if lte IE 6]> 
       <table> 
        <tr> 
         <td> 
          <![endif]--><!--[if lte IE 6]> 
         </td> 
        </tr> 
       </table> 
       </a><![endif]--></li> 
     </ul> 
    </asp:ContentPlaceHolder> 
</div> 

Answer 1

Mec, Débarrassez-vous de toutes ces conneries conditinal dans votre balisage et cela fonctionnera pour toutes les versions de IE.

Answer 2

Fondamentalement, les conditionals font que le tableau visible pour les navigateurs IE6 et ci-dessous. Si vous obtenez seulement le problème dans IE6, vous pouvez jouer avec les paramètres CSS pour

.dropline TABLE 
{ 
    margin: -3px -10px; 
    width: 25px; 
    border-collapse: collapse; 
    height: 17px; 
}