469,903 Members | 1,511 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,903 developers. It's quick & easy.

Firefox incompatibility for Popup menu

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.  
Dec 10 '07 #1
8 2054
acoder
16,027 Expert Mod 8TB
Welcome to TSDN!

Post the HTML and CSS code for the popup menu.
Dec 10 '07 #2
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.
Dec 11 '07 #3
drhowarddrfine
7,435 Expert 4TB
There is no html in that. A link would be good.
Dec 11 '07 #4
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]
Dec 11 '07 #5
drhowarddrfine
7,435 Expert 4TB
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.
Dec 11 '07 #6
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.
Dec 11 '07 #7
drhowarddrfine
7,435 Expert 4TB
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.
Dec 11 '07 #8
drhowarddrfine
7,435 Expert 4TB
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]
Dec 11 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Nils Weisensee | last post: by
1 post views Thread by Bill H | last post: by
3 posts views Thread by Michael Schuerig | last post: by
2 posts views Thread by ouech | last post: by
2 posts views Thread by SamSpade | last post: by
11 posts views Thread by Alex.Svetos | last post: by
1 post views Thread by Eirik Eldorsen | last post: by
9 posts views Thread by john | last post: by
3 posts views Thread by atn2002 | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.