Firefox incompatibility for Popup menu

[ThePirate]

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

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.
 
function createcssmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    var spanref=document.createElement("span")
        spanref.className="arrowdiv"
        spanref.innerHTML="&nbsp;&nbsp;"
        ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  }
}
 
 
if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)
 
 

[acoder]

Welcome to TSDN!

Post the HTML and CSS code for the popup menu.

[ThePirate]

CSS:

 
.glossymenu, .glossymenu li ul{
list-style-type: none;
left: 140;
top: 0;
margin: 0;
padding: 0;
width: 140px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0px solid black;
}
 
.glossymenu li{
position: relative;
}
 
.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 140px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1;
}
 
.glossymenu li a{
background: #6E6943 url(../images/button.jpg) repeat-x bottom left;
font: bold 16px arial;
color: #d8cd8d;
display: block;
width: auto;
padding: 5px 0;
 
padding-bottom: 7px;
text-decoration: none;
}
 
.glossymenu .arrowdiv{
position: absolute;
right: 9px;
background: transparent url() no-repeat center right;
}
 
.glossymenu li a:visited, .glossymenu li a:active{
color: #d8cd8d;
}
 
.glossymenu li a:hover{
background-image: url(../images/button2.jpg);
}
 
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
 

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]

There is no html in that. A link would be good.

[ThePirate]

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]

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.

[ThePirate]

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]

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]

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]