Forum Moderators: not2easy
I'm a new webmaster (humbly) for a new, startup software company. For the last 2 months i've been recoding the pages to validate xhtml and css and converting table layouts to css. What a learning experience!
Anyway, i'm having trouble with one of the pages not displaying the drop-down menus in any mozilla-based browsers. The page validates for both xhtml & css. I noticed there have been similar postings here re this issue, but they didn't help solve the prob. for me. BTW, if you view the page in IE, it's perfect... imagine that!
Here is the relevent css:
<style type="text/css">
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
#menu4 { display : none }
#menu5 { display : none }
#menu6 { display : none }
#menu7 { display : none }
#menu8 { display : none }
#menu9 { display : none }
#menu10 { display : none }
a{color:black; text-decoration: none }
a:hover {color:red; background-color: transparent }
</style>
And some code here for the list:
<span onmouseover="document.all.menu1.style.display = 'block'" onmouseout="document.all.menu1.style.display = 'block'">
<img src="http://www.master-colors.com/graphics/color_bullet.gif" alt="colored_bullet" /> <a class="size">Master Colors LLC</a></span>
Please correct me if i'm wrong, but this must be a bug in Firefox if the pages validate ok, correct?
TIA for any insight. nJOY!
[edited by: Woz at 11:22 pm (utc) on Mar. 27, 2005]
[edit reason] No self URLs please, see TOS#13 [/edit]
and a warm welcome to these forums. ;)
This...
document.all.menu1
...is IE only. Try instead...
document.getElelementById('menu1')
birdbrain
birdbrain, i tried the code you suggested, but no joy.
No wonder it works so well in IE, eh!
Error: document.all has no properties
Which pretty much support birdbrain's tip that the code is strictly IE code.
Meanwhile, i'd still like to get my original dropdown menu to work in mozilla browsers, cuz, well, i like the menu! More importantly, the company likes it.
So please, keep those cards and letters coming and maybe we can solve the js prob.
TIA and nJOY!
document.getElelementById('menu1')
Also note that in your original code, you have onmouseover and onmouseout both setting the #menu1 to display:block.
Meanwhile, i'd still like to get my original dropdown menu to work in mozilla browsers
I think you'll find the Suckerfish method is a much better solution. By using Griffiths and Webbs method, you use semantic source code coupled with basic cascading CSS to get the drop down working in compliant browsers, with a short (something like 12 lines) JS script to get IE to mimic the :hover behavior.
The result is a menu that degrades much better than a pure JS menu does. Should a Moz user have JS disabled, it will have NO effect on a CSS drop menu. Although IE requires some JS to make the dropdown work, should an IE-user have JS disabled, the top menu options will still function as links, so that user will still be able to use your site, just not the drop menu part. One more benefit: the semantic code (using a list, as opposed to strung together spans) degrades well in style-poor environments, as well. Without styling, your drop menu shows up as a perfectly functional nested list, allowing users to still freely and logically surf your site.
My point being that you might find that article worth digging into now, as opposed to trying to hack your inline JS and non-semantic code into working. Convert the whole menu to the Suckerfish style and you won't have to touch it for years.
cEM
