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:50

IE vs Firefox: Positioning issue


Poster: travelnurses
Dated: Monday October 23 2006 - 15:23:32 BST

The menu on our page is showing up in a different position on IE vs
Firefox. Can someone please help me? Let me know how any files, code i
can provide.

Thank you!

Here is the menu_data:

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




with(menuStyle=new mm_style()){
bordercolor="#005DC3";
borderstyle="solid";
borderwidth=1;
fontfamily="Tahoma, Verdana, Arial";
fontsize="9px";
fontweight="bold";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#005DC3";
offcolor="#FFFFFF";
onbgcolor="#005DC3";
oncolor="#ff0";
outfilter="fade(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=100);Shadow
(color=#777777', Direction=135, Strength=5)";
padding=5;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#2D729D";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}



with(milonic=new menuname("Milonic")){
style=menuStyle;
top="offset=7";
left="offset=-4";
aI("text=Why Nurses Travel;url=http://www.travelnursesnow.com/
travel_nursing/whynursestravel.php;");


}



drawMenus();


Poster: John
Dated: Monday October 23 2006 - 15:37:42 BST

First you need to get up to current. You're running 5.756, 5.760 is current.

Let us know if that helps.


Poster: travelnurses
Dated: Monday October 23 2006 - 16:32:01 BST

Updated all the files except menu_data.js. Still not working right. I am using:

<a
href="http://www.travelnursesnow.com/travel_nursing/travel_nursing_jobs.
php" title="Learn More About Travel Nursing Jobs" onmouseover="popup
('milonic','milonicmenu')" onmouseout="popdown()">


Poster: travelnurses
Dated: Monday October 23 2006 - 18:54:10 BST

Also it seems like the vertical positioning is off while the horizontal positioning is correct.


Poster: travelnurses
Dated: Thursday October 26 2006 - 14:33:28 BST

Can anyone help me here?


Poster: vikenk
Dated: Sunday October 29 2006 - 17:34:06 GMT

Hi,

I think part of the problem is the overfiler:
Code:
overfilter="Fade(duration=0.2);Alpha(opacity=100);Shadow
(color=#777777', Direction=135, Strength=5)";


Firefox does not support the shadow underneath the menu. Only IE
supports the shadow. The shadow accounts for about 3-5 pixels, I think.
Try removing the shadow and see if it lines up better.

--
Viken K.
http://www.vikenk.com
http://www.sayatnova.com


Poster: Ruth
Dated: Sunday October 29 2006 - 22:43:42 GMT

Hi,

I think you can set offsets, not sure but you might try

Code:
<a
href="http://www.travelnursesnow.com/travel_nursing/travel_nursing_jobs.
php" title="Learn More About Travel Nursing Jobs" onmouseover="popup
('milonic','milonicmenu',10,10);" onmouseout="popdown()">


Since you are positioning it by an image then that should set the top 10px
down and 10px left. Experiment and see what works for what you want.

http://www.milonic.com/menu_methods.php Check this down towards the
bottom you'll see pop up and an explanation of using the offsets.

Ruth


Poster: travelnurses
Dated: Tuesday May 1 2007 - 21:27:14 BST

I have tried everything to get this to work.
The menu works great but shows up higher
in firefox then in IE6 / IE7.

here is my menu_data.js:

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





with(menuStyle=new mm_style()){
bordercolor="#2D729D";
borderstyle="solid";
borderwidth=1;
fontfamily="Tahoma, Verdana, Arial";
fontsize="9px";
fontweight="bold";
fontstyle="normal";
textalign="center";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#005DC3";
offcolor="#FFFFFF";
onbgcolor="#005DC3";
oncolor="#FFFF00";
outfilter="fade(duration=0.3)";
padding=5;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#2D729D";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}



with(milonic=new menuname("travelnursing")){
style=menuStyle;
aI("text=How Traveling Works    url=http://www.travelnursesnow.com/travel_nursing/howtravelingworks.php;");
aI("text=Travel Nursing Benefits    url=http://www.travelnursesnow.com/travel_nursing/travelnursingbenefits.php;");
aI("text=Why Nurses Travel   url=http://www.travelnursesnow.com/
travel_nursing/whynursestravel.php;");
aI("text=Arizona Travel Nursing    url=http://www.travelnursesnow.com/travel_nursing/arizonatravelnursingjobs;");
aI("text=California Travel Nursing    url=http://www.travelnursesnow.com/travel_nursing/CaliforniaTravelNursingJobs.php;");
aI("text=Florida Travel Nursing    url=http://www.travelnursesnow.com/travel_nursing/FloridaTravelNursingJobs.php;");
aI("text=Texas Travel Nursing    url=http://www.travelnursesnow.com/travel_nursing/TexasTravelNursingJobs.php;");

}

with(milonic=new menuname("nursingjobs")){
style=menuStyle;
aI("text=History of Nursing    url=http://www.travelnursesnow.com/
nursingjobs/historyofnursing.php;");
aI("text=Nursing Education    url=http://www.travelnursesnow.com/
nursingjobs/nursingeducation.php;");
aI("text=Nursing Profession    url=http://www.travelnursesnow.com/
nursingjobs/nursingprofession.php;");


}



drawMenus();


Here is my header html:

Code:
<LINK REL=stylesheet HREF="../stylesheet.css" TYPE="text/css">

<script type="text/javascript" src="http://www.travelnursesnow.com/milonic_src.js">
</script>
<script type="text/javascript">
<!--
if(ns4)_d.write("<script language=JavaScript
src=http://www.travelnursesnow.com/mmenuns4.js><\/script>");
else _d.write("<script language=JavaScript
src=http://www.travelnursesnow.com/mmenudom.js><\/script>");
-->
</script>
<script type="text/javascript"
src="http://www.travelnursesnow.com/menu_data.js"></script>
<link href="../stylesheet.css" rel="stylesheet" type="text/css" />

<DIV id=header><a
href="http://www.travelnursesnow.com/index.php"><img
src="/images/logo.gif" alt="Travel Nurses Now Employment Agency - Find
Travel Nursing Jobs" width=292 height=59 border="0" style="MARGIN:
8px 0px 8px 16px" name="milonicmenu" id="milonicmenu"></a><!--
START SCANALERT CODE --><!-- END SCANALERT CODE --> <img 
height="33" style="MARGIN: 0px 0px 21px 156px"
src="/images/call_us_logo.gif" width="199" /><a target="_blank"
href="https://www.scanalert.com/RatingVerify?
ref=www.travelnursesnow.com"><img width="65" height="37" border="0"
style="MARGIN: 0px 0px 18px 18px"
src="//images.scanalert.com/meter/www.travelnursesnow.com/31.gif"
alt="HACKER SAFE certified sites prevent over 99.9% of hacker crime."
oncontextmenu="alert('Copying Prohibited by Law - HACKER SAFE is a
Trademark of ScanAlert'); return false;" /></a></DIV>

<!-- subheader -->
<DIV id=subheader>
<TABLE cellSpacing=0 width="100%"><TBODY><TR vAlign=top>
    <TD style="BORDER-RIGHT: #ccc 1px solid"><div class=box><a
href="http://www.travelnursesnow.com/index.php" title="Travel Nurses
Now Home Page"><img src="/images/home_button.gif" width="12"
height="13" /></a></div></TD>
    <TD style="BORDER-RIGHT: #ccc 1px solid; background:#CC0000"
class="box"><div class=box><a
href="http://www.travelnursesnow.com/register_now.php" title="Travel
Nursing Jobs pay up to $85,000/yr! Register Now">Register
Now</a></div></TD>
    <TD style="BORDER-RIGHT: #ccc 1px solid"><div class=box><a
href="http://www.travelnursesnow.com/alliedhealthjobs.php" title="Find
Allied Health Nursing Jobs">Allied Health Jobs</a></div></TD>
    <TD style="BORDER-RIGHT: #ccc 1px solid"><div class=box>
<a
href="http://www.travelnursesnow.com/travel_nursing/travel_nursing_jobs.
php" title="Learn More About Travel Nursing Jobs" onmouseover="popup
('travelnursing','milonicmenu', 22,194)" onmouseout="popdown()">Travel
Nursing Jobs</a></div></TD>

    <TD style="BORDER-RIGHT: #ccc 1px solid"><div class=box><a
href="http://www.travelnursesnow.com/perdiemjobs.php" title="Find Per
Diem Nursing Jobs">Per Diem Nurses</a></div></TD>
    <TD style="BORDER-RIGHT: #ccc 1px solid"><div class=box><a
href="http://www.travelnursesnow.com/permanentnursing.php" title="Find
Great Permanent Nursing Positions">Permanent
Positions</a></div></TD>
    <TD style="BORDER-RIGHT: #ccc 1px solid"><div class=box><a
href="http://www.travelnursesnow.com/nursingjobs/nursingjobs.php"
title="Per Diem and Travel Nursing Jobs" onmouseover="popup
('nursingjobs','milonicmenu',21,530)" onmouseout="popdown()">Nursing
Jobs</a></div></TD>
    <TD style="BORDER-RIGHT: #ccc 1px solid"><div class=box><a
href="http://www.travelnursesnow.com/travelhousing.php" title="Travel
Housing Information">Housing</a></div></TD>
    <TD><div class=box><a
href="http://www.travelnursesnow.com/nursingnews.php" title="Travel
Nursing Related News">Nursing News</a></div></TD>
  </TR></TBODY></TABLE>
</DIV>
<DIV id=bottomnav></DIV>


Poster: Ruth
Dated: Tuesday May 1 2007 - 23:45:33 BST

Hi,

The only thing I can think is that because you're calling the popup from a
div inside a table cell . I tried using images to position the submenu by the
image but that didn't work either. Using offsets in the popup call does
work, the problem is that if the resolution changes it probably wouldn't be
the same position at all of them.

Is there some reason you don't just use a full menu, including in it all of
the items you now have in different table cells, place that menu into the
table set to 100% width? Using a full menu you can set position='relative';
which fixes the problem with the submenus

Ruth


Poster: travelnurses
Dated: Wednesday May 2 2007 - 2:06:38 BST

I'm just using the menu for the categories I need a drop down. Does that
make sense? Right now i'm using them for the "Travel Nursing Jobs"
and "nursing jobs."


Poster: Ruth
Dated: Wednesday May 2 2007 - 5:42:20 BST

Hi,

OK, I finally got something to work.

You need to create a transparent image 1px by 1px, and you need to save
it twice, once as transparent.gif and once as transparent1.gif. You will put
these images into the two items, transparent in the first one and
transparent1 in the second one. The two sections that call the menus would
be as follows,

travel nursing jobs

Code:
<TD style="BORDER-RIGHT: #ccc 1px solid;">
<DIV class=box><img src="transparent.gif" width="1" height="1"
border="0" name=travelnurse id=travelnurse><A
onmouseover="popup('travelnursing','travelnurse',8,-8)"
title="Learn More About Travel Nursing Jobs" onmouseout=popdown()
      href="http://www.travelnursesnow.com/travel_nursing/travel_nursing_jobs.
php">Travel
      Nursing Jobs</A></DIV></TD>


Nursing Jobs
Code:
<TD style="BORDER-RIGHT: #ccc 1px solid;">
<DIV class=box><img src="transparent1.gif" width="1" height="1"
border="0" name=nursejob id=nursejob><A onmouseover="popup
('nursingjobs','nursejob',8,-8)"
title="Per Diem and Travel Nursing Jobs" onmouseout=popdown()
href="http://www.travelnursesnow.com/nursingjobs/nursingjobs.php">
Nursing Jobs</A></DIV></TD>


You need to have both name and id the same, and to include both since
some of the older browsers use id some use name. Now your menus will
open at those images, and you can now use those last parameters to offset
it where you want, those parameters can be either positive or negative
numbers. You'll see I have them set to a positive number for the top
shifting it downward, and negative for the left shifting them back toward
the left.

Ruth


Poster: travelnurses
Dated: Wednesday May 2 2007 - 17:52:44 BST

Thank you for your reply. This technique has made it way better but still
shows the menus higher up (about 3px) in firefox then IE. Are you
experiencing the same issue?


Poster: Ruth
Dated: Wednesday May 2 2007 - 22:34:18 BST

Hi,

That is going to be the result of how each browser places the image, I think.

Anyway, the only fix I found is to do the following.

1. remove the images from those two items
2. create another row of table cells and place the images in the 4th and 7th respectively
3. change the offset numbers in the items to reset the position.

The reason to do it this way is you can control the new row of cells with css.

Code:
<tr>
       <td style="background:#05487f;height:1px;padding:2px;"></td>
       <td style="background:#05487f;height:1px;padding:2px;"></td>
       <td style="background:#05487f;height:1px;padding:2px;"></td>
       <td style="background:#05487f;height:1px;vertical-align:bottom;padding:1px;" valign="bottom"><img src="transparent.gif" width="1" height="1" border="0" name=travelnurse id=travelnurse></td>
       <td style="background:#05487f;height:1px;padding:2px;"></td>
       <td style="background:#05487f;height:1px;padding:2px;"></td>
       <td style="background:#05487f;height:1px;vertical-align:bottom;padding:1px;" valign="bottom"><img src="transparent1.gif" width="1" height="1" border="0" name=nursejob id=nursejob></td>
       <td style="background:#05487f;height:1px;padding:2px;"></td>
       <td style="background:#05487f;height:1px;padding:2px;"></td>
</tr>


Now, if you do that and remove the bottomnav div, the above row will replace it, it has the same background color, and it's just about the same size. The menus then seem to open in the same place in both browsers.

Ruth