I need someone to help me find out why this CSS menu won't drop down in IE 6. It works in most other browsers, you can see the file here: http://mojavesf.com/solutions/nurture.html it's the top nav. If you can fix it, let me know your price and timing and I can send you the CSS file. thanks!
Messy code, but replace the last script element that you have with this... Also, I would fix this: <meta name="description" content=Nimblefish Nurtureâ„¢ ^ Add the quote and use ™ EDIT: This will not completely work because this should've been just one UL, but it's 3 and the nesting screws it up somehow..
Thanks for the try, any ideas on where to look to hack for IE6? I know the nesting ul is causing some problems but I'm not sure how else it could be coded.
Replace in between your menu comments in css Lol, this screws up horizontal borders and there's inconsistent spacing at the bottom. The borders on the left/right should be just a background image repeating down.
IE6 natively does not support :hover commnads, go IE! Although work-arounds do exist, and you should be able to implement them relatively easily. Here's one I found: http://lovepeacenukes.com/jquery/ie6cssfix/ And here's the original post for that script: http://www.nabble.com/Adding-:hover-css-support-to-IE6---ie6HoverFix-t4496424s15494.html
GWiz, Thanks for the info! Can you recommend anyone that could help me with implementing that script?
Dude. That script does the same thing that I provided you (from suckerfish dropdown article) in my first reply, which was adding a class to the LIs that get hovered upon with JS "onmouseover". Did you not try implementing it? It's just a copy paste. You'd have to install a whole fucking framework and a custom jquery script, and it'll be far, far slower than the simple function that I provided.
Mohave: I used your menu parameters to create the menu depicted in the screen shot. It's cross-browser, but uses AJAX/JavaScript, so your visitors that have JavaScript disabled will not see any menu. The menu was created from this .xml file, and obviously, would be very easy to maintain: <?xml version="1.0" ?> <menu> <main> <text>SOLUTIONS</text> <sub> <text>Overview</text> <link>./solutions/index.html</link> </sub> <sub> <text>Nimblefish Visionâ„¢</text> <link>./solutions/vision.html</link> </sub> <sub> <text>Nimblefish Advisorâ„¢</text> <link>./solutions/advisor.html</link> </sub> <sub> <text>Nimblefish Nurtureâ„¢</text> <link>./solutions/nurture.html</link> </sub> </main> <main> <text>TECHNOLOGY</text> <sub> <text>Overview</text> <link>./technology/index.html</link> </sub> <sub> <text>PURL</text> <link>./technology/PURL.html</link> </sub> <sub> <text>Individualized Print</text> <link>./technology/print.html</link> </sub> <sub> <text>Individualized Email</text> <link>./technology/email.html</link> </sub> <sub> <text>Dashboard</text> <link>./technology/dashboard.html</link> </sub> </main> <main> <text>SERVICES</text> <sub> <text>Overview</text> <link>./services/index.html</link> </sub> </main> <main> <text>CASE STUDIES</text> <sub> <text>Overview</text> <link>./casestudies/index.html</link> </sub> </main> <main> <text>COMPANY</text> <sub> <text>Overview</text> <link>./company/index.html</link> </sub> <sub> <text>Contact</text> <link>./company/contact.html</link> </sub> <sub> <text>Team</text> <link>./company/team.html</link> </sub> <sub> <text>Board Members</text> <link>./company/board.html</link> </sub> </main> </menu> Code (markup): To incorporate it in to your home page would require: -- Deleting all those nested lists -- Inserting one DIV -- Including one JavaScript .js file -- Including one external .css file -- Editing the css to properly position menu below your header image If interested, email me, to discuss terms.
I thought you edited your first post to say that your code didn't work 100% because of the nested LIs, did I read that wrong?
It works, but the visual effects/css positioning are still off by a BIT (not the JS). If you paste the css styles over top of what you currently have (save a backup of your old styles just incase) then it will look a little better and close to how it is on FF.
Why in the WORLD would you make an XML menu? This is mind boggling. Is this because of the "XML" in "Asynchronous Javascript and XML" ? Why the fuck would you need ajax for a dynamic effect that can be done without it (except in IE6).
Here is a sample of what I use on several website, and it works with IE6, IE7, Firefox, Opera, Netscape, Safari (haven't tried any others). <ul id="nav"> <li> <a href="/">Product Overview</a> <ul> <li> <a href="#">Website Builder</a> <ul> <li><a href="#">Listings</a></li> <li><a href="#">Modules</a></li> </ul> </li> <li><a href="#">Blog Manager</a></li> <li><a href="#">Financial Calculators</a></li> </ul> </li> <li><a href="#"><span>Developer Blog</span></a></li> <li><a href="#"><span>Updates</span></a></li> </ul> HTML: #nav{ list-style:none; width:500px; float:left; padding:2px 0 0; margin-bottom:3px; } #nav li{ float: left; margin-right: 3px; background: url(./bg_nav_li2.gif) no-repeat right top; text-transform: uppercase; font-size:75%; } #nav li a{ float: left; display: block; height: 22px; padding: 9px 14px 0; background: url(./bg_nav_li_a2.gif) no-repeat left top; color: #E0E9F1; text-decoration:none; border:none; } #nav li.current a{ background-position: left bottom; color: #27333A; } #nav li:hover, #nav li.sfhover{ background-position: right -31px; } #nav li.current:hover, #nav li.sfhover.current{ background-position: right bottom; } #nav li:hover a, #nav li.sfhover a{ background-position: left -31px; color: #FFF; } #nav li.current:hover a, #nav li.sfhover.current a{ background-position: left bottom; color: #27333A; } #nav li ul{ clear: left; position: absolute; left: -999em; z-index: 999; width: 161px; margin-top: 31px; margin-left: -1px; _margin-top: 0; /* IE6 only */ *margin-top:0; border: 1px solid #BABEB1; border-top: 0; border-bottom: 0; list-style: none; line-height: 1; } #nav li li{ display: inline; _display: block; float: none; _float: left; margin: 0; font-size: .9167em; text-transform: none; } #nav li ul ul{ margin: -31px 0 0 161px; } #nav li:hover ul ul, #nav li.sfhover ul ul{ left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul{ left: auto; } #nav li li li{ font-size: 1em; } #nav li li a{font-size:110%;} #nav li:hover li a, #nav li.sfhover li a{ float: none; width: 133px; height: auto; padding: 9px 14px; border-top: 1px solid #FBFCFE; border-bottom: 1px solid #D3D6CD; background: #F1F3EE; color: #384751; } #nav li:hover li a:hover, #nav li.sfhover li a:hover{ background: #DDEAF3; } HTML: sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } var sfEls = document.getElementById("user").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } var sfEls = document.getElementById("subtabs").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); HTML: