Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
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();
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: 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)";
(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()">
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();
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>
<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>
<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>
<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>
<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