Uncommon IE6 css menu issues 1

[woetech]

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 (

http://www.xs4all.nl/~peterned/csshover.html)

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:

    #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:

  <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!

 

[woetech]

UPDATE: Here's a couple screenshots to help show what I mean:

What IE6 displays (ie6_menu_bug.jpg):

http://img.photobucket.com/albums/v230/LittlBUGer/Work/ie6_menu_bug.jpg

What it should look like (ie6_no_bug.jpg):

http://img.photobucket.com/albums/v230/LittlBUGer/Work/ie6_no_bug.jpg

I'm here to help.

 

[BillyRayPreachersSon]

I haven't tried this, but from memory, it should work:

On your floated list items that have a width of auto, try adding another width underneath for IE 6 only:

width: auto;
_width: 1px;

You might also need to do this with the anchors, although you might be able to get away without it.

If it works, you should move the setting into an IE 6-only style sheet, otherwise your CSS will not validate.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[BillyRayPreachersSon]

P.S. Why do you say it's "uncommon"? AFAIK, IE 6 always does this.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[woetech]

Thank you for replying. Not too long after I posted, I did finally figure out how to fix everything, at least when I test and go directly to the .html file. I put in some conditional code for IE6 to use the alternative css and used the javascript file above that I mentioned in my first post. Unfortunately, we program our sites in Netbeans and the way it compiles it, it seems to strip all standard HTML comments thus breaking my fix on the final code output. Now I'm trying to get it to work with javascript or straight css, but it's much more difficult it seems. I can get the menu to look correctly, but none of the submenus appear now. So as soon as I solved the one problem, another occurs, yet I'm even more clueless on this error. I've tried some of the 'Suckerfish dropdowns' code but it doesn't seem to do anything. Any other suggestions that you may have for me?

I'm sorry for labeling it 'uncommon' but at first I thought it was. Thanks.

I'm here to help.

 

[dkdude]

Great tip, Dan - I'll try it out on my next project! Cross-browsing-tips are always welcome