Submenu Offsets in IE7

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

Submenu Offsets in IE7

Poster: dlbrix
Dated: Sunday January 27 2008 - 21:15:47 GMT

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:

<!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">  __at__ import"c/ie7andlater.css";</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css" media="all">  __at__ 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:

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

Re: Submenu Offsets in IE7

Poster: Ruth
Dated: Wednesday January 30 2008 - 1:26:18 GMT

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://www.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

Re: Submenu Offsets in IE7

Poster: dlbrix
Dated: Wednesday January 30 2008 - 6:43:02 GMT

Thanks Ruth!

I actually did just that and here is what they replied...

Quote:

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://www.milonic.com/support/getuserfile.php?id=970&hash=0d0248e0529f3e900be97c6c0517b09b

I will try to implement this tomorrow and see if it resolves the issue...

Thanks again for your great work!

Regards,

David Brix

Re: Submenu Offsets in IE7

Poster: Ruth
Dated: Wednesday January 30 2008 - 6:51:30 GMT

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

Industrial Strength JavaScript and DHTML Menus

Submenu Offsets in IE7

Re: Submenu Offsets in IE7

Re: Submenu Offsets in IE7

Re: Submenu Offsets in IE7