Submenu Offsets in IE7

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
dlbrix
Beginner
Beginner
Posts: 6
Joined: Tue Jan 20, 2004 8:39 pm
Location: Oakland, CA
Contact:

Submenu Offsets in IE7

Post by dlbrix »

Hello all!

I am using the Milonic DHTML Menu V5.788 and have constructed a beautiful image based (Client required it) menu backed up with a list based no script menu for the folks with Javascript disabled (and spiders). Everything looks great on the Mac (FF 2.0.0.11, Safari 3.0.4, Netscape 7.2), as well as on my XP box in Firefox (2.0.0.11).

Unfortunately when it comes to IE7 on the XP box the submenu offsets that I set for the submenus are not functioning (Surprise Surprise Surprise!). Why this is for the life of me I can not figure out, and as IE7 is perhaps the most used browser out there, IT NEEDS TO LOOK RIGHT! (As it does in Firefox, Mozilla, Safari, Netscape)

Can any one help me out of my misery?

I should mention that the main menu has been placed inside a div, all according to the instructions on the Milonic site for placing menus relative to tables. My assumption here is that I can place the menu into a div the same as for a table.

Many Thanks in Advance

You can check the menu at http://www.sozostudio.com/dev/

Here is the Page Code;

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>SozoStudio | Welcome</title>
<!--[if gt IE 6]>
<style type="text/css" media="all"> @import"c/ie7andlater.css";</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css" media="all"> @import"c/ie6andearlier.css";</style>
<![endif]-->
<link href="css/sozoMain.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
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];}}
}
//-->
</script>
</head>
<body>
<script type="text/javascript" src="milonic_src.js"></script>
<script type="text/javascript" src="mmenudom.js"></script>
<script type="text/javascript" src="menu_data.js"></script>
<div class="hide" id="skipMenu"><a href="#content" title="Skip to Main Content." accesskey="2">Skip
		to Main Content</a>.</div>
<div id="wrapper">
	<div id="header">
		<h1>SozoStudio</h1>
		<a href="index.html"><img src="images/SozoLogo.jpg" alt="SozoStudio" id="SozoLogo" /></a>
		<div id="Nav" onfocus="MM_preloadImages('images/nav/humanDimen-o.gif','images/nav/humanDimen.gif','images/nav/innovation-o.gif','images/nav/innovation.gif','images/nav/knowHow-o.gif','images/nav/knowHow.gif','images/nav/contact-o.gif','images/nav/contact.gif','images/nav/designers-o.gif','images/nav/designers.gif','images/nav/home-o.gif','images/nav/home.gif','images/nav/innovAndKnowHow-o.gif','images/nav/innovAndKnowHow.gif','images/nav/kitchenArch-o.gif','images/nav/kitchenArch.gif','images/nav/qualIngredients-o.gif','images/nav/qualIngredients.gif','images/nav/gregDeMeza-o.gif','images/nav/gregDeMeza.gif')">
			<script>
		with(milonic=new menuname("Main Menu")){
			style=AllImagesStyle;
			alwaysvisible=1;
			orientation="horizontal";
			position="relative";
			aI("image=images/nav/home.gif;overimage=images/nav/home-o.gif;url=index.html;");
			aI("image=images/nav/designers.gif;overimage=images/nav/designers-o.gif;showmenu=designers;");
			aI("image=images/nav/innovAndKnowHow.gif;overimage=images/nav/innovAndKnowHow-o.gif;showmenu=IAKH;");
			aI("image=images/nav/kitchenArch.gif;overimage=images/nav/kitchenArch-o.gif;showmenu=kitchArch;");
			aI("image=images/nav/contact.gif;overimage=images/nav/contact-o.gif;url=contact.html;");
			}
			
		
			drawMenus();
			</script>
			<noscript>
<ul id="noScriptNav">
	<li class="toplevel"><a href="index.html">Home</a></li>
	<li class="toplevel">Designers
		<ul>
		<li><a href="pages/gregDeMeza.html">Greg De Meza</a></li>
		</ul>
	</li>
	<li class="toplevel">Innovation + Know How
		<ul>
			<li><a href="pages/innovation.html">Innovation</a></li>
			<li><a href="pages/knowHow.html">Know How</a></li>
			<li><a href="pages/ingredients.html">Quality Ingredients</a></li>
			<li><a href="pages/dimension.html">The Human Dimension</a></li>
		</ul>	
	</li>
	<li class="toplevel">Kitchen Architecture
		<ul>
			<li><a href="pages/spKitchen.html">Space Kitchen</a></li>
			<li><a href="pages/collab.html">Collaboration</a></li>
			<li><a href="pages/recipes.html">Recipes</a></li>
		</ul>	
	</li>
	<li class="toplevel"><a href="pages/contact.html">Contact</a></li>
</ul>
</noscript>

		</div>
		<!-- End of div id= Nav -->
	</div>
	<!-- End of div id= header -->
	<!--<div id="main_nav">
		<ul class="level1">
			<li id="home"><a href="08-index.html">Home</a></li>
			<li id="gals" class="submenu"><a href="08-pages/gals.html" title="Here you will find portfolio galleries of my best work.">Galleries</a>
				<ul class="level2" id="galSub">
					<li id="commIllust"><a href="08-pages/commIllust.html" title="Here you will find samples of my Commercial Illustration work.">Commercial
							Illustration</a></li>
					<li id="archIllust"><a href="08-pages/archIllust.html" title="Here you will find samples of my Architectural Illustration work.">Architectural
							Illustration</a></li>
					<li id="jazzArt"><a href="08-pages/jazzArt.html" title="Here you will find samples of my Jazz artwork.">Jazz
							Art</a></li>
					<li id="popArt"><a href="08-pages/popArt.html"title="Here you will find samples of my Pop artwork.">Pop
							Art</a></li>
					<li id="abstractArt"><a href="08-pages/abstArt.html" title="Here you will find samples of my Abstract artwork">Abstract
							Art</a></li>
				</ul>
			</li>
			<li id="repros" class="submenu"><a href="08-pages/repros.html" title="Here you will find galleries of my work that you can purchase to hang on your walls.">Reproductions</a>
				<ul class="level2" id="reproSub">
					<li id="gicleePrints"><a href="08-pages/gPrints.html" title="Here you will find fine art Giclee prints of my work for sale."> Giclee
							Prints</a></li>
					<li id="smallPrints"><a href="08-pages/sPrints.html" title="Here you will find small prints of my work for sale.">Small
							Prints</a></li>
				</ul>
			</li>
			<li id="blog"><a href="08-pages/blog/blog.html" title="Check out my Blog and learn about my World...">Blog</a></li>
			<li id="tests"><a href="08-pages/tests.html" title="See what some of my clients have had to say about my work">Testimonials</a></li>
			<li id="about"><a href="08-pages/about.html" title="Her you can find out more about me, Rich Sigberman">About/Contact</a></li>
			<li id="links"><a href="08-pages/links.html" title="Here are some links that I think you'll find useful or interesting.">Links</a></li>
		</ul>
	</div>-->
	<!-- End of div id= main nav -->
	<div id="contentWrap"> <img src="images/hpMainImg.jpg" alt="" width="598" height="267" id="mainImg" title="" /> <img src="images/hpMainQuote.jpg" width="598" height="52" alt="" title="" id="mainQuote" />
		<div id="content"> <img src="images/hpSideQuote.jpg" alt="Home Page Side Quote" longdesc="pages/Page Quotes/hpQuote.html" id="sideQuote" />
			<div id="rightCol">
				<p>These are the factors we considered at SOZO Studio when we decided to
					take a fresh look at the modern kitchen. We started by clearing our minds
					of as many traditional design conventions and constraints as possible.
					We met with a broad range of people, <br />
					from professional chefs to microwave-dinner enthusiasts,
					and we researched current market offerings. We culled everything into a <br />
					list of criteria for the New Kitchen.</p>
				<p>&nbsp; </p>
				<p>Then we gave our list to an architect known for his <span class="emphasis">modern
						design</span> aesthetic, <span class="emphasis">experience</span> with
						materials and construction expertise.</p>
			</div>
			<br class="clear" />
		</div>
		<!--  End of div id= content-->
	</div>
	<!-- End of div id= contentWrap -->
	<div id="footer">
		<p>&nbsp;</p>
	</div>
	<!-- End of div id=footer-->
</div>
<!--/*End of div id= Wrapper*/-->
</body>
</html>
Here is the Menu_Data.js File:

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=50;
_subOffsetTop=15;
_subOffsetLeft=0;




with(AllImagesStyle=new mm_style()){
styleid=1;
fontstyle="normal";
fontweight="normal";
padding=3;
separatorcolor="#333333";
separatorsize=1;
}

with(menuStyle=new mm_style()){
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);";
padding=5;
}


with(milonic=new menuname("designers")){
orientation="horizontal";
style=menuStyle;
aI("image=images/nav/gregDeMeza.gif;overimage=images/nav/gregDeMeza-o.gif;url=pages/gregDeMeza.html;");
}

with(milonic=new menuname("IAKH")){
orientation="horizontal";
left="offset=-120";
style=menuStyle;
aI("image=images/nav/innovation.gif;overimage=images/nav/innovation-o.gif;url=pages/innovation.html;");
aI("image=images/nav/knowHow.gif;overimage=images/nav/knowHow-o.gif;url=pages/knowHow.html;");
aI("image=images/nav/qualIngredients.gif;overimage=images/nav/qualIngredients-o.gif;url=pages/ingredients.html;");
aI("image=images/nav/humanDimen.gif;overimage=images/nav/humanDimen-o.gif;url=pages/dimension.html;");
}

with(milonic=new menuname("kitchArch")){
orientation="horizontal";
left="offset=-108";
style=menuStyle;
aI("image=images/nav/spaceKitchen.gif;overimage=images/nav/spaceKitchen-o.gif;url=pages/spKitchen.html;");
aI("image=images/nav/collaboration.gif;overimage=images/nav/collaboration-o.gif;url=pages/collab.html;");
aI("image=images/nav/recipes.gif;overimage=images/nav/recipes-o.gif;url=pages/recipes.html;");
}
			

drawMenus();
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: Submenu Offsets in IE7

Post by Ruth »

Hi,

I've been trying to work on this. I don't have IE7 so am not sure just exactly what the problem is, but I think it is going to have to do with all the position='relative'; and the margin and padding codes in the nested divs. The menu is placed correctly, that is not the issue. Since I do not have IE 7 and you have a professional license, I suggest you fill out a support request here
http://milonic.com/support/ You need to be logged in under the name registered when you purchased and downloaded. They are pretty quick on the support.

I'm sorry I couldn't help more.

Ruth
dlbrix
Beginner
Beginner
Posts: 6
Joined: Tue Jan 20, 2004 8:39 pm
Location: Oakland, CA
Contact:

Re: Submenu Offsets in IE7

Post by dlbrix »

Thanks Ruth!

I actually did just that and here is what they replied...
From: Andy
Message ID: support7051
Date: Tue Jan 29 2008
Time: 18:43:56
Subject: Re: Several Issues needing to be resolved to finish site by 1/30
Message: Hi David,

Sorry for the delay in responding, we are having more than our fair share of issues of late.

Anyway, I think the problem with the offsets is CSS based. As I'm sure you are aware IE renders CSS in a completelty different way to all other browsers and this can affect the way certain objects are declared.

What I sugguest is to center the sub menus using the screenposition property and then offset them based on a centered position.

**
Please Note: I just tested it before I was about to send this message and discovered that screenposition was not doing the thing it is supposed to do. I then found a bug in the code which I have now fixed in version 5.789 that you can now download from our website. You just need to update the files milonic_src.js and mmenudom.js
**

Attached is a copy of your menu_data that should demonstrate the use of screenposition with offsets.

Please let me know if there is anything else we can help you with.

Hope this helps
Milonic Support

File: menu_data.js >> http://milonic.com/support/getuserf ... 6c0517b09b
I will try to implement this tomorrow and see if it resolves the issue...

Thanks again for your great work!

Regards,

David Brix
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: Submenu Offsets in IE7

Post by Ruth »

Hi,

Glad you got the solution. One thing to note, that I have found over the years I've worked on solutions for relative positioned menus and different positions in the browsers. Most of the problems result usually when they are in divs that are nested and positioned relatively. As Andy noted, IE is usually the different one. I have found that when possible, if the menu area is set outside the divs in a table, that usually fixes most of the offset issues in IE. I realize that with some layouts that is not possible, but when it is possible, it's a quick easy fix.

Ruth
Post Reply