Re: [WSG] Making my menus work across multiple browsers
Just a quickie about validation, you've got an invalid doctype declaration: !DOCTYPE xhtml PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; the html should be html just to make it easy here's the proper one: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; I tested it and it validates now. All your problems with validation were caused by the invalid doctype. If that's coming directly from Dreamweaver, you may want to edit the default templates and fix it. - Original Message - From: Seona Bellamy [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Friday, January 30, 2004 10:48 AM Subject: [WSG] Making my menus work across multiple browsers 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/ *
Re: [WSG] Making my menus work across multiple browsers
A few things I noticed with your html. Your doctype line has xhtml between DOCTYPE and PUBLIC instead of html. You are missing xml:lang and lang attributes from your opening html element. Here is a suggested correct example of these two lines. !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en Also you have a percentage specified on this line for the width attribute: img src=Images/divider_h.gif width=100% height=3 alt= / Using a percent value for the height or width attribute with the img element may result in inconsistent rendering, especially when the images are in table cells. Note, however, that a percent value for these attributes is valid in HTML 4/XHTML. -- -- -- -- -- -- -- David Marsh [EMAIL PROTECTED] http://www.marshy.com/ Seona Bellamy [EMAIL PROTECTED] u To [EMAIL PROTECTED] 30/01/2004 10:48 cc Subject Please respond to [WSG] Making my menus work across [EMAIL PROTECTED] multiple browsers group.org 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/ *
Re: [WSG] Making my menus work across multiple browsers
Hello Seona,I haven't looked into the far-to-the-right sub menu issue yet, but I can fix your validation problem. Your DOCTYPE is incorrectly written:Current:!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"Needs to be:!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" Notice the key word right after the !DOCTYPE declaration - xhtml. It needs to be html. HTH, Martin E. - Original Message - From: Seona Bellamy To: [EMAIL PROTECTED] Sent: Thursday, January 29, 2004 3:48 PMSubject: [WSG] Making my menus work across multiple browsersHi guys,Well, after lurking on here for several weeks, I'm finally taking the plungeand asking a question. (And getting rather alliterative in my subjectline... Sorry...)I have a navigation bar with sub-menus based on the list structure and runprimarily by CSS. The problem I am having is making it work in both IE andany real browser (using Mozilla for testing). If I get it to that thesubmenus are correctly positioned in Mozilla, then in IE they are floatinghalfway across the screen and impossible to select. If I get them correctlypositioned in IE, then in Mozilla they sit over the main navigation bar andso 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.cssIncidentally, 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 almostvalidating. According to the W3C validator, there are only 3 problems leftand I can't figure out how to fix them. If anyone wants to take the time tohave a look at that and point me in the right direction, it would beappreciated. Funnily enough, the problems seem to be with the codeDreamweaver put in when I asked it to make a new file that was XHTMLcompliant. *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/*
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/ *
RE: [WSG] Making my menus work across multiple browsers
Thanks to Martin, David and Bradley for helping me with the validation thing. I had tried looking on the W3C site for the answer and just couldn't find it. *sigh* Now, anyone game to take a crack at the menu issue? :) Cheers, Seona. -Original Message-From: Martin E [mailto:[EMAIL PROTECTED]Sent: Friday, 30 January 2004 11:19 AMTo: [EMAIL PROTECTED]Subject: Re: [WSG] Making my menus work across multiple browsers Hello Seona,I haven't looked into the far-to-the-right sub menu issue yet, but I can fix your validation problem. Your DOCTYPE is incorrectly written:Current:!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"Needs to be:!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" Notice the key word right after the !DOCTYPE declaration - xhtml. It needs to be html. HTH, Martin E. - Original Message - From: Seona Bellamy To: [EMAIL PROTECTED] Sent: Thursday, January 29, 2004 3:48 PMSubject: [WSG] Making my menus work across multiple browsersHi guys,Well, after lurking on here for several weeks, I'm finally taking the plungeand asking a question. (And getting rather alliterative in my subjectline... Sorry...)I have a navigation bar with sub-menus based on the list structure and runprimarily by CSS. The problem I am having is making it work in both IE andany real browser (using Mozilla for testing). If I get it to that thesubmenus are correctly positioned in Mozilla, then in IE they are floatinghalfway across the screen and impossible to select. If I get them correctlypositioned in IE, then in Mozilla they sit over the main navigation bar andso 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.cssIncidentally, 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 almostvalidating. According to the W3C validator, there are only 3 problems leftand I can't figure out how to fix them. If anyone wants to take the time tohave a look at that and point me in the right direction, it would beappreciated. Funnily enough, the problems seem to be with the codeDreamweaver put in when I asked it to make a new file that was XHTMLcompliant. *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/*
Re: [WSG] Making my menus work across multiple browsers
I usually do this when I want to feed IE with different values:
selector { rules that work with IE }
parentselector { rules hidden from IE that override the previous rules }
In this case:
selector { left: value; }
parentselector { left: 0; margin-left: value; }
Simon Jessey
--
mail: [EMAIL PROTECTED]
blog: http://jessey.net/blog/
work: http://keystonewebsites.com/
- Original Message -
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?
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] Making my menus work across multiple browsers
I love you forever. *grin* It works just fine now in both. Thank you thank
you thank you. :)
Cheers,
Seona.
-Original Message-
From: Simon Jessey [mailto:[EMAIL PROTECTED]
Sent: Friday, 30 January 2004 12:47 PM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Making my menus work across multiple browsers
I usually do this when I want to feed IE with different values:
selector { rules that work with IE }
parentselector { rules hidden from IE that override the previous rules }
In this case:
selector { left: value; }
parentselector { left: 0; margin-left: value; }
Simon Jessey
--
mail: [EMAIL PROTECTED]
blog: http://jessey.net/blog/
work: http://keystonewebsites.com/
- Original Message -
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?
*
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/
*
Re: [WSG] Making my menus work across multiple browsers
On Friday, January 30, 2004, at 01:11 PM, Hugh Todd wrote: Justin, you wrote, 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. Works for me. Could this be because a) I'm using Safari 1.1 or b) because it's no longer the original article, and it's been fixed? If b), was it the CSS code or the JavaScript code that fixed it? I'm on safari 1.0 -- to the best of my knowledge, the article has remained untouched, and their examples still break safari 1.0. I'd say it's because you're using 1.1. CSS code fixed it, because I didn't touch the JS file at all. I'm pretty sure it's related to position: absolute; of the container which I hold the navigation in, but since my CSS is so far removed from theirs, with many iterations between them both, it's hard to tell. I'm interested in the outcome of all this because I'm also in the middle of trying to build such a navigation bar, but with the submenus appearing as alternate horizontal bars below the main menu. Better get a copy of Safari 1.0 eh? Can both run at the same time? I think there's a version of what you want on listamatic or list tutorial or one of them, isn't there? Justin French * The discussion list for http://webstandardsgroup.org/ *
