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? CSS: 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; } Code (markup): HTML: <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> ... Code (markup): Thanks!
Hey can you link me where this is live (with the relevant images, since im getting nasty red x's) And could it be: display:block;
I'm sorry, but unfortunately I cannot link to it 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). As for the display:block; code, I thought the same thing, but am not sure exactly how to fix it, as changing it to display:inline; didn't seem to help any. Please let me know if you can help, I'm willing to cooperate as much as possible. Thanks! UPDATE: I'm sorry, I just remembered I forgot to include another part of the CSS that the menu uses: Other 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; } Code (markup): Other HTML (right above the 'menu-container' code) and encloses entire menu: <div id="menubar-new"> Code (markup):
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
Hey, messed around a bit, but in all honestly, I am far better at writing my own than editing others, take a look at http://www.ashfrancis.com/test/test.html See if you can get anything from that (your welcome to take whatever you need from it)
Hey, thanks for taking your time to help. Does that 100% work and look nearly the same in both IE6/7/8 and Firefox/Opera? Though IE6/8/Firefox are the main important ones. I'm not at work right now, but I'll try to take a look more closely at this tomorrow and see if it helps. Thanks!!
Have not tested opera (Not at work until later today) but I am pretty sure that will display the same. Of course the drop down doesn't work in IE, I generally just make my menu's degradeable, but that htc file you linked above looks interesting.
Yes, with the help of the htc file and more messing around, I got it all to work right, EXCEPT for the drop down (sub menus) part. Everything seems to work just fine with IE7/8/Firefox/Opera with what I've changed, and though the static menu looks fine in IE6, no submenus appear thus making it useless. So I'm stuck again trying to figure it out, though I'm close to just giving up and forcing people to upgrade to IE8, lol. Anyway, thanks for the help.
Hey, I asked my boss today and he has a premade drop down for important sites which is fully transitional, sub menu's and everything, when I next go into work (I work part-time) ill get it from him and put it here for you should solve your problems. Btw, with the HTC thing, it requires some server settings, you sure you got them?
Oh, thank you so much! That would be awesome and much appreciated. As for the .htc file, all that the website said was to include it as a CSS behavior. I don't recall having to change anything else. What settings are you talking about? Thanks again!
Hah, here you go: http://ashfrancis.com/test/index.html Works in everything, even 5.5! Uses a bit of javascript instead of the htc file (so you still have valid CSS) Enjoy!