Forum Moderators: open
I currently have div tags set up for rollover/dropdown menus. They work fine in PC/IE but my client has requested they now work in PC Mozilla. In Moz, the menus simply do not show up.
From the research I've done, it seems IE is a bit more foregiving than Moz...is there something I can do to the sample below? If not, what is the best solution for rollover drop down menus on both IE and Moz? Thank you in advance.
<td width="174" align="left" valign="top"><a href="env_mgmt.asp" onMouseOut="MM_swapImgRestore(), engineering.style.visibility='hidden'" onMouseOver="MM_swapImage('Image19','','images/mainnav_management_on.gif',1), engineering.style.visibility='visible'"><img src="images/mainnav_management_off.gif" name="Image19" width="172" height="22" border="0"></a></td>
which references the following:
<div id="engineering" style="position:absolute; left:354px; top:68; width:172px; height:155px; z-index:100; visibility: hidden; overflow: hidden; background-color: #C0D5C7; layer-background-color: #C0D5C7; border: none" onMouseOut="engineering.style.visibility='hidden';" onMouseOver="engineering.style.visibility='visible';">
<a href="env_mgmt.asp" border="0"><img src="images/mainnav_management_on.gif" width="172" height="22" border="0"></a>
<p style="margin: 0px 0px 0px 0px;"><a href="phase_one.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image173','','images/nav_complianceserv_on.gif',1)"><img src="images/nav_complianceserv_off.gif" name="Image173" width="172" height="26" border="0"></a><BR><a href="phase_two.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image174','','images/nav_siteinvestigate_on.gif',1)"><img src="images/nav_siteinvestigate_off.gif" name="Image174" width="172" height="26" border="0"></a><BR><a href="site_closure.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image175','','images/nav_remediation_on.gif',1)"><img src="images/nav_remediation_off.gif" name="Image175" width="172" height="26" border="0"></a>
</p>
</div>
For example, "engineering.style.visibility" is MSIE only, as they are the only ones who use the "style" object reference.
Typical workarounds include using two different scripts, and triggering the appropriate one based on browser identification, i.e.:
if (ie) { ieRollover() } else { otherRollover() }
It's a pain, but ya gotta do it.
BTW, MSIE isn't more "forgiving", it simply has its own standards and syntax. Without having to accomodate the arrogant developers in Redmond, this would be so much more simple.
"document.engineering.style.visibility;"
in the code below but it doesn't seem to work in IE or Mozilla (Firefox 0.9.3).
StupidScript, are you saying then that the above is standard? If so, I must have an error somewhere if the dropdowns are not showing properly...
<div id="engineering" style="position:absolute; left:354px; top:68; width:172px; height:155px; z-index:100; visibility: hidden; overflow: hidden; background-color: #C0D5C7; layer-background-color: #C0D5C7; border: none" onMouseOut="document.engineering.style.visibility;hidden" onMouseOver="document.engineering.style.visibility;visible">
<a href="env_mgmt.asp" border="0"><img src="images/mainnav_management_on.gif" width="172" height="22" border="0"></a>
<p style="margin: 0px 0px 0px 0px;"><a href="phase_one.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image173','','images/nav_complianceserv_on.gif',1)"><img src="images/nav_complianceserv_off.gif" name="Image173" width="172" height="26" border="0"></a><BR><a href="phase_two.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image174','','images/nav_siteinvestigate_on.gif',1)"><img src="images/nav_siteinvestigate_off.gif" name="Image174" width="172" height="26" border="0"></a><BR><a href="site_closure.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image175','','images/nav_remediation_on.gif',1)"><img src="images/nav_remediation_off.gif" name="Image175" width="172" height="26" border="0"></a>
</p>
</div>
<td width="172" align="left" valign="top"><a href="env_mgmt.asp" onMouseOut="MM_swapImgRestore(), document.engineering.style.visibility;hidden" onMouseOver="MM_swapImage('Image14','','images/mainnav_management_on.gif',1), document.engineering.style.visibility;visible"><img src="images/mainnav_management_off.gif" name="Image14" width="172" height="22" border="0"></a></td>
getElementById('xx') performs a similar function as MSIE's "all" object:
For MSIE: document.all.engineering.style.visibility = document.getElementById('engineering').style.visibility
For newer browsers (Netscape 6+, et al.), getElementById('xx') and the "style" object should work well. For earlier browsers, even many released in the past year, you will need to devise a workaround.
Some say that writing code to accomodate earlier browsers is a waste of time ("who still uses those oldies?"), however as manymanymany people see no need to upgrade every time a new product comes out, they still use Win95/98 with Netscape 4.8 or MacOS9 or something else you haven't seen for awhile. Prohibiting these folks from spending their money at your site by not accomodating their choice of once-standard computing products costs your employers business. It's that simple.
So try to provide at least a decent alternative for those "old fogies".
As for coding for older browsers, I've often heard if someone is running an outdated system (OS 9 for example), do you want them looking at your site? Do they compromise the bulk of your target audience? If they're a minority is it worth the time/resources to account for them?
Just my $0.02.
Thanks again for the help.
It's really not that hard, and they buy stuff, just like early-adopters and people who are into upgrading frequently do. At the very least you can do a quick browser detection and send the oldies off to a very simple site that gives them access to the info and process they need to buy the client's products.
Ask the client if they mind losing somewhere around 8% of your potential buyers. I'll bet they aren't aware that that is the result of that cool DHTML drop-down menu that their newfangled shopping cart can't do without.
Check your stats to see how many people are not able to view your content or are having a bogus experience because you didn't accomodate the "car" they drove into your store with.
If all of your visitors are driving the new hybrids, you're cool. If not ... break out the unleaded, because you've got visitors who want to buy your gas.
Another (slightly rusty) $0.02. :)
What I'm saying is that writing DHTML for, say, version 4 browsers is not a particularly laudable exercise. It bloats pages, complicates maintenance, and might well contribute to the denominator be kept lower than it should be. (Note that Richard Glass and others have concluded that 60% of software costs are in maintenance and 60% of that is in enhancements. The target of his assessment was application software; I suspect the numbers for web-ware are even higher.)
Accessibility by alternative browsers for those with special needs is another reason to have a basic quality of functionality that plays well at the plain-HTML level of the equation.
