Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:40

Submenus only positioned correctly in FIREFOX [SOLVED]


Poster: D4rky
Dated: Thursday March 1 2007 - 21:03:15 GMT

Hi, I have a menu that uses images as the main menu, and i have 2 dropdown submenus for it. Everything looks great in Firefox, but in Internet Explorer the submenus are not in the same position verticaly, and they also move around with resizing the window. here is a link to the site I am designing for the client...

http://www.deathtripmovie.com



here is my code for the main_menu.js (thanks in advance)...




fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=250;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;




with(menuStyle=new mm_style()){
bordercolor="#000000";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="10";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#996633";
offcolor="#cccc99";
onbgcolor="#ff6600";
oncolor="#000000";
outfilter="";
overfilter="";
padding=3;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#000000";
separatorsize=1;
subimage="http://www.milonic.com/menuimages/arrow.gif";
subimagepadding=2;
}

with(milonic=new menuname("film")){
style=menuStyle;
top=23;
left=-1;
aI("text=Trailer;url=http://www.deathtripmovie.com/trailer.html;");
aI("text=Synopsis;url=http://www.deathtripmovie.com/synopsis.html;");
aI("text=Cast;url=http://www.deathtripmovie.com/cast.html;");
aI("text=Crew & Credits;url=http://www.deathtripmovie.com/crewcredits.html;");
aI("text=Production Stills;url=http://www.deathtripmovie.com/stills.html;");
aI("text=Photo Gallery;url=http://www.deathtripmovie.com/gallery.html;");
aI("text=Dr.'s Journal;url=http://www.deathtripmovie.com/journal.html;");
aI("text=Invest;url=http://www.deathtripmovie.com/invest.html;");
aI("text=Donate;url=http://www.dropcash.com/campaign/DeathTripMovie/electromagnetic_death_trip_movie/;target=_blank;");
}

with(milonic=new menuname("paranormal")){
style=menuStyle;
top=23;
left=69;
aI("text=The Soul;url=http://www.deathtripmovie.com/soul.html;");
aI("text=Soul Extraction;url=http://www.deathtripmovie.com/soulextract.html;");
aI("text=Dr. ___'s Theorys;url=http://www.deathtripmovie.com/theorys.html;");
aI("text=Spirits;url=http://www.deathtripmovie.com/spirits.html;");
aI("text=Electromagnetic Orbs;url=http://www.deathtripmovie.com/orbs.html;");
aI("text=Vortexes;url=http://www.deathtripmovie.com/vortexes.html;");
aI("text=Ectoplasmic Mist;url=http://www.deathtripmovie.com/mist.html;");
}

drawMenus();


Poster: Ruth
Dated: Thursday March 1 2007 - 23:03:28 GMT

Hi,

The problem is that you have top and left positions set in the submenu. FF is ignoring them, but IE is not. You can set top and left positions of submenus that open using the popup method, but you have to set that in the popup. If you remove those top and left from the submenus they open at the image you have named.

Look at the popup function info to see how to set top and left and to set open and close delays if you want. It's down at the bottom of this page.

http://www.milonic.com/menu_methods.php

Also, you need to name the images differently. Otherwise the submenu for the second item is probably going to open at the bottom of the first submenus parent. So try milonicmenu and milonicmenu1 to differentiate for the submenus.

Ruth

Same Problem


Poster: D4rky
Dated: Friday March 2 2007 - 13:27:01 GMT

Thanx Ruth, I appreciate your help. I did what you said but the same thing is happening in Internet Explorer. It's absolutely perfect in FireFox though. do you know what else could be wrong?

here is the main_menu.js


fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=250;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;




with(menuStyle=new mm_style()){
bordercolor="#000000";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="10";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#996633";
offcolor="#cccc99";
onbgcolor="#ff6600";
oncolor="#000000";
outfilter="";
overfilter="";
padding=3;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#000000";
separatorsize=1;
subimage="http://www.milonic.com/menuimages/arrow.gif";
subimagepadding=2;
}

with(milonic=new menuname("film")){
style=menuStyle;
aI("text=Trailer;url=http://www.deathtripmovie.com/trailer.html;");
aI("text=Synopsis;url=http://www.deathtripmovie.com/synopsis.html;");
aI("text=Cast;url=http://www.deathtripmovie.com/cast.html;");
aI("text=Crew & Credits;url=http://www.deathtripmovie.com/crewcredits.html;");
aI("text=Production Stills;url=http://www.deathtripmovie.com/stills.html;");
aI("text=Photo Gallery;url=http://www.deathtripmovie.com/gallery.html;");
aI("text=Dr.'s Journal;url=http://www.deathtripmovie.com/journal.html;");
aI("text=Invest;url=http://www.deathtripmovie.com/invest.html;");
aI("text=Donate;url=http://www.dropcash.com/campaign/DeathTripMovie/electromagnetic_death_trip_movie/;target=_blank;");
}

with(milonic=new menuname("paranormal")){
style=menuStyle;
aI("text=The Soul;url=http://www.deathtripmovie.com/soul.html;");
aI("text=Soul Extraction;url=http://www.deathtripmovie.com/soulextract.html;");
aI("text=Dr. ___'s Theorys;url=http://www.deathtripmovie.com/theorys.html;");
aI("text=Spirits;url=http://www.deathtripmovie.com/spirits.html;");
aI("text=Electromagnetic Orbs;url=http://www.deathtripmovie.com/orbs.html;");
aI("text=Vortexes;url=http://www.deathtripmovie.com/vortexes.html;");
aI("text=Ectoplasmic Mist;url=http://www.deathtripmovie.com/mist.html;");
}

drawMenus();



and here is the link http://www.deathtripmovie.com

thanks again!


Poster: D4rky
Dated: Friday March 2 2007 - 17:27:15 GMT

also ruth i noticed that firefox wasn't ignoring the top and left positions, the problem is that IE is counting anything I put for positioning as double the space of pixels i use it looks like. and it doesnt stay with resizing the window in IE also. IE is terrible i see why everyone hates it.


Poster: Ruth
Dated: Friday March 2 2007 - 18:00:32 GMT

Hi,

I think you misunderstand the positioning by image method. When you have an image and position the menu using that, the program uses the image's left position as the menu's left position, and the image's top position plus the height of the image as the menu's top position. So when you tell it 23 as top it takes the transparent image's height [? 1px?] and adds 23 to it. So, this would be your code to set it right below the parent, no offsets set....

Code:
<IMG id=filmmenu
                  src="transparent.gif" border=0 name=filmmenu><A
                  onmouseover="popup('film','filmmenu')"
                  onmouseout=popdown()
                  href="http://www.deathtripmovie.com/#">



Ruth


Poster: D4rky
Dated: Friday March 2 2007 - 19:01:51 GMT

thanx ruth, I understand how the positioning with images works now....but it still is off in internet explorer. if i dont add any top and left positioning with just the code above its perfect in internet explorer when the window is maximized, when the window gets adjusted the menu doesnt show up in the same place. but in firefox the image is at the correct place hovering right over the image, so if I add the top and left to fix the firefox position, Internet Explorer isnt right.


the problem is internet explorer is not right. without adding any top and left positioning why would the menu be perfect without position adjustment? it shouldnt go under the image until i tell it how many pixels to go. hope you can understand what im tryin to say as Im not the best at explaining. here the updated link with what you told me to do...

http://www.deathtripmovie.com/index2.html

thanx, sorry to be a bother


Poster: Ruth
Dated: Friday March 2 2007 - 19:40:55 GMT

Hi,

The menu sets the position of the submenu from it's parent. In the pop up it says 'OK, I see the submenu, and I'm being told to position it based on the image id, and there are no positions put in the code so I will put it at the left side of the image and down x pixels because the image is x pixels high.'

What seems to be happening in IE is that when you manually resize the window it is not reading that this has been done, and it's 'remembering' where the menu opened originally.

I will report this to milonic. It may be that you'll need a refresh code, that is something that tells the page to reload when resized. I don't know much about this kind of stuff. But I will notify Milonic on the issue.

EDIT: I just had a thought. There is an automatic collision detection in the menu. This means that it 'reads' the sides/top/bottom/ of the browser window and shifts the submenu away from it so it doesn't open outside viewing area. Now, I think that might be some of what's happening in IE. Try adding ignoreCollisions=true; at the top of the menu_data file, up under the subOffset area and see if the popup gets placed right when you resize the window manually.


Ruth


Poster: Ruth
Dated: Friday March 2 2007 - 19:51:38 GMT

Hi,

Just a note to have you look at the edit in my previous post in case you had already read it before I did the edit.

Ruth


Poster: D4rky
Dated: Friday March 2 2007 - 20:09:44 GMT

thanx Ruth, that worked for the window resize problem in IE you genius!

but now i still have that other problem. In Internet Explorer it looks fine, but I need to place the submenu lower underneath the image in FireFox, but once i do that it places it lower in IE as well when IE was already fine. try the site in both browsers if you can, you'll see what i mean. I haven't set any top and left positions...this is default, its always 3/4 of an inch lower than it should be in IE

http://www.deathtripmovie.com/index2.html

Thanks again Ruth!


Poster: Ruth
Dated: Friday March 2 2007 - 20:36:44 GMT

Hi,

It's the positioning by the browser of that transparent gif. All the browsers seem to do things differently. I.E. their default margins are not the same, and it seems that in FF the image is up higher than in IE. With nothing specified maybe FF choose the top of the cell and IE choose the bottom. I have no idea, or maybe IE puts it in the middle when nothing is said, and FF at the top. Whatever..... What you need to do is add two table cells for the transparent gif images and set th tds to valign=bottom. Then the transparent image is always at the bottom of the cell and it seems to be the same in both browsers.

Note: I tried just putting in valign=bottom in the cell where the menus and the transparent iamges are now but that will not work because it shifts the whole item down, your mouseover images, too.

Ruth




Code:
<td valign=bottom>
<IMG id=milonicmenu src="transparent.gif" border=0
                  name=milonicmenu></td>

<TD width="7%"><A onmouseover="popup('film','milonicmenu')"; 
                  onmouseout=popdown()
                  href="http://www.deathtripmovie.com/#"><IMG
                  onmouseover="MM_swapImage('the film','','the-film-on.jpg',1)"
                  onmouseout=MM_swapImgRestore() height=23 alt="About the Film"
                  src="the-film-off.jpg" width=70 border=0
                  name="the film"></A></TD>


That seems to take care of it.

THANK YOU!!


Poster: D4rky
Dated: Friday March 2 2007 - 23:37:34 GMT

IT WORKS!!! YES!! thanx so much Ruth!!! I really appreciate it! Take Care