Justin, Thanks, but this is actually what I used as a base. I had to do some tinkering, however, since the example was for a horizontal menu bar and I needed a vertical. So I had to play around with the offsets for where the dropdown appears.
The problem I am having is that Mozilla seems to need the "margin-left" property to position the submenus correctly, while IE seems to prefer the "left" property. Is there a good way to make one property invisible to the browser it doesn't like? Cheers, Seona. -----Original Message----- From: Justin French [mailto:[EMAIL PROTECTED] Sent: Friday, 30 January 2004 11:43 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] Making my menus work across multiple browsers Seona, http://alistapart.com/articles/dropdowns/ This is the best implementation I've seen so far, and I'm using it in a client site to be launched next week. Works and extensively tested in: Win IE 5.0, 5.5, 6.0 Win Moz 1.0.2 Win Firebird 0.7 MacOSX Safari 1.0 MacOSX Mozilla 1.0.2 MacOSX Firebird 0.7 MacOSX Camino 0.7 MacOSX Omniweb 4.5 Fails in: IE5Mac on OSX and Classic Opera Hidden From: NN1/2/3/4 with @import IE1/2/3/4 with @import The beauty is that there's no javascript for real browsers, and a little for IE. Better still, you can use an IE-only conditional comment to target only that browser with the JS. The original article couldn't get Safari to work, but somehow I stumbled upon a solution last night, which I'm yet to figure out, but I'll report back when I do. I choose to import an Opera-only style sheet with PHP to set the sub-menu's to display:none; on all opera browsers, rather than spend the extra time on debugging that browser as well (not enough return on investment). I choose to have the top level list items as links to the major sections of the site, and choose to list the sub-navigation on every page, so that users falling outside of my tested browsers (plus Opera and MacIE5) would have the best chance possible of getting where they need to go. In all my testing, I haven't found a case where accessibility was prevented. I don't really have time to dig through your code, so all I can do is offer an alternative :) Justin French On Friday, January 30, 2004, at 10:48 AM, Seona Bellamy wrote: > > Hi guys, > > Well, after lurking on here for several weeks, I'm finally taking the > plunge > and asking a question. (And getting rather alliterative in my subject > line... Sorry...) > > I have a navigation bar with sub-menus based on the list structure and > run > primarily by CSS. The problem I am having is making it work in both IE > and > any real browser (using Mozilla for testing). If I get it to that the > submenus are correctly positioned in Mozilla, then in IE they are > floating > halfway across the screen and impossible to select. If I get them > correctly > positioned in IE, then in Mozilla they sit over the main navigation > bar and > so are impossible to see, let alone select. > > The page can be viewed at: > http://d1075184.u42.b-20.net/ > The CSS can be viewed at: > http://d1075184.u42.b-20.net/clinics.css > > Incidentally, I have the CSS validating just fine (which I'm quite > proud of, > given how new I am to this *grin*) and I have the page itself almost > validating. According to the W3C validator, there are only 3 problems > left > and I can't figure out how to fix them. If anyone wants to take the > time to > have a look at that and point me in the right direction, it would be > appreciated. Funnily enough, the problems seem to be with the code > Dreamweaver put in when I asked it to make a new file that was XHTML > compliant. *shrug* Go figure. > > Cheers, > > Seona. > --- > Outgoing mail is certified Virus Free. > Checked by AVG anti-virus system (http://www.grisoft.com). > Version: 6.0.573 / Virus Database: 363 - Release Date: 28/01/2004 > > ***************************************************** > The discussion list for http://webstandardsgroup.org/ > ***************************************************** > > ***************************************************** The discussion list for http://webstandardsgroup.org/ ***************************************************** --- Incoming mail is certified Virus Free. Checked by AVG anti-virus system (http://www.grisoft.com). Version: 6.0.573 / Virus Database: 363 - Release Date: 28/01/2004 --- Outgoing mail is certified Virus Free. Checked by AVG anti-virus system (http://www.grisoft.com). Version: 6.0.573 / Virus Database: 363 - Release Date: 28/01/2004 ***************************************************** The discussion list for http://webstandardsgroup.org/ *****************************************************
