I am trying to solve a problem with a CSS menu where the menu does not display properly in IE 6
alt text http://content.screencast.com/users/Dokmanc/folders/Jing/media/72b0aae5-4e7a-437e-8a57-da892b05b7ad/2010-06-15_2056.png
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>
Dude,
Get rid of all that conditinal crap in your markup and it’ll work for all versions of IE.