Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Desperate for help getting a menu to work in Firefox

    First post, and its a doozy!

    I've on this menu in microsoft frontpage for the past two days, and I'm just stumped - It won't display properly in firefox... and no matter what i've tried, it doesn't work. The absolute positioned elements all disappear, and the divs in the menubar become longer and split apart.

    First a short explanation:
    The first part of the code is basically a slidelist, which can be found here. The getThing(); functions attached to the buttons in this part all affect the second half of the code.
    This second half of the code is a bunch of submenus that use Fx. Slide.js from mootools. by pusing one of the buttons in the first section, they cause one of the submenus to slideOut(), and the rest to slideIn().

    I have tried everything i can possibly think of, but I just CANT get this to work in firefox - and i know its beacuse of my coding. I've tried to check the css and scripts, and while my slidelist doesnt work, the real slidelist seems to be fine in my firefox browser. I'm really desperate for help right now - I'm gunna go nuts trying to fix this. Am I doing something wrong in the HTML? Is it possible my CSS is messed up? Any advice is appreciated. Thanks a lot!

    ~Hodoku

    Here is the code (my comments in red):

    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html;">
    <title>Welcome to Selenium Beta. Made on a PC.</title>
    <!--These are the CSS documents-->
    <link rel="stylesheet" type="text/css" href="menu.css"/>
    <!--These are the javascripts-->
    <script src="scripts/mootools.v1.00.js" type="text/javascript"></script>
    <script src="scripts/menu.js" type="text/javascript"></script>
    <script src="scripts/smoothbox.js" type="text/javascript"></script>
    </head>

    <body onload="blurLinks(), mainSliderStart()" >

    the main menu. in the CSS it is anchored to the top. The reason that this section is split into 3 divs is beacuse the only way that i am aware of seperating things on a single line there would be using <ul>, and that would make slidelist think that my logo and login are actually buttons.
    <div id="header">
    <div id="logomenu"></div>
    <div id="fancymenu">
    <ul>
    <li class="current" id="menuMusic"><a href="#" onclick="getMusic();">Music</a></li>
    <li id="menuFilm"><a href="#" onclick="getFilm();">Film</a></li>
    <li id="menuPhotos"><a href="#" onclick="getPhotos();">Photos</a></li>
    <li id="menuLiterature"><a href="#" onclick="getLiterature();">Literature</a></li>
    <li id="menuSoftware"><a href="#" onclick="getSoftware();">Software</a></li>
    <li id="menuCommunity"><a href="#" onclick="getCommunity();">Community</a></li>
    </ul>
    </div>
    <div id="loginmenu"></div>
    <a href="register.htm">Join Selenium</a></font></b>
    </div>
    </div>

    the divs that make up the actual submenus "subMenuX" have to be nested in two divs. This is beacuse i wanted have them drp smoothly using the slideIn() and slideOut() functions from mootools. They have to be nested in the internal div "subMenuBar" beacuse the actual sliding object can't be absolute, and they are nested in the external div "subMenuHolder" so i could center them all reliably. I can't think of any other way to make a smooth sliding effect for the menu.
    <div id="subMenuHolder">
    <div id="subMenuBar">
    <div id="subMenu1">
    <font size="2" face="century gothic">links</font>
    </div>
    </div>
    <div id="subMenuBar">
    <div id="subMenu2">
    <font size="2" face="century gothic">links</font>
    </div>
    </div>
    <div id="subMenuBar">
    <div id="subMenu3">
    <font size="2" face="century gothic">links</font>
    </div>
    </div>
    <div id="subMenuBar">
    <div id="subMenu4">
    <font size="2" face="century gothic">links</font>
    </div>
    </div>
    <div id="subMenuBar">
    <div id="subMenu5">
    <font size="2" face="century gothic">links</font>
    </div>
    </div>
    <div id="subMenuBar">
    <div id="subMenu6">
    <font size="2" face="century gothic">links</font>
    </div>
    </div>
    </div>


    this script just makes the sliding submenus - where else can i put it?
    <script>
    var Slider1 = new Fx.Slide('subMenu1', {duration: 500});
    var Slider2 = new Fx.Slide('subMenu2', {duration: 500});
    var Slider3 = new Fx.Slide('subMenu3', {duration: 500});
    var Slider4 = new Fx.Slide('subMenu4', {duration: 500});
    var Slider5 = new Fx.Slide('subMenu5', {duration: 500});
    var Slider6 = new Fx.Slide('subMenu6', {duration: 500});
    </script>

    </body>
    </html>
    Last edited by Hodoku; 05-03-2007 at 09:18 PM. Reason: Title had a ?

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hmm... Do you have some a live page so we can see the thing in action that is not working?

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    According to my HTML Validator, there are far too many
    <div id="subMenuBar">
    entries.

    It reports that you may only define this once.

    The same thing is reported with </div>

    Maybe this will help.

    My knowledge is limited but the Validator has not let me down to date.

    effpeetee


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •