Menu OK in PC browsers but shifts in Mac browsers

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:26

Menu OK in PC browsers but shifts in Mac browsers

Poster: Kat
Dated: Tuesday November 8 2005 - 3:36:56 GMT

The site I'm having a problem with is http://mission.xtools.co.nz

The design is centre aligned and 740px wide with text links below the Milonic menu. The Milonic menu is positioned by a negative left offset from the screen centre and the menu items are separated by non-breaking spaces.

My problem is that on Mac browsers (IE, FF, Safari) the menu shifts when it loads (you can tell this because the text links load first) but doesn't move on PC browsers (IE6, FF, NN7).

I've noticed that the Mac menu text (Arial - I've tried 12px and 11px) is a different width to the PC menu text, which would cause a different position when offset from the screen centre. The Mac is 800x600 but I don't get the same problem when the PC is set to 800x600.

Any ideas? Does Mac Arial display at a different width to Arial on PC?

Poster: Ruth
Dated: Tuesday November 8 2005 - 10:00:52 GMT

There is a difference between Mac and PCs on font sizes. It gets really involved and I don't know enough about the field of printing, of picture resolution and the history of computer development. What it comes down to is all fonts are 72nds per inch = 72dpi. The Mac uses that resolution [not the screen size resolution, it gets confusing when there are two different things using the same term resolution] but resolution of dpi, and the Windows platform is 96dpi. So, since all fonts are 72nds per inch, on a mac x number of letters fit into 72dpi and on the windows platform since it is 96dpi you get more letters in the same space. [more or less] Geesh, I hope that made some kind of sense

Also, no matter what font size you specify, the user can over-ride it, either by setting that feature in IE under the accessibility [IE won't adjust absolute sized fonts with the view/text-size/ largest, larger etc.] or in NN, FireFox and probably on the MAC by using the drop down menu and text and/or font size feature, this means that it could be much larger and take up more space, or smaller and take up less. The only real solution is to use images which are the same on all platforms. --I think, so don't quote me on that one

Hope that helps more than confuses

Ruth

Poster: Kat
Dated: Friday November 11 2005 - 2:39:57 GMT

Hi Ruth and thanks for your reply. I realise this goes out the window if users are overriding the font size, but I've seen Milonic menu used on several other sites which render the same in Mac browsers. I can understand a problem with non-standard fonts but I wouldn't expect it with Arial, and replacing text with images isn't an option for me.

I've set up a test version here where (if you have a Mac!) you can see the menu shift left. I've tested this on a 800x600 iBook screen and a 1024x768 Mac Mini screen, both with OSX:

http://mission.xtools.co.nz/history/test.htm

Code follows - any assistance would be greatly appreciated

Milonic (just the relevant parts):

Code:

with(styleTop=new mm_style()){
onbgcolor="#6C0024";
oncolor="#ffffff";
offbgcolor="#6C0024";
offcolor="#999966";
bordercolor="#333333";
borderstyle="solid";
borderwidth=0;
separatorcolor="#ffffff";
separatorsize="0";
padding=0;
fontsize="11px";
fontstyle="normal";
fontfamily="Arial";
fontweight="normal";
pagecolor="";
pagebgcolor="";
headercolor="";
headerbgcolor="";
subimage="";
subimagepadding="0";
subimageposition="right";
overfilter="Fade(duration=1);Alpha(opacity=100);";
outfilter="randomdissolve(duration=0.3)";
}

with(milonic=new menuname("Main Menu")){
style=styleTop;
top=311;
left="offset=-110";
screenposition="center";
alwaysvisible=1;
orientation="horizontal"; //vertical
itemheight="18";

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <title>Mission Estate Winery - Mission Estate Winery home page</title>
      <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
      <meta name="keywords" content="">
      <meta name="description" content="">
      <style>
      body {
          margin: 0;
      }
      
      td {
          font-family: Arial, Verdana, Helvetica, sans-serif;
          font-size: 11px;
          color: #000;
          line-height: 1.4em;
      }
      
      a {
          color: #94820A;
      }
      
      a:hover {
          color: #666;
      }
      
      .nav {
          height: 18px;
      }
      
      .nav a {
          font-size: 11px;
          color: #999966;
          text-decoration: none;
          white-space: nowrap;
      }
      
      .nav a:hover {
          color: #fff;
      }
      </style>
   </head>
   <body>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td height="119" align="center" bgcolor="#6C0024"><img src="http://mission.xtools.co.nz/images/templates/home_mission_logo.jpg" width="171" height="106" alt=""></td>
         </tr>
         <tr>
            <td align="center" bgcolor="#FFF5E8">
               <table style="WIDTH: 740px" cellspacing="0" cellpadding="0" border="0">
                  <tr>
                     <td><img height="187" alt="" hspace="0" src="http://mission.xtools.co.nz/images/templates/home_top1.jpg" width="129" border="0"></td>
                     <td width="1"></td>
                     <td><img height="187" alt="" hspace="0" src="http://mission.xtools.co.nz/images/templates/home_top2.jpg" width="481" border="0"></td>
                     <td width="1"></td>
                     <td><img height="187" alt="" hspace="0" src="http://mission.xtools.co.nz/images/templates/home_top3.jpg" width="128" border="0"></td>
                  </tr>
               </table>
            </td>
         </tr>
         <tr>
            <td height="29" align="center" bgcolor="#6C0024">
               <table width="740" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                     <td style="padding: 0 0 0 22px">
                        <table border="0" cellspacing="0" cellpadding="0" class="nav">
                           <tr>
                              <td><a href="http://mission.xtools.co.nz/">Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
                              <td><a href='http://mission.xtools.co.nz/history/' title='History'>History&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
                              <td><a href='http://mission.xtools.co.nz/our_wine/' title='Our Wine'>Our Wine&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
                              <td><a href='http://mission.xtools.co.nz/restaurant/' title='Restaurant'>Restaurant&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
                              <td><a href='http://mission.xtools.co.nz/cellar_door/' title='Cellar Door'>Cellar Door&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
                              <td><a href='http://mission.xtools.co.nz/concert/' title='Concert'>Concert&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
                              <td><a href='http://mission.xtools.co.nz/news/' title='News'>News&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
                              <td><a href='http://mission.xtools.co.nz/contact_us/' title='Contact Us'>Contact Us&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
                           </tr>
                        </table>
                     </td>
                     <td width="186" class="search"></td>
                  </tr>
               </table>
            </td>
         </tr>
      </table>
      <script language="JavaScript" src="http://mission.xtools.co.nz/scripts/menu_src.js" type="text/javascript"></script>
      <script language="JavaScript" type="text/javascript">                                                                       
        if(ns4)_d.write("<scr"+"ipt language=JavaScript src=http://mission.xtools.co.nz/scripts/mmenuns4.js><\/scr"+"ipt>");                                                                          
        else _d.write("<scr"+"ipt language=JavaScript src=http://mission.xtools.co.nz/scripts/mmenudom.js><\/scr"+"ipt>");                                                                          
      </script>
      <script language="JavaScript" src="http://mission.xtools.co.nz/scripts/menu_def.js" type="text/javascript"></script>
   </body>
</html>

Poster: Ruth
Dated: Friday November 11 2005 - 3:58:15 GMT

Hi,

I'm sorry but I don't know how to fix this and can't play around since I do not have a Mac.

If you can find one of those sites, can you drop a link and maybe I can figure out what they did for the size to be the same across the different platforms?

Ruth

Poster: John
Dated: Saturday November 12 2005 - 22:13:26 GMT

I can see it happening under FF1.0.7. Interesting little bug(ger). Will see what I can figure out.

Poster: Ruth
Dated: Saturday November 12 2005 - 23:28:26 GMT

Thanks, John. Without a Mac it's hard to test things. I had one idea the other day. What about setting a fixed width on the menu? menuwidth 480 or something?

Ruth

Poster: John
Dated: Saturday November 12 2005 - 23:42:05 GMT

It took me a while to actually see what was happening, and longer than it should have to see the fix(es)...

1. Your menu calls were at the end of the document. They like it better right after the <body>.

2. You were not following the rules for placement of the menu inside a <td>. See http://milonic.com/tablemenu.php.

3. You actually had the main menu in there twice - once in a bunch of <td> on the main page, and again in the _data file. What you were seeing was the "menu" being built by the HTML, and then again by the _data file, which overlayed the HTML.

4. There were a number of places where you had ' rather than ", but that was not the cause of the problem. Being picky, I changed them all anyway.

HTML...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mission Estate Winery - Mission Estate Winery home page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
  body {
      margin: 0px;
  }
  
  td {
      font-family: Arial, Verdana, Helvetica, sans-serif;
      font-size: 11px;
      color: #000;
      line-height: 1.4em;
  }
  
  a {
      color: #94820A;
  }
  
  a:hover {
      color: #666;
  }
  
  .nav {
      height: 18px;
  }
  
  .nav a {
      font-size: 11px;
      color: #999966;
      text-decoration: none;
      white-space: nowrap;
  }
  
  .nav a:hover {
      color: #fff;
  }
</style>
</head>
<body>
<script language="javascript" src="http://mission.xtools.co.nz/scripts/menu_src.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">                                                                       
    if(ns4)_d.write("<scr"+"ipt language=javascript src=http://mission.xtools.co.nz/scripts/mmenuns4.js><\/scr"+"ipt>");                                                                          
    else _d.write("<scr"+"ipt language=javascript src=http://mission.xtools.co.nz/scripts/mmenudom.js><\/scr"+"ipt>");                                                                          
</script>
<script language="javascript" src="menu_def.js" type="text/javascript"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="119" align="center" bgcolor="#6C0024"><img src="http://mission.xtools.co.nz/images/templates/home_mission_logo.jpg" width="171" height="106" alt=""></td>
</tr>
<tr>

<td align="center" bgcolor="#FFF5E8">
<table style="WIDTH: 740px" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img height="187" alt="" hspace="0" src="http://mission.xtools.co.nz/images/templates/home_top1.jpg" width="129" border="0"></td>
<td width="1"></td>
<td><img height="187" alt="" hspace="0" src="http://mission.xtools.co.nz/images/templates/home_top2.jpg" width="481" border="0"></td>
<td width="1"></td>
<td><img height="187" alt="" hspace="0" src="http://mission.xtools.co.nz/images/templates/home_top3.jpg" width="128" border="0"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="29" align="center" bgcolor="#6C0024">
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 0px 0px 0px 22px">

<table border="0" cellspacing="0" cellpadding="0" class="nav">
<tr>
<td><script language="javascript" type="text/javascript">
with(milonic=new menuname("Main Menu")){
style=styleTop;
top=311;
left="offset=-110";
screenposition="center";
alwaysvisible=1;
orientation="horizontal"; //vertical
itemheight="18";
aI("text=Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;url=http://mission.xtools.co.nz;status=Home Page;");
aI("text=History&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;showmenu=history15;url=http://mission.xtools.co.nz/history/;status=History;");
aI("text=Our Wine&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;showmenu=our_wine16;url=http://mission.xtools.co.nz/our_wine/;status=Our Wine;");
aI("text=Restaurant&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;showmenu=restaurant17;url=http://mission.xtools.co.nz/restaurant/;status=Restaurant;");
aI("text=Cellar Door&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;showmenu=cellar_door18;url=http://mission.xtools.co.nz/cellar_door/;status=Cellar Door;");
aI("text=Concert&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;url=http://mission.xtools.co.nz/concert/;status=Concert;");
aI("text=News&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;showmenu=news21;url=http://mission.xtools.co.nz/news/;status=News;");
aI("text=Contact Us&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;showmenu=contact_us19;url=http://mission.xtools.co.nz/contact_us/;status=Contact Us;");
}
drawMenus();
</script>
</td>

</tr>
</table>
</td>
<td width="186" class="search"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

_data...

Code:

/*****************************************
  THIS IS VERSION 5 OF THE MILONIC MENU
*****************************************/

_menuCloseDelay=500   // The time delay for menus to remain visible on mouse out
_menuOpenDelay=100   // The time delay before menus open on mouse over
_followSpeed=5      // Follow scrolling speed
_followRate=40      // Follow scrolling Rate
_subOffsetTop=6      // Sub menu top offset
_subOffsetLeft=-7   // Sub menu left offset
_scrollAmount=3      // Only needed for Netscape 4.x
_scrollDelay=20      // Only needed for Netcsape 4.x

with(styleTop=new mm_style()){
onbgcolor="#6C0024";
oncolor="#ffffff";
offbgcolor="#6C0024";
offcolor="#999966";
bordercolor="#333333";
borderstyle="solid";
borderwidth=0;
separatorcolor="#ffffff";
separatorsize=0;
padding=0;
fontsize="11px";
fontstyle="normal";
fontfamily="Arial";
fontweight="normal";
overfilter="Fade(duration=1);Alpha(opacity=100);";
outfilter="randomdissolve(duration=0.3)";
}

with(styleSub=new mm_style()){
onbgcolor="#D7D7D7";
oncolor="#000000";
offbgcolor="#6C0024";
offcolor="#FFFFFF";
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=0;
separatorcolor="#ffffff";
separatorsize=1;
padding=3;
fontsize="11px";
fontstyle="normal";
fontfamily="Arial";
fontweight="normal";
headercolor="#000000";
headerbgcolor="#ffffff";
overfilter="inset(duration=0.3);Fade(duration=0.2);Alpha(opacity=100);";
outfilter="randomdissolve(duration=0.6)";
}

with(milonic=new menuname("history15")){
style=styleSub;
top="offset=1";
left="offset=5";
itemwidth=220;
aI("text=Timeline;url=http://mission.xtools.co.nz/history/timeline/;status=Timeline;");
}

with(milonic=new menuname("our_wine16")){
style=styleSub;
top="offset=1";
left="offset=5";
itemwidth=220;
aI("text=Mission Estate;showmenu=mission_estate28;url=http://mission.xtools.co.nz/our_wine/mission_estate/;status=Mission Estate;");
aI("text=Vineyard Selection;showmenu=vineyard_selection39;url=http://mission.xtools.co.nz/our_wine/vineyard_selection/;status=Vineyard Selection;");
aI("text=Mission Reserve;showmenu=mission_reserve45;url=http://mission.xtools.co.nz/our_wine/mission_reserve/;status=Mission Reserve;");
aI("text=Jewelstone;showmenu=jewelstone51;url=http://mission.xtools.co.nz/our_wine/jewelstone/;status=Jewelstone;");
aI("text=Wine Makers Comments;showmenu=wine_makers_comments25;url=http://mission.xtools.co.nz/our_wine/wine_makers_comments/;status=Wine Makers Comments;");
aI("text=Wine Order Form;url=http://mission.xtools.co.nz/our_wine/wine_order_form/;status=Wine Order Form;");
}

with(milonic=new menuname("mission_estate28")){
style=styleSub;
top="offset=1";
left="offset=5";
itemwidth=220;
aI("text=Chardonnay;url=http://mission.xtools.co.nz/our_wine/mission_estate/chardonnay/;status=Chardonnay;");
aI("text=Sav Blanc;url=http://mission.xtools.co.nz/our_wine/mission_estate/sav_blanc/;status=Sav Blanc;");
aI("text=Merlot;url=http://mission.xtools.co.nz/our_wine/mission_estate/merlot/;status=Merlot;");
aI("text=Cab Sav;url=http://mission.xtools.co.nz/our_wine/mission_estate/cab_sav/;status=Cab Sav;");
aI("text=Pinot Gris;url=http://mission.xtools.co.nz/our_wine/mission_estate/pinot_gris/;status=Pinot Gris;");
aI("text=Rose;url=http://mission.xtools.co.nz/our_wine/mission_estate/rose/;status=Rose;");
aI("text=Cab Merlot;url=http://mission.xtools.co.nz/our_wine/mission_estate/cab_merlot/;status=Cab Merlot;");
aI("text=Riesling;url=http://mission.xtools.co.nz/our_wine/mission_estate/riesling/;status=Riesling;");
aI("text=Gewurztraminer;url=http://mission.xtools.co.nz/our_wine/mission_estate/gewurztraminer/;status=Gewurztraminer;");
aI("text=Ice Wine;url=http://mission.xtools.co.nz/our_wine/mission_estate/ice_wine/;status=Ice Wine;");
}

with(milonic=new menuname("vineyard_selection39")){
style=styleSub;
top="offset=1";
left="offset=5";
itemwidth=220;
aI("text=Chardonnay;url=http://mission.xtools.co.nz/our_wine/vineyard_selection/chardonnay/;status=Chardonnay;");
aI("text=Unoaked Chardonnay;url=http://mission.xtools.co.nz/our_wine/vineyard_selection/unoaked_chardonnay/;status=Unoaked Chardonnay;");
aI("text=Sav Blanc;url=http://mission.xtools.co.nz/our_wine/vineyard_selection/sav_blanc/;status=Sav Blanc;");
aI("text=Merlot;url=http://mission.xtools.co.nz/our_wine/vineyard_selection/merlot/;status=Merlot;");
aI("text=Cab Sav;url=http://mission.xtools.co.nz/our_wine/vineyard_selection/cab_sav/;status=Cab Sav;");
}

with(milonic=new menuname("mission_reserve45")){
style=styleSub;
top="offset=1";
left="offset=5";
itemwidth=220;
aI("text=Chardonnay;url=http://mission.xtools.co.nz/our_wine/mission_reserve/chardonnay/;status=Chardonnay;");
aI("text=Merlot;url=http://mission.xtools.co.nz/our_wine/mission_reserve/merlot/;status=Merlot;");
aI("text=Cab Sav;url=http://mission.xtools.co.nz/our_wine/mission_reserve/cab_sav/;status=Cab Sav;");
aI("text=Syrah;url=http://mission.xtools.co.nz/our_wine/mission_reserve/syrah/;status=Syrah;");
aI("text=Cab Merlot;url=http://mission.xtools.co.nz/our_wine/mission_reserve/cab_merlot/;status=Cab Merlot;");
}

with(milonic=new menuname("jewelstone51")){
style=styleSub;
top="offset=1";
left="offset=5";
itemwidth=220;
aI("text=Chardonnay;url=http://mission.xtools.co.nz/our_wine/jewelstone/chardonnay/;status=Chardonnay;");
aI("text=Syrah;url=http://mission.xtools.co.nz/our_wine/jewelstone/syrah/;status=Syrah;");
}

with(milonic=new menuname("wine_makers_comments25")){
style=styleSub;
top="offset=1";
left="offset=5";
itemwidth=220;
aI("text=Vintage Notes;url=http://mission.xtools.co.nz/our_wine/wine_makers_comments/vintage_notes/;status=Vintage Notes;");
}

with(milonic=new menuname("restaurant17")){
style=styleSub;
top="offset=1";
left="offset=5";
itemwidth=220;
aI("text=Weddings;url=http://mission.xtools.co.nz/restaurant/weddings/;status=Weddings;");
aI("text=Conference facilities & Private functions;url=http://mission.xtools.co.nz/restaurant/conference_facilities_7_private_functions/;status=Conference facilities & Private functions;");
}

with(milonic=new menuname("cellar_door18")){
style=styleSub;
top="offset=1";
left="offset=5";
itemwidth=220;
aI("text=Wine Gifts;url=http://mission.xtools.co.nz/cellar_door/wine_gifts/;status=Wine Gifts;");
aI("text=Wine Gift Order Form;url=http://mission.xtools.co.nz/cellar_door/wine_gift_order_form/;status=Wine Gift Order Form;");
aI("text=Art & Craft Gallery;url=http://mission.xtools.co.nz/cellar_door/art_7_craft_gallery/;status=Art & Craft Gallery;");
aI("text=Order Forms;url=http://mission.xtools.co.nz/cellar_door/order_forms/;status=Order Forms;");
aI("text=Wine Club;url=http://mission.xtools.co.nz/cellar_door/wine_club/;status=Wine Club;");
}

with(milonic=new menuname("news21")){
style=styleSub;
top="offset=1";
left="offset=5";
itemwidth=220;
aI("text=Wine Awards;url=http://mission.xtools.co.nz/news/wine_awards/;status=Wine Awards;");
aI("text=Wine Quotes;url=http://mission.xtools.co.nz/news/wine_quotes/;status=Wine Quotes;");
aI("text=Journalists news;url=http://mission.xtools.co.nz/news/journalists_news/;status=Journalists news;");
aI("text=Press Releases;url=http://mission.xtools.co.nz/news/press_releases/;status=Press Releases;");
aI("text=Wine News;url=http://mission.xtools.co.nz/news/wine_news/;status=Wine News;");
aI("text=Competitions;url=http://mission.xtools.co.nz/news/competitions/;status=Competitions;");
}

with(milonic=new menuname("contact_us19")){
style=styleSub;
top="offset=1";
left="offset=5";
itemwidth=220;
aI("text=Location Map;url=http://mission.xtools.co.nz/contact_us/location_map/;status=Location Map;");
aI("text=Distribution Channels;url=http://mission.xtools.co.nz/contact_us/distribution_channels/;status=Distribution Channels;");
aI("text=Related Links;url=http://mission.xtools.co.nz/contact_us/related_links/;status=Related Links;");
}

drawMenus();

Poster: Kat
Dated: Sunday November 13 2005 - 20:50:17 GMT

Hi John and thanks so much for looking at this problem.

I have taken note of the proper position of the script tags and have put these below the body tag and inside the <td></td>. The menu items with single quotes were written out with PHP but I can amend this to output double quotes. The code to draw menus is a global include for several websites, so I can't change that to use the _data javascript you supplied.

The menu links are duplicated in HTML for search engines and is a standard requirement of websites built by my company. When I leave them in I still get the same "shifting" problem when the Milonic is drawn over the top!

I'm about to give up on this; it's very frustrating but really doesn't deserve so much time spent on it.

Poster: Ruth
Dated: Sunday November 13 2005 - 22:42:02 GMT

Hi Kat,

As you know I can't check this, but try setting up your main menu with itemwidths and eliminate the non-breaking line spaces to space out the items and add a non-breaking line space between any item word where there are two words. I also added minwidth=480 to the menu properties. I measured each item and got the following.

Code:

with(milonic=new menuname("Main Menu")){
style=styleTop;
top=311;
left="offset=-110";
screenposition="center";
alwaysvisible=1;
orientation="horizontal"; //vertical
itemheight=18;
minwidth=480;
aI("text=Home;url=http://mission.xtools.co.nz;itemwidth=48;status=Home Page;");aI("text=History;showmenu=history15;url=http://mission.xtools.co.nz/history/;itemwidth=52;status=History;");aI("text=Our&nbsp;Wine;showmenu=our_wine16;url=http://mission.xtools.co.nz/our_wine/;itemwidth=65;status=Our Wine;");aI("text=Restaurant;showmenu=restaurant17;url=http://mission.xtools.co.nz/restaurant/;itemwidth=71;status=Restaurant;");aI("text=Cellar&nbsp;Door;showmenu=cellar_door18;url=http://mission.xtools.co.nz/cellar_door/;itemwidth=73;status=Cellar&nbsp;Door;");aI("text=Concert;url=http://mission.xtools.co.nz/concert/;itemwidth=57;status=Concert;");aI("text=News;showmenu=news21;url=http://mission.xtools.co.nz/news/;itemwidth=48;status=News;");aI("text=Contact&nbsp;Us;showmenu=contact_us19;url=http://mission.xtools.co.nz/contact_us/;itemwidth=72;status=Contact Us;");}

Maybe this will take care of it since the items have a specified width and the menu has a minimum width set.

:oops:

I had to edit and change menuwidth to minwidth. That's a new property

Ruth

Poster: Ruth
Dated: Monday November 14 2005 - 18:29:10 GMT

Hello,

We need to ask you a question. Do you want the html links in that td to sit 'behind' the menu?

Ruth

Poster: John
Dated: Tuesday November 15 2005 - 14:02:17 GMT

Kat wrote:

The code to draw menus is a global include for several websites, so I can't change that to use the _data javascript you supplied.

That was simply the _data file location I used when trying to fix the problem. Wasn't expecting you to use it, I just forgot to change it back to yours.

Poster: Kat
Dated: Tuesday November 15 2005 - 21:39:13 GMT

Yes, the HTML links load behind the menu and are only used by search engines or browsers without Javascript. They should be in the same place on the screen as the Milonic so that when that loads, the change isn't noticeable.

I went to the test page you created but got the same shift in Safari, Mac IE and Mac FF

Thanks all for your efforts; the menu still works fine on the Mac browsers and I can live with the menu shift of a few pixels. I'm not going to spend any more time on this as I have other more pressing cross-browser issues to deal with!

Poster: Kat
Dated: Thursday November 17 2005 - 21:37:32 GMT

As a footnote to this thread, I've come up with a different solution to this problem. Another problem was highlighted when the client added/removed menu items, because the offset assumed a certain menu width.

By getting rid of padding and using non-breaking spaces at the front rather than the end, putting the HTML links in a table with width=554px and Milonic menuwidth=554px ... the menus line up. I still had an issue with Mac IE which centered the menu rather than aligning it to the left like all the other browsers, but I added a PHP browser detect to center align the HTML links for Mac IE. Code follows:

PHP Mac IE browser detect (note that Mac IE returned browser = "MacPPC" not "MacOSX" as FF and Safari did on my iBook):

$browser_array = get_browser(null,true);
$browser = $browser_array["browser"];
$platform = $browser_array["platform"];
if(strstr($browser,"IE") && strstr($platform,"Mac")) {
echo "<td align='center'>";
}else{
echo "<td>";
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mission Estate Winery - Mission Estate Winery home page</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">

body {
margin: 0;
}

td {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #000;
line-height: 1.4em;
}

a {
color: #94820A;
}

a:hover {
color: #666;
}

.nav {
height: 18px;
}

.nav a {
font-size: 11px;
color: #999966;
text-decoration: none;
white-space: nowrap;
}

.nav a:hover {
color: #fff;
}
.search form {
margin: 0px;
padding-left: 16px;
}

form #search {
background-color: #6C0024;
color: #fff;
border: 0px;
text-transform: uppercase;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
width: 50px;
}

form #phrase {
border: 1px solid #ccc;
width: 110px;
font-size: 10px;
}
</style>
</head>
<body>
<script language="JavaScript" src="http://mission.xtools.co.nz/scripts/menu_src.js" type="text/javascript">
</script><script language="JavaScript" type="text/javascript">
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=http://mission.xtools.co.nz/scripts/mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=http://mission.xtools.co.nz/scripts/mmenudom.js><\/scr"+"ipt>");
</script>
<script language="JavaScript" src="http://mission.xtools.co.nz/scripts/menu_def_test.js" type="text/javascript"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="119" align="center" bgcolor="#6C0024"><img src="http://mission.xtools.co.nz/images/templates/home_mission_logo.jpg" width="171" height="106" alt=""></td>
</tr>
<tr>
<td align="center" bgcolor="#FFF5E8">
<table style="WIDTH: 740px" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img height="187" alt="" hspace="0" src="http://mission.xtools.co.nz/images/templates/home_top1.jpg" width="129" border="0"></td>
<td width="1"></td>
<td><img height="187" alt="" hspace="0" src="http://mission.xtools.co.nz/images/templates/home_top2.jpg" width="481" border="0"></td>
<td width="1"></td>
<td><img height="187" alt="" hspace="0" src="http://mission.xtools.co.nz/images/templates/home_top3.jpg" width="128" border="0"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="29" align="center" bgcolor="#6C0024">
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="554" align="left">
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="nav">
<tr><td>      <a href="http://mission.xtools.co.nz/">Home</a>      <a href='http://mission.xtools.co.nz/history/' title='History'>History</a>      <a href='http://mission.xtools.co.nz/winery/' title='Winery'>Winery</a>      <a href='http://mission.xtools.co.nz/our_wine/' title='Our Wine'>Our Wine</a>      <a href='http://mission.xtools.co.nz/restaurant/' title='Restaurant'>Restaurant</a>      <a href='http://mission.xtools.co.nz/cellar_door/' title='Cellar Door'>Cellar Door</a>      <a href='http://mission.xtools.co.nz/concert/' title='Concert'>Concert</a>      <a href='http://mission.xtools.co.nz/news/' title='News'>News</a>      <a href='http://mission.xtools.co.nz/contact_us/' title='Contact Us'>Contact Us</a></td></tr>
</table>
</td>
<td width="186" class="search">
<form name="form1" method="get" action="http://mission.xtools.co.nz/search/index.htm" id="form1"><input name="phrase" type="text" id="phrase"> <input name="submit" type="submit" id="search" value="Search"></form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Milonic settings:

with(milonic=new menuname("Main Menu")){
style=styleTop;
top=311;
left="offset=-93";
screenposition="center";
alwaysvisible=1;
orientation="horizontal"; //vertical
itemheight="18px";
menuwidth="554px";

Industrial Strength JavaScript and DHTML Menus

Menu OK in PC browsers but shifts in Mac browsers