I.E. on the MAC not cooperating at all...

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
User avatar
code-frog
Super Advanced
Super Advanced
Posts: 35
Joined: Sun Apr 25, 2004 9:47 pm
Location: Boise, Idaho
Contact:

I.E. on the MAC not cooperating at all...

Post by code-frog »

If someone has a mac then go to:
http://crookham.code-frog-development.com

Else take a look at this and explain this to me cuz I'm perplexed as to why it works fine in:

Windows (Any Browser)
Mac (Safarie & Firefox)

But not Mac (IE)...{SIGH} It's always gotta be a Microsoft thing even on a Mac 8O ...

So the menu is supposed to be up in the oval rectangle and the dropdown should be *under* the menu.

Image


Thanks,

Rex[/img]
Windows XP SP1a all updates, Toshiba Satellite Pro 1955-S805; 1 Gig Ram; 2.53 Gig Processor
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

I don't have a Mac but I note you have put the menu in a table. You need to put it in differently than you have it coded. That is probably what is causing the problem in the Mac IE. Placing the menu in a table requires more than just putting in the calls for the files.
http://milonic.com/menusample9.php


Hope that helps. Yell back if that doesn't work.

Ruth
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

Hi Rex,

No mac here either, but I'm sure Ruth has nailed it. After reviewing the sample she pointed you to, you might also review the "mac faq," which explains why you're seeing what you're seeing. I think you'll also find another description of table-bound menus here.

Cheers,

Kevin
User avatar
code-frog
Super Advanced
Super Advanced
Posts: 35
Joined: Sun Apr 25, 2004 9:47 pm
Location: Boise, Idaho
Contact:

Post by code-frog »

Well something's not right. Now nothing works. I'm going over it carefully and I'd like to fix it on my own. However, someone with more experience might see it readily.

In a nutshell... HELP :P

Code: Select all

<HTML>
<HEAD>
<TITLE>Crookham Company -- Hybrid Sweet Corn, Popcorn. Onion and Carrot Seeds</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
body {
	background-image: url(images/background.gif);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-attachment: fixed;
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
body,td,th {
	font-size: 11px;
	color: #7F0400;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-color: #7F0400;
	line-height: 12px;
	font-weight: lighter;
	margin:0;
}

-->
</style>

</HEAD>
<BODY BGCOLOR=#FFFFFF onLoad="MM_preloadImages('images/HomeOn_04.gif','images/HomeOn_05.gif','images/HomeOn_06.gif','images/HomeOn_07.gif')">
		
		<script type="text/javascript" src="milonic_src.js"></script>	
		<script	type="text/javascript">
		<!-- 
		if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");		
		else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>"); 
		-->
		</script>
		<script type="text/javascript" src="menu_data.js"></script>	 
		
		<SCRIPT TYPE="text/javascript">
		 	_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
			_menuOpenDelay=100            // The time delay before menus open on mouse over
			_subOffsetTop=10              // Sub menu top offset
			_subOffsetLeft=-10            // Sub menu left offset
			
			with(menuStyle=new mm_style()){
			onbgcolor="#FFFFFF";
			oncolor="#7F0400";
			offbgcolor="#FFFFFF";
			offcolor="#7F0400";
			bordercolor="#FFFFFF";
			borderstyle="solid";
			borderwidth=1;
			separatorcolor="#FFFFFF";
			separatorsize="1";
			padding=5;
			fontsize="110%";
			fontstyle="normal";
			fontweight="bold";
			fontfamily="Verdana, Tahoma, Arial";
			pagecolor="black";
			pagebgcolor="#82B6D7";
			headercolor="#000000";
			headerbgcolor="#ffffff";
			subimage="arrow.gif";
			subimagepadding="2";
			overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#FFFFFF', Direction=135, Strength=5)";
			outfilter="randomdissolve(duration=0.3)";
			}
			
			with(subMenuStyle=new mm_style()){
			onbgcolor="#435607";
			oncolor="#ffffff";
			offbgcolor="#FFFFFF";
			offcolor="#7F0400";
			bordercolor="#FFFFFF";
			borderstyle="solid";
			borderwidth=1;
			separatorcolor="#FFFFFF";
			separatorsize="1";
			padding=3;
			fontsize="100%";
			fontstyle="normal";
			//fontweight="bold";
			fontfamily="Verdana, Tahoma, Arial";
			pagecolor="black";
			pagebgcolor="#82B6D7";
			headercolor="#000000";
			headerbgcolor="#ffffff";
			subimage="arrow.gif";
			subimagepadding="2";
			overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#FFFFFF', Direction=135, Strength=5)";
			outfilter="randomdissolve(duration=0.3)";
			}
			with(milonic=new menuname("Products")){
			style=subMenuStyle;
			overflow="scroll";
			itemwidth=85;
			aI("text=sweet corn;url=/product.html;image=images/" + useKernel + ";");
			aI("text=onions;url=/onion.html;image=images/" + useKernel + ";");
			aI("text=carrots;url=/carrot.html;image=images/" + useKernel + ";");
			aI("text=popcorn;url=/pop.html;image=images/" + useKernel + ";");
			aI("text=novelty;url=/novelty.html;image=images/" + useKernel + ";");
			aI("text=downloads;url=/download.html;image=images/" + useKernel + ";");
			}
			
			with(milonic=new menuname("Company")){
			style=subMenuStyle;
			itemwidth=101;
			aI("text=history;url=/about.html;image=images/" + useKernel + ";");
			aI("text=the region;url=/about_ID.html;image=images/" + useKernel + ";");
			aI("text=research;url=/about_RE.html;image=images/" + useKernel + ";");
			aI("text=production;url=/about_PR.html;image=images/" + useKernel + ";");
			}
			
			with(milonic=new menuname("Info")){
			style=subMenuStyle;
			itemwidth=104;
			aI("text=downloads;url=/general.html;image=images/" + useKernel + ";");
			aI("text=treatment;url=/general_tr.html;image=images/" + useKernel + ";");
			aI("text=food resumes;url=/general_fr.html;image=images/" + useKernel + ";");
			aI("text=links;url=/general_ln.html;image=images/" + useKernel + ";");
			}
			
			with(milonic=new menuname("News")){
			style=subMenuStyle;
			itemwidth=114;
			aI("text=new products;url=/news_np.html;image=images/" + useKernel + ";");
			aI("text=trials;url=/news.html;image=images/" + useKernel + ";");
			aI("text=events;url=/news_ev.html;image=images/" + useKernel + ";");
			}
			drawMenus();
		</SCRIPT>
<!-- ImageReady Slices (CC 800x600WebHome.ai) -->
<TABLE WIDTH=794 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=195 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=39 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=140 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=172 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=164 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=82 HEIGHT=1 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=2 rowspan="2" ALIGN=left VALIGN=top>
			<IMG SRC="images/Home_01.gif" WIDTH=234 HEIGHT=88 ALT=""></TD>
		<TD height="55" COLSPAN=4 ALIGN=left VALIGN=bottom><p><strong>A WHOLESALE COMPANY</strong><br>
Specialized Production and Breeding of Hybrid Sweet Corn, Popcorn, Onion and
  Carrot Seeds </p>
	  </TD>
	</TR>
	<TR>
	  <TD COLSPAN=4 ALIGN=left VALIGN=bottom><div align="right"><FORM ACTION="http://search.freefind.com/find.html" METHOD="GET" name="Search"  target="_self" id="Search">
<strong>SEARCH</strong>
<INPUT TYPE="HIDDEN" NAME="id" VALUE="17985582">
<INPUT TYPE="HIDDEN" NAME="pageid" VALUE="r">
<INPUT TYPE="HIDDEN" NAME="mode" VALUE="ALL">
<INPUT type="HIDDEN" name="n" value="0">
<INPUT TYPE="TEXT" NAME="query" SIZE="15"><small> 
 <INPUT NAME="submit" TYPE="image" src="images/searchbutton.gif" alt="Submit" align="right" width="27" height="27" border="0">
</small>
	  </FORM>
	  </div></TD>
  </TR>
	<TR>
	  <TD COLSPAN=6 ALIGN=left VALIGN=top><img src="images/tbbgrnd.gif" width="717" height="104">
            <SCRIPT TYPE="text/javascript">
				with(milonic=new menuname("Main Menu")){
				var platform = navigator.platform.substr(0,3);
				var getBrowser = navigator.appName;
				var uAgent = navigator.userAgent;
				var useKernel = "kernel";
				
				if(uAgent.indexOf("MSIE") > -1){
					useKernel="kernel_ie.gif";
					//top=135;
				}
				
				if(uAgent.indexOf("Mac") > -1){
					useKernel="kernel_ie.gif"; 
					//top=40;
				}
				
				if(uAgent.indexOf("Firefox") > -1){ 
					//top=117;
					useKernel="kernel_ff.gif";
				}
				
				if(uAgent.indexOf("Safari") > -1){
					//top = 102;
					useKernel="kernel_ff.gif";
				}
				
				style=menuStyle;
				//top=135;
				//left=45;
				alwaysvisible=1;
				orientation="horizontal";
				position="relative";
				aI("text=PRODUCTS;showmenu=Products;");
				aI("text=THE COMPANY;showmenu=Company;");
				aI("text=GENERAL INFO;showmenu=Info;");
				aI("text=NEWS & EVENTS;showmenu=News;");
				aI("text=SITE MAP;url=/menusample1.php;");
				aI("text=HOME;url=/menusample1.php;");
				}
				drawMenus();				
			</SCRIPT>
	   </TD>
	</TR>
	<TR>
		<TD ALIGN=left VALIGN=top>			<a href="product.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17','','images/HomeOn_04.gif',1)"><img src="images/Home_04.gif" alt="Products" name="Image17" width="195" height="281" border="0"></a></TD>
		<TD COLSPAN=2 ALIGN=left VALIGN=top>			<a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18','','images/HomeOn_05.gif',1)"><img src="images/Home_05.gif" alt="Company Information" name="Image18" width="179" height="281" border="0"></a></TD>
		<TD ALIGN=left VALIGN=top>			<a href="general.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','images/HomeOn_06.gif',1)"><img src="images/Home_06.gif" alt="General Information" name="Image19" width="172" height="281" border="0"></a></TD>
		<TD ALIGN=left VALIGN=top>			<a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/HomeOn_07.gif',1)"><img src="images/Home_07.gif" alt="News and Events" name="Image20" width="164" height="281" border="0"></a></TD>
		<TD>
			<IMG SRC="images/Home_08.gif" WIDTH=82 HEIGHT=281 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=6 ALIGN=left VALIGN=top>
			<IMG SRC="images/Home_09.gif" ALT="Footer" WIDTH=792 HEIGHT=20 hspace="0" vspace="0" border="0" usemap="#Map"></TD>
	</TR>
	<TR>
		<TD COLSPAN=6 ALIGN=left VALIGN=top>			<img src="images/Home_10.gif" width=792 height=196 alt=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=6>
			<IMG SRC="images/Home_11.gif" WIDTH=792 HEIGHT=77 ALT=""></TD>
	</TR>
</TABLE>
<!-- End ImageReady Slices -->
<map name="Map">
  <area shape="rect" coords="498,2,588,12" href="mailto:ccinfo@crookham.com">
</map>
</BODY>
</HTML>
Windows XP SP1a all updates, Toshiba Satellite Pro 1955-S805; 1 Gig Ram; 2.53 Gig Processor
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

You seem to be calling the menu_data.js file, which is correct, but you also seem to have put all the information from that file into script tags right after the call. I just got rid of that and the menu shows up, but again, I don't have a MAC, 0S win98, IE5.5 here

Ruth
User avatar
code-frog
Super Advanced
Super Advanced
Posts: 35
Joined: Sun Apr 25, 2004 9:47 pm
Location: Boise, Idaho
Contact:

Post by code-frog »

Windows XP here. If I go ahead and <!-- ... menu_data.js --> then refresh I still don't see the menu in the right place (Should be up the page in the oval rectangle (see http://www.crookham.com) and there should be drop down menus. You are not seeing that are you? For all I do I'm not seeing any of that...

- Rex
Windows XP SP1a all updates, Toshiba Satellite Pro 1955-S805; 1 Gig Ram; 2.53 Gig Processor
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

Hi Rex,

I see that you're still loading menu_data.js, even though it seems like all of your menu code (at least what you're using for your test) is embedded in the html file. I don't know what's in your menu_data.js file, so it's hard to know if something there is causing any problem. Can you post it?

Your embedded submenu definitions build the image property by adding the value of userKernel into the aI() string. useKernel does not yet exist when the submenus are build, since you have it declared and assigned further down, in the menu code that's still in the table.

I can't speak from experience with Macs (I avoid them), but it seems that IE/Mac is very particular and will crap out at the least opportunity. I would suggest minimizing the amount of code that you have embedded in the table cell. Specifically, I'd get rid of the following:

Code: Select all

            var platform = navigator.platform.substr(0,3); 
            var getBrowser = navigator.appName; 
            var uAgent = navigator.userAgent; 
            var useKernel = "kernel"; 
             
            if(uAgent.indexOf("MSIE") > -1){ 
               useKernel="kernel_ie.gif"; 
               //top=135; 
            }
             
            if(uAgent.indexOf("Mac") > -1){ 
               useKernel="kernel_ie.gif"; 
               //top=40; 
            } 
             
            if(uAgent.indexOf("Firefox") > -1){ 
               //top=117; 
               useKernel="kernel_ff.gif"; 
            } 
             
            if(uAgent.indexOf("Safari") > -1){ 
               //top = 102; 
               useKernel="kernel_ff.gif"; 
            } 
(per the earlier comment, it seems as if that code will now be needed earlier in the process anyway). Your main menu in the table should be nothing but main menu:

Code: Select all

            with(milonic=new menuname("Main Menu")){
            style=menuStyle;
            alwaysvisible=1;
            orientation="horizontal";
            position="relative";
            aI("text=PRODUCTS;showmenu=Products;");
            aI("text=THE COMPANY;showmenu=Company;");
            aI("text=GENERAL INFO;showmenu=Info;");
            aI("text=NEWS & EVENTS;showmenu=News;");
            aI("text=SITE MAP;url=/menusample1.php;");
            aI("text=HOME;url=/menusample1.php;");
            }
            drawMenus();
Hope that helps,

Kevin
User avatar
code-frog
Super Advanced
Super Advanced
Posts: 35
Joined: Sun Apr 25, 2004 9:47 pm
Location: Boise, Idaho
Contact:

Post by code-frog »

Okay, the menus work again but they are now not in the right spot on Windows or the mac. :D

menu_data.js = fully commented file /* */

For some reason it's sticking it over the top of the photos....

http://crookham.code-frog-development.com
Windows XP SP1a all updates, Toshiba Satellite Pro 1955-S805; 1 Gig Ram; 2.53 Gig Processor
User avatar
code-frog
Super Advanced
Super Advanced
Posts: 35
Joined: Sun Apr 25, 2004 9:47 pm
Location: Boise, Idaho
Contact:

The red rectangle is correct...

Post by code-frog »

Here's the TD block and the tbbgrnd.gif is the red rectangle and it's in the right spot. However the menu is below it. Which if I think about it that kind of makes sense as it's about the height of the tbbgrnd.gif. How can I move the menu up over the top where it should be?

Code: Select all

	  <TD COLSPAN=6 ALIGN=left VALIGN=top><img src="images/tbbgrnd.gif" width="717" height="104">
            <SCRIPT TYPE="text/javascript">
				with(milonic=new menuname("Main Menu")){
				
				if(uAgent.indexOf("MSIE") > -1){
					top=135;
				}
				
				if(uAgent.indexOf("Mac") > -1){
					top=40;
				}
				
				if(uAgent.indexOf("Firefox") > -1){ 
					top=117;
				}
				
				if(uAgent.indexOf("Safari") > -1){
					top = 102;
				}
				
				style=menuStyle;
				//top=135;
				left=45;
				alwaysvisible=1;
				orientation="horizontal";
				position="relative";
				aI("text=PRODUCTS;showmenu=Products;");
				aI("text=THE COMPANY;showmenu=Company;");
				aI("text=GENERAL INFO;showmenu=Info;");
				aI("text=NEWS & EVENTS;showmenu=News;");
				aI("text=SITE MAP;url=/menusample1.php;");
				aI("text=HOME;url=/menusample1.php;");
				}
				drawMenus();				
			  </SCRIPT>
	   </TD>
Windows XP SP1a all updates, Toshiba Satellite Pro 1955-S805; 1 Gig Ram; 2.53 Gig Processor
User avatar
code-frog
Super Advanced
Super Advanced
Posts: 35
Joined: Sun Apr 25, 2004 9:47 pm
Location: Boise, Idaho
Contact:

Post by code-frog »

kevin3442 wrote:Hi Rex,

I see that you're still loading menu_data.js, even though it seems like all of your menu code -- FIXED

Your embedded submenu definitions build the image property by adding the value of userKernel into the aI() string. useKernel does not yet exist when the submenus are build, since you have it declared and assigned further down, in the menu code that's still in the table. -- FIXED

Code: Select all

            with(milonic=new menuname("Main Menu")){
            style=menuStyle;
            alwaysvisible=1;
            orientation="horizontal";
            position="relative";
            aI("text=PRODUCTS;showmenu=Products;");
            aI("text=THE COMPANY;showmenu=Company;");
            aI("text=GENERAL INFO;showmenu=Info;");
            aI("text=NEWS & EVENTS;showmenu=News;");
            aI("text=SITE MAP;url=/menusample1.php;");
            aI("text=HOME;url=/menusample1.php;");
            }
            drawMenus();
Hope that helps,

Kevin
Tried the above removed all the navigator. calls and still not in right position. But the menu now works.
Windows XP SP1a all updates, Toshiba Satellite Pro 1955-S805; 1 Gig Ram; 2.53 Gig Processor
User avatar
code-frog
Super Advanced
Super Advanced
Posts: 35
Joined: Sun Apr 25, 2004 9:47 pm
Location: Boise, Idaho
Contact:

Post by code-frog »

But then it might seem rather humorous now. I've just been schooled harshly by my own blindness. I have now put all the code back the way it was. Removed the menudata.js call from the table and placed it up in the body and well...

See you guys the next time I need help catching myself being stupid.

- Rex 8O :roll: :D
Windows XP SP1a all updates, Toshiba Satellite Pro 1955-S805; 1 Gig Ram; 2.53 Gig Processor
User avatar
code-frog
Super Advanced
Super Advanced
Posts: 35
Joined: Sun Apr 25, 2004 9:47 pm
Location: Boise, Idaho
Contact:

Post by code-frog »

Is it me or is that one busy main page? I didn't design this site at all. But it got dumped on me to fix... {SIGH}

Oh well good opportunity to get better in the web coding I suppose. :lol:
Windows XP SP1a all updates, Toshiba Satellite Pro 1955-S805; 1 Gig Ram; 2.53 Gig Processor
Post Reply