Firefox incompatibility for Popup menu

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • ThePirate
    New Member
    • Dec 2007
    • 4

    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

    Code:
    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
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Welcome to TSDN!

    Post the HTML and CSS code for the popup menu.

    Comment

    • ThePirate
      New Member
      • Dec 2007
      • 4

      #3
      CSS:

      Code:
      .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.

      Comment

      • drhowarddrfine
        Recognized Expert Expert
        • Sep 2006
        • 7434

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

        Comment

        • ThePirate
          New Member
          • Dec 2007
          • 4

          #5
          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_mai n.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.p hp'>MASS CLAIMS</a></li>";
          print"<li><a href='tribe_vcs _mass.php'>MASS LOGIN</a></li>";
          print"</ul>";
          print"<li><a href='tribe_sta ts.php'>STATIST ICS</a></li>";
          print"<ul>";
          print"<li><a href='tribe_sta ts.php'>TOTALS</a></li>";
          print"<li><a href='tribe_sta ts2.php'>AVERAG ES</a></li>";
          print"<li><a href='tribe_sta ts3.php'>CAPTUR ES</a></li>";
          print"<li><a href='tribe_sta ts4.php'>LOSSES </a></li>";
          print"</ul>";
          print"<li><a href='tribe_att ack.php'>ATTACK TIMER</a></li>";
          print"<li><a href='tribe_pla yer_pos.php'>VI LLAGE LISTS</a></li>";
          print"<li><a href='tribe_mai ling_list.php'> MAILING LIST</a></li>";
          print"<ul>";
          print"<li><a href='tribe_mai ling_list.php'> TRIBE MAIL</a></li>";
          print"<li><a href='tribe_mai l_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'>CHA NGE CL'S</a></li>";
          print"</ul>";
          }

          [/PHP]
          Last edited by ThePirate; Dec 11 '07, 07:45 PM. Reason: Adding link to site

          Comment

          • drhowarddrfine
            Recognized Expert Expert
            • Sep 2006
            • 7434

            #6
            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.

            Comment

            • ThePirate
              New Member
              • Dec 2007
              • 4

              #7
              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.

              Comment

              • drhowarddrfine
                Recognized Expert Expert
                • Sep 2006
                • 7434

                #8
                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.

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434

                  #9
                  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.sessi on-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"><i mg 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">&nbs p;</td>
                  <td width="140" align="center" valign="top">
                  <ul id="verticalmen u" class="glossyme nu">
                  <li><a href='tribe_mai n.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.p hp'>MASS CLAIMS</a></li>
                  <li><a href='tribe_vcs _mass.php'>MASS LOGIN</a></li>
                  </ul>
                  </li>
                  <li><a href='tribe_sta ts.php'>STATIST ICS</a></li>

                  <li style="list-style: none">
                  <ul>
                  <li><a href='tribe_sta ts.php'>TOTALS</a></li>
                  <li><a href='tribe_sta ts2.php'>AVERAG ES</a></li>
                  <li><a href='tribe_sta ts3.php'>CAPTUR ES</a></li>
                  <li><a href='tribe_sta ts4.php'>LOSSES </a></li>
                  </ul>
                  </li>
                  <li><a href='tribe_att ack.php'>ATTACK TIMER</a></li>
                  <li><a href='tribe_pla yer_pos.php'>VI LLAGE LISTS</a></li>
                  <li><a href='tribe_mai ling_list.php'> MAILING LIST</a></li>

                  <li style="list-style: none">
                  <ul>
                  <li><a href='tribe_mai ling_list.php'> TRIBE MAIL</a></li>
                  <li><a href='tribe_mai l_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'>CHA NGE CL'S</a></li>
                  </ul>

                  </li>
                  </ul>
                  </td>
                  <td width="42">&nbs p;</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">&nbs p;</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.g if" 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]

                  Comment

                  Working...