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>
Before you post, read our: 
