Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Firefox incompatibility for Popup menu

Newbie
  
Join Date: Dec 2007
Posts: 4
#1: Dec 10 '07
First off this is my brothers code for his website but he has task'd me with the job of finding a solution. He has the following javascript code for a popup menu which works fine in IE but not FF. Instead of the menu items popping up like the do in IE they are just all displayed vertically already open like standard buttons. The individual items that should popup also now have little circles to the left of them

Expand|Select|Wrap|Line Numbers
  1. var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
  2. var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.
  3.  
  4. function createcssmenu(){
  5. for (var i=0; i<menuids.length; i++){
  6.   var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
  7.     for (var t=0; t<ultags.length; t++){
  8.     var spanref=document.createElement("span")
  9.         spanref.className="arrowdiv"
  10.         spanref.innerHTML="&nbsp;&nbsp;"
  11.         ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
  12.     ultags[t].parentNode.onmouseover=function(){
  13.     this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
  14.     this.getElementsByTagName("ul")[0].style.display="block"
  15.     }
  16.     ultags[t].parentNode.onmouseout=function(){
  17.     this.getElementsByTagName("ul")[0].style.display="none"
  18.     }
  19.     }
  20.   }
  21. }
  22.  
  23.  
  24. if (window.addEventListener)
  25. window.addEventListener("load", createcssmenu, false)
  26. else if (window.attachEvent)
  27. window.attachEvent("onload", createcssmenu)
  28.  
  29.  
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Dec 10 '07

re: Firefox incompatibility for Popup menu

Welcome to TSDN!

Post the HTML and CSS code for the popup menu.
Newbie
  
Join Date: Dec 2007
Posts: 4
#3: Dec 11 '07

re: Firefox incompatibility for Popup menu

CSS:

Expand|Select|Wrap|Line Numbers
  1.  
  2. .glossymenu, .glossymenu li ul{
  3. list-style-type: none;
  4. left: 140;
  5. top: 0;
  6. margin: 0;
  7. padding: 0;
  8. width: 140px; /*WIDTH OF MAIN MENU ITEMS*/
  9. border: 0px solid black;
  10. }
  11.  
  12. .glossymenu li{
  13. position: relative;
  14. }
  15.  
  16. .glossymenu li ul{ /*SUB MENU STYLE*/
  17. position: absolute;
  18. width: 140px; /*WIDTH OF SUB MENU ITEMS*/
  19. left: 0;
  20. top: 0;
  21. display: none;
  22. filter:alpha(opacity=100);
  23. -moz-opacity:1;
  24. }
  25.  
  26. .glossymenu li a{
  27. background: #6E6943 url(../images/button.jpg) repeat-x bottom left;
  28. font: bold 16px arial;
  29. color: #d8cd8d;
  30. display: block;
  31. width: auto;
  32. padding: 5px 0;
  33.  
  34. padding-bottom: 7px;
  35. text-decoration: none;
  36. }
  37.  
  38. .glossymenu .arrowdiv{
  39. position: absolute;
  40. right: 9px;
  41. background: transparent url() no-repeat center right;
  42. }
  43.  
  44. .glossymenu li a:visited, .glossymenu li a:active{
  45. color: #d8cd8d;
  46. }
  47.  
  48. .glossymenu li a:hover{
  49. background-image: url(../images/button2.jpg);
  50. }
  51.  
  52. /* Holly Hack for IE \*/
  53. * html .glossymenu li { float: left; height: 1%; }
  54. * html .glossymenu li a { height: 1%; }
  55. /* End */
  56.  
I'm not sure where the HTML is for this as it's my brothers site so I will try to find out from him. I can also see if he can set up a dummy account so you can login and see the problem for yourself if that's helpful.
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,562
#4: Dec 11 '07

re: Firefox incompatibility for Popup menu

There is no html in that. A link would be good.
Newbie
  
Join Date: Dec 2007
Posts: 4
#5: Dec 11 '07

re: Firefox incompatibility for Popup menu

I've stripped out most of the unnecessary stuff and placed the needed files at the following location http://www.global-plus.co.uk/menuTest/index.php

As you can see it works fine in IE (apart from the alignment which I messed up when removing stuff) but doesn't work in FF.

The html code is generated in the following PHP function.

[PHP]

function menu() {

print"<li><a href='tribe_main.php'>HOME</a></li>";
print"<li><a href='tribe_vcs.php'>VCS</a></li>";
print"<ul>";
print"<li><a href='tribe_vcs.php'>SEARCH</a></li>";
print"<li><a href='tribe_vcs_add.php'>ADD CLAIM</a></li>";
print"<li><a href='tribe_vcs_my.php'>MY CLAIMS</a></li>";
print"<li><a href='tribe_vcs_player_claim.php'>MASS CLAIMS</a></li>";
print"<li><a href='tribe_vcs_mass.php'>MASS LOGIN</a></li>";
print"</ul>";
print"<li><a href='tribe_stats.php'>STATISTICS</a></li>";
print"<ul>";
print"<li><a href='tribe_stats.php'>TOTALS</a></li>";
print"<li><a href='tribe_stats2.php'>AVERAGES</a></li>";
print"<li><a href='tribe_stats3.php'>CAPTURES</a></li>";
print"<li><a href='tribe_stats4.php'>LOSSES</a></li>";
print"</ul>";
print"<li><a href='tribe_attack.php'>ATTACK TIMER</a></li>";
print"<li><a href='tribe_player_pos.php'>VILLAGE LISTS</a></li>";
print"<li><a href='tribe_mailing_list.php'>MAILING LIST</a></li>";
print"<ul>";
print"<li><a href='tribe_mailing_list.php'>TRIBE MAIL</a></li>";
print"<li><a href='tribe_mail_cl.php'>CL MAIL</a></li>";
print"</ul>";
print"<li><a href='tribe_hc.php'>HIGH COUNCIL</a></li>";
print"<ul>";
print"<li><a href='tribe_hc.php'>CL LISTS</a></li>";
print"<li><a href='tribe_hc_change.php'>CHANGE CL'S</a></li>";
print"</ul>";
}

[/PHP]
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,562
#6: Dec 11 '07

re: Firefox incompatibility for Popup menu

The problem, as always, is IE, not Firefox.

You are not using a doctype, which puts IE into 'quirks mode'. If you have been using IE as your test browser, then you've been designing to a bug. See the article about doctypes under Howtos at the top and use html4.01 strict.

Then validate your html and css for your list of errors there.

Never, ever use IE as an initial test. All versions of IE are 10 years behind web standards and buggy. Always use a modern browser like Firefox, Opera or Safari to make sure your markup displays how you want it. Then we can adjust for IEs quirks and bugs.
Newbie
  
Join Date: Dec 2007
Posts: 4
#7: Dec 11 '07

re: Firefox incompatibility for Popup menu

I keep telling my brother to use FF not IE but he just doesn't seem to listen. I've told him about Firebug and IETab extensions for FF and he still doesn't seem to listen. The other bug that he asked me to fix was why his tables weren't centered in FF when they were in IE and surprise surprise it was IEs fault.

I will try what you have said and get back to you. Thanks for the help.
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,562
#8: Dec 11 '07

re: Firefox incompatibility for Popup menu

He will never get IE to attempt to perform like modern browsers without a proper doctype. Until then, it's often a futile effort and I usually won't bother until that's been added.
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,562
#9: Dec 11 '07

re: Firefox incompatibility for Popup menu

This should fix some of those problems but it still needs some work.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="../config/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../config/menu.css">
<title></title>
</head>
<body>
<br>
<b>Warning</b>: session_start() [<a href=
'function.session-start'>function.session-start</a>]: Cannot send
session cache limiter - headers already sent (output started at
/home/cptjack/public_html/menuTest/index.php:4) in
<b>/home/cptjack/public_html/menuTest/index.php</b> on line

<b>4</b><br>
<script type="text/javascript" src="../config/menu.js">
</script>
<table border="0" align="center" width="850" cellpadding="0"
cellspacing="0">
<tr align="center">
<td align="center"><img src="../images/header.gif" alt=
"XXXXXXXX"></td>
</tr>
<tr align="center">
<td background="../images/2ndheader.jpg" height="117" width="850"
align="left">
<table border="0" align="center" width="100%" cellpadding="0"
cellspacing="0">
<tr>
<td rowspan="2" width="190" align="center" height="110"><img src=
'../images/snob_ani.gif' alt="XXXXXXXX"></td>
<td colspan="2" height="70">
<div id="menu"></div>
</td>
</tr>

<tr>
<td valign="bottom" align="left"></td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td background="../images/content_bg.gif" width="850" height="10"
valign="top"></td>
</tr>
<tr align="center">
<td background="../images/content_bg.gif" width="850" valign="top">
<table border="0" align="center" width="100%" cellpadding="0"
cellspacing="0">
<tr align="center">
<td width="30">&nbsp;</td>
<td width="140" align="center" valign="top">
<ul id="verticalmenu" class="glossymenu">
<li><a href='tribe_main.php'>HOME</a></li>

<li><a href='tribe_vcs.php'>VCS</a></li>
<li style="list-style: none">
<ul>
<li><a href='tribe_vcs.php'>SEARCH</a></li>
<li><a href='tribe_vcs_add.php'>ADD CLAIM</a></li>
<li><a href='tribe_vcs_my.php'>MY CLAIMS</a></li>
<li><a href='tribe_vcs_player_claim.php'>MASS CLAIMS</a></li>
<li><a href='tribe_vcs_mass.php'>MASS LOGIN</a></li>
</ul>
</li>
<li><a href='tribe_stats.php'>STATISTICS</a></li>

<li style="list-style: none">
<ul>
<li><a href='tribe_stats.php'>TOTALS</a></li>
<li><a href='tribe_stats2.php'>AVERAGES</a></li>
<li><a href='tribe_stats3.php'>CAPTURES</a></li>
<li><a href='tribe_stats4.php'>LOSSES</a></li>
</ul>
</li>
<li><a href='tribe_attack.php'>ATTACK TIMER</a></li>
<li><a href='tribe_player_pos.php'>VILLAGE LISTS</a></li>
<li><a href='tribe_mailing_list.php'>MAILING LIST</a></li>

<li style="list-style: none">
<ul>
<li><a href='tribe_mailing_list.php'>TRIBE MAIL</a></li>
<li><a href='tribe_mail_cl.php'>CL MAIL</a></li>
</ul>
</li>
<li><a href='tribe_hc.php'>HIGH COUNCIL</a></li>
<li style="list-style: none">
<ul>
<li><a href='tribe_hc.php'>CL LISTS</a></li>
<li><a href='tribe_hc_change.php'>CHANGE CL'S</a></li>
</ul>

</li>
</ul>
</td>
<td width="42">&nbsp;</td>
<td valign="top">
<table border="0" align="center" width="100%" cellpadding="0"
cellspacing="0">
<tr>
<td><br>
<br></td>
</tr>
</table>
</td>
<td width="28">&nbsp;</td>
</tr>
</table>
</td>
</tr>

<tr align="center">
<td background="../images/bottomline.jpg" height="12" width="850">
</td>
</tr>
<tr align="center">
<td background="../images/content_blank.gif" height="70" width=
"850"></td>
</tr>
<tr align="center">
<td background="../images/footer_bg.jpg" height="97" width="850">
<div id="webactive"></div>
<table border="0" align="center" width="100%" cellpadding="0"
cellspacing="0">
<tr>
<td align="center"></td>
</tr>
</table>
</td>
</tr>

</table>
</body>
</html>[/HTML]
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,392 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved