Drop-down nav menus, IE6 and FF

I've found a couple of nice sites that have CSS code for dropdown navs, and they look nice, so I told my colleague next to me to try that instead of javascripting every single menu option (we're still slowly changing the site from html-design to css design).

Results using code from these sites looks great in FF and Opera (9+) but in IE the menu was an up-and-down list.

So for the first time I looked at this one site in IE (using Linux I have a fake IE that doesn't always render sites like native IEs do), and it was also a left-sided list.

Site: http://phoenity.com/newtedge/horizontal_nav/

Looking around here for people with nav problems, I couldn't tell whether this was a specific IE problem, a quirks mode thing, or haslayout problem.

In one thread Dan says something about adding another float:left to the second id. But there's not always more than one #id, or there's only a class. I'm still learning CSS and html so I may not be clear on when to use one or the other.


Here's his site looking fine with an old FF: http://s34.photobucket.com/albums/d136/schroedingerscat/?action=view&current=FFScreenshot.png

Here's the site looking like ours now does in IE6 and 7:
http://s34.photobucket.com/albums/d136/schroedingerscat/?action=view&current=IEScreenshot.png

I made these as links because I didn't shrink the images down.

Anyway, I'd like to insist our site use as much css as possible and as little scripting as possible, and though there were many similar codes for making nav buttons, I'd like to know what the cause is in this. I'm sure it's a one-liner.

 

Yeah, that site doesn't work in IE correctly, mostly from buggy positioning code and little or no attempt to support IE.

TYPICAL. Of course, there are the telltale warnings when you look at their deployed code with the crappy formatting and unneccessary presentational tags... and the use of display:table-cell

Hang on, I'll toss together an example based on theirs that actually WORKS cross-browser...

 

google for stu nichols -> click on menus and bam.. there ya go.

 

I don't recommend Stu's "tutorials" because they rely on inproper uses of HTML delivered through conditional comments to hide the table code from other browsers.

Instead, I suggest you look at this:
http://www.htmldog.com/articles/suckerfish/dropdowns/

 

Yeah, Suckerfish menus is the way to go, I use them on most of the web sites - haven't had any problems so far.

 

Okay, suckerfish is saying that javascript is to be used against IE mousehover problem-- is this still for IE7?

The original idea to get away from javascript (not that 12 lines in CSS sheet is bad compared to the 2 paragraphs we have plus the 2 lines for every single menu option : ) was inspired we I re-found the monkeyflash page on navbars that someone here a long time ago linked to. We were like, o wow!

But then we were like, oh, we have sub-menus, up to three layers.

So I know I don't understand everything, but it looks like on Suckerfish that for every layer you add, you need to make new ids and set params for each. Can't that be turned into some kind of global that is inherited down? Because we've only got 3 layers but hoped that if say a 4th layer or so was needed, that simply adding the next li in the html would do it.
Does Suckerfish do this because it ensures total cross-browser compatability, or to make what they're doing more clear to someone trying their code out? Or does it have something to do with the way they position the sub-menus (ours are supposed to extend the drop-down box (and cover the page, not push it down), not make new boxes appear to the right of the original box).

In any case, thanks for the link; Suckerfish is bookmarked with the others (most of which I get from here, esp any pages gary links to). Must I dash my hopes for removing javascript though, with a menu with sub-menus? I was hoping we could avoid them (maybe this is because of the NoScripts thing my hubby put on his FF/Iceweasel, which trips me up because I always forget it's on, so I want our site to be as script-free as reasonably possible).

How do I give a rep? Eh, I'll read the FAQ again. Reps for dan and deathshadow.

 

I believe you just need to target IE6.

if (document.all && !window.opera && typeof window.XMLHttpRequest == "undefined") {
// and here you add a class to the parent LIs with JS
}

 

Suckerfish isn't needed for IE 7. I've found that it'll run just fine inside a regular JavaScript file (without need for conditional comments or document.all sniffing).

And adding that line of code isn't necessary either.