IE vs Firefox: Positioning issue

travelnurses · Post by **travelnurses** » Mon Oct 23, 2006 3:23 pm

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: Select all

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();

Post by **John** » Mon Oct 23, 2006 3:37 pm

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

Let us know if that helps.

travelnurses · Post by **travelnurses** » Mon Oct 23, 2006 4:32 pm

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

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

travelnurses · Post by **travelnurses** » Mon Oct 23, 2006 6:54 pm

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

travelnurses · Post by **travelnurses** » Thu Oct 26, 2006 2:33 pm

Can anyone help me here?

vikenk · Post by **vikenk** » Sun Oct 29, 2006 6:34 pm

Hi,

I think part of the problem is the overfiler:

Code: Select all

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

Post by **Ruth** » Sun Oct 29, 2006 11:43 pm

Hi,

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

Code: Select all

<a 
href="http://websites.milonic.com/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://milonic.com/menu_methods.php Check this down towards the
bottom you'll see pop up and an explanation of using the offsets.

Ruth

travelnurses · Post by **travelnurses** » Tue May 01, 2007 9:27 pm

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: Select all

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: Select all

<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://websites.milonic.com/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="http://websites.milonic.com/scanalert.com/RatingVerify?
ref=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://websites.milonic.com/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://websites.milonic.com/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://websites.milonic.com/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://websites.milonic.com/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://websites.milonic.com/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://websites.milonic.com/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://websites.milonic.com/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://websites.milonic.com/travelnursesnow.com/travelhousing.php" title="Travel 
Housing Information">Housing</a></div></TD>
    <TD><div class=box><a 
href="http://websites.milonic.com/travelnursesnow.com/nursingnews.php" title="Travel 
Nursing Related News">Nursing News</a></div></TD>
  </TR></TBODY></TABLE>
</DIV>
<DIV id=bottomnav></DIV>

Post by **Ruth** » Tue May 01, 2007 11:45 pm

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

travelnurses · Post by **travelnurses** » Wed May 02, 2007 2:06 am

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."

Post by **Ruth** » Wed May 02, 2007 5:42 am

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: Select all

<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://websites.milonic.com/travelnursesnow.com/travel_nursing/travel_nursing_jobs.
php">Travel 
      Nursing Jobs</A></DIV></TD>

Nursing Jobs

Code: Select all

<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://websites.milonic.com/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

travelnurses · Post by **travelnurses** » Wed May 02, 2007 5:52 pm

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?

Post by **Ruth** » Wed May 02, 2007 10:34 pm

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: Select all

<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