Firefox positions dropdown menu in wrong place IE7 OK

[mattdean]

I am currently redeveloping our site http://beta.ultimate-pilates.co.uk dropdown menus are fine in IE7 but ofset wildly to the left in Firefox 2 and with no transparency. I think they were alright in both at the start of the project so it is probobly something I have done. Part of the menu is in a Table.

This is menu_data.js

Code: Select all

_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=125            // The time delay before menus open on mouse over
_subOffsetTop=1              // Sub menu top offset
_subOffsetLeft=1             // Sub menu left offset
buildAfterLoad=true;
fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps 



with(menuStyle=new mm_style()){
onbgcolor="#FFFFFF";
oncolor="#B81C8C";
offbgcolor="#B81C8C";
offcolor="#FFFFFF";
bordercolor="#FFFFFF";
borderstyle="solid";
borderwidth=0;
separatorcolor="#B81C8C";
separatorsize="0";
separatorpadding=10;
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
margin=0;
padding=4;
fontsize="70%";
fontstyle="bold";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="white";
pagebgcolor="#B81C8C";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="arrow.gif";
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=77);Shadow(color='#FFFFFF', Direction=135, Strength=0)";
outfilter="fade(duration=0.3)";
}


/*with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=110;
left=15;
alwaysvisible=1;
overflow="scroll";
aI("text=Home;url=http://beta.ultimate-pilates.co.uk/;status=Back To Home Page;");
aI("text=About Pilates;showmenu=About Pilates;");
aI("text=Classes;showmenu=Classes;");
aI("text=Online Booking;showmenu=Online Booking;");
aI("text=Merchandise;showmenu=Merchandise;");
aI("text=Customer Services;showmenu=Customer Services;");
aI("text=Terms & Conditions;url=http://www.ultimate-pilates.co.uk/;status=Terms & Conditions;");
aI("text=Links;showmenu=Links;");
}
*/

with(milonic=new menuname("About Pilates")){
style=menuStyle;
overflow="scroll";
aI("text=What is Pilates?;url=/what_is_pilates.htm;status=What is Pilates?;");
aI("text=Priciples of Pilates;url=/principles_of_pilates.htm;status=Priciples of Pilates;");
aI("text=About Ultimate Pilates;url=/about_ultimate_pilates.htm;status=About Ultimate Pilates;");
aI("text=About Joseph Pilates;url=/about_joseph_pilates.htm;status=About Joseph Pilates;");
aI("text=FAQ's;url=/faqs.htm;status=Frequently asked Questions;");
}

with(milonic=new menuname("Classes")){
style=menuStyle;
aI("text=About our Classes;url=/about_our_classes.htm;status=About our Classes;");
aI("text=Class Costs;url=/class_costs.htm;status=Class Costs;");
aI("text=Class Timetable;url=/timetable.htm;status=Timetable of Classes;");
aI("text=Course Year Planner;url=/year_planner.htm;status=Course Year Planner;");
aI("text=Workshop Classes;url=/workshop_classes.htm;status=Workshop Classes;");
}

with(milonic=new menuname("Online Booking")){
style=menuStyle;
aI("text=Book a Course Online;url=/book_online.htm;status=Book a Course Online;");
aI("text=Book a Beginners Workshop Online;url=https://ssl511.securepod.com/ultimate-pilates/wsxx_secure_new.asp;target=_blank;status=Book a Beginners Workshop Online;");
}

with(milonic=new menuname("Links")){
style=menuStyle;
aI("text=Our recommendations;url=/links.htm;status=Our recommendations;");
}


drawMenus();

and the part embedded in the table

Code: Select all

						<SCRIPT TYPE="text/javascript">
				with(milonic=new menuname("Main Menu")){
				style=menuStyle;
				position = "relative";
				orientation="horizontal";
				alwaysvisible=1;
				overflow="scroll";

				menualign='left'; //here//
				aI("text=Home;url=http://beta.ultimate-pilates.co.uk;status=Back To Home Page;");
				aI("text=About Pilates;showmenu=About Pilates;");
				aI("text=Classes;showmenu=Classes;");
				aI("text=Studio;url=/one2one.htm;status=Studio;");
				aI("text=Online Booking;showmenu=Online Booking;");
				aI("text=Contact us;url=/contact_us.htm;status=Contact us;");
				aI("text=Terms & Conditions;url=/terms.htm;status=Terms & Conditions;");
				aI("text=Links;showmenu=Links;");
				}
				drawMenus();
			</SCRIPT>

This last part is in a DWT file.

Any help much appreciated

[Ruth]

Hi,

It's setting the position of the table to relative that is causing that. Remove that and everything is fine. FF must be applying that to the menu programming and setting the position of submenus 'relatively'

Ruth

[mattdean]

Ruth thanks for your speedy response I had already tried that but that make the menu overhang the content region and puts a line along side the menu.

i have left the changes on our site beta.ultimate-pilates.co.uk so you can see the results this shows in both IE7 and FF

Any ideas?

[Ruth]

Hi,

You misunderstood. You can't remove the position="relative"; from the menu, that has to be there if it's in a table. It is the table you have set to position:relative; that is what has to be removed.

Why do you have the table itself set as position:relative;?

Ruth

[mattdean]

Ruth thanks for that have changed the table to static the menus drop in the right place but the top menu item now obscures the menu heading, I have left the site in this state do you can see.

Also is opacity level not supported by FF?

Many thanks for your help to date!

[Ruth]

Hi,

Yes you can get opacity in FF but it has to be done through css. That overfilter outfilter is proprietary to IE, it is the IE transitions and filters applied through activeX I think. Try this topic for more explanations on how to set those in FF and Safari, but they are not really the over/outfilters, that is just opacity which is the only thing I think can be applied. Unfortunately when applied it applies to the whole menu, menu, colors and text.

viewtopic. ... 0840#20840

As to the other, I'll post back. I have a dentist appointment this morning,
so will not get to it until later.

Ruth

[mattdean]

Thanks for your continued help Ruth

[Ruth]

Hi,

Is the one you have up the one that has it 'over' the below part? I am not seeing it in FF anymore, which it was doing before in my 1.5. Is it still doing that in 2?

Ruth

[mattdean]

Yes Still the same one up, and yes still the same problem in FF 2