CSS Menus having cross browser problems

Question

I am trying to solve a problem with a CSS menu where the menu does not display properly in IE 6

I see that the HTML has some conditional code to make it work with different browsers but I do not understand it well enough.

Can someone suggest a fix so the selected tab in order displayed without the grey breaK?

Thanks!

Here's the 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;
}

And here's the ASPX markup:

<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

Basically, the conditionals are making that table visible to IE6 browsers and below. If you're only getting the problem in IE6, you might play with the css settings for

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

Answer 2

Dude, Get rid of all that conditinal crap in your markup and it'll work for all versions of IE.