Hello. I know all about the damn IE6 'hover' menu problem, yet have only just came to not being able to fix it with a new site I edited. In IE7/8 and Firefox and Opera, the menu looks and works great. It's a horizontal menu. Unfortunately, in IE6 each top menu item or header is using the full width of the page and thus each one is on a new line, completely screwing everything up. I'm using the .htc file from here ( to fix some things, but the menu still isn't displayed horizontally properly, each main header menu is on a new line instead of all on one line. Please, can someone tell me what stupid line of code I need to fix IE6?
I'm sorry, but unfortunately I cannot link to the page as it's a secure web page only viewable to admins and customers. You should be able to edit the links in the href code though or just replace them with '#' just to test. And don't worry about the arrow_grey images as all that is is an image that changes between one or the other when you hover over the menu (a right arrow or a down arror when hovering over the menu).
CSS:
HTML:
Thanks!
I'm sorry, but unfortunately I cannot link to the page as it's a secure web page only viewable to admins and customers. You should be able to edit the links in the href code though or just replace them with '#' just to test. And don't worry about the arrow_grey images as all that is is an image that changes between one or the other when you hover over the menu (a right arrow or a down arror when hovering over the menu).
CSS:
Code:
#menubar-new {
width: 100%;
background-color: #069;
color: #CCC;
border-top: 1px solid black;
border-bottom: 1px solid black;
vertical-align: middle;
white-space: nowrap;
padding-bottom: 1px;
margin-bottom: 1px;
z-index: 99;
font-size: small;
}
ul#navigation-1 {
margin:0;
padding:0;
list-style:none;
width:100%;
height:21px;
border-top:1px solid #006699;
border-bottom:1px solid #006699;
font-weight:bold;
font-size:inherit;
font-family:inherit;
}
ul#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:auto;
border-top:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
}
ul#navigation-1 li a span, ul#navigation-1 li:hover a span, ul#navigation-1 li a:hover span {
position:relative;
vertical-align:top;
font-size:12pt;
color:#FFFFFF;
}
ul#navigation-1 li a span.onhover1, ul#navigation-1 li:hover a span.onhover2, ul#navigation-1 li a:hover span.onhover2 {
display:inline;
vertical-align:middle;
}
ul#navigation-1 li a span.onhover2, ul#navigation-1 li:hover a span.onhover1, ul#navigation-1 li a:hover span.onhover1 {
display:none;
vertical-align:middle;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited, ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
padding-top:2px;
padding-bottom:5px;
padding-left:6px;
padding-right:6px;
display:block;
text-align:left;
text-decoration:none;
color:#ffffff;
width:auto;
height:13px;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited {
background:#006699;
}
ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
background:#2288BB;
}
ul#navigation-1 li ul.navigation-2 {
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
width:auto;
position:absolute;
top:21px;
left:-1px;
}
ul#navigation-1 li:hover ul.navigation-2 {
display:block;
border-top:none;
}
ul#navigation-1 li ul.navigation-2 li {
width:100%;
clear:left;
border-top:none;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited, ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover {
clear:left;
padding-top:2px;
padding-bottom:5px;
padding-left:6px;
padding-right:6px;
width:auto;
position:relative;
z-index:1000;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited {
background:#006699;
}
ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover {
background:#2288BB;
}
ul#navigation-1 li ul.navigation-2 li a span, ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span {
position:relative;
vertical-align:top;
font-size:12pt;
}
ul#navigation-1 li ul.navigation-2 li a span {
color:#FFFFFF;
}
ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span {
color:#000000;
}
HTML:
Code:
<div id="menubar-new">
<div id="menu-container">
<ul id="navigation-1">
<li>
<a href="Home.shtml" title="Status">Status</a>
</li>
<li><a href="#" title="Maintenance">Maintenance <span class="onhover1"><img alt="" border="0" src="images/arrow_grey2.gif"></span><span class="onhover2"><img alt="" border="0" src="images/arrow_grey2_down.gif"></span></a>
<ul class="navigation-2">
<li><a href="BusinessReport.shtml?DeferQuery=true">Businesses</a></li>
<li><a href="TerminalReport.shtml?DeferQuery=true">Terminals</a></li>
<li><a href="BankRecordReport.shtml?DeferQuery=true">BankRecords</a></li>
<li><a href="ContractReport.shtml?DeferQuery=true">Contracts</a></li>
<li><a href="RegEReport.shtml?DeferQuery=true">RegEs</a></li>
<li><a href="MessageReport.shtml?DeferQuery=true">Messages & Alerts</a></li>
<li><a href="UserReport.shtml?DeferQuery=true">Users & Security</a></li>
<li><a href="TroubleTicketReport.shtml?DeferQuery=true">Call Tickets</a></li>
<li><a href="WizardReport.shtml?DeferQuery=true">Wizards</a></li>
<li><a href="WirelessAssociationReport.shtml?DeferQuery=true">Wireless Associations</a></li>
<li><a href="WorkflowReport.shtml?DeferQuery=true">Workflows</a></li>
<li><a href="BillingGroupReport.shtml?DeferQuery=true">Billing Groups</a></li>
<li><a href="RecurringChargeReport.shtml?DeferQuery=true">Recurring Adjustments</a></li>
<li><a href="AdjustmentReport.shtml?DeferQuery=true">Adjustment Journal</a></li>
</ul>
</li>
<li><a href="#" title="Reports">Reports <span class="onhover1"><img alt="" border="0" src="images/arrow_grey2.gif"></span><span class="onhover2"><img alt="" border="0" src="images/arrow_grey2_down.gif"></span></a>
<ul class="navigation-2">
<li><a href="ComplianceReport.shtml?DeferQuery=true&$lr_override=true">Compliance Report</a></li>
<li><a href="ComplianceDetail.shtml?DeferQuery=false&$lr_override=true">Compliance Detail Report</a></li>
<li>
...
Thanks!