Wrong submenu positioning

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

Wrong submenu positioning

Poster: paeppi
Dated: Tuesday March 20 2007 - 5:35:22 GMT

Hi there,

I am using a modified "Plain Text Horizontal Style DHTML Menu Bar" example, Version 5.770.

When i put the <script>'s for the DHTML menu in a div, which has a style like "left: 100px; top: 100px; position: abolsute;", the submenus will be moved also exactly 100px too far to the right and the bottom.

When using > fixMozillaZIndex=false; < in menu_data.js, Firefox does also screw it up, otherwise Firefox will display the Submenus on the correct position, but no other browser will.

The problem is easy reproducable using your "Plain Text Horizontal Style DHTML Menu Bar"-example: Just replace the part where scripts are included with the following lines, and change fixMozillaZIndex to false in menu_data.js, if you want to see the wrong positioning in FF:

Code:

<div style="left:200px; top:150px; position: absolute;">
<!-- ***** This is the section of code you need to paste into your web pages ***** -->
<script type="text/javascript" src="milonic_src.js"></script>   
<script type="text/javascript" src="mmenudom.js"></script>
<!-- The next file contains your menu data, links and menu structure etc -->
<script type="text/javascript" src="menu_data.js"></script>   
<!-- **** JavaScript Menu HTML Code -->
</div>

The site I am using the modified example on is http://www.umweltinstitut.org/test1/startseite.html, but I think the modified example is just equivalent for understanding my problem and maybe solving it.

I've tried searching the board for this problem and a possible solution, but did not find any so far. :roll:

Regards,
paeppi

Poster: Ruth
Dated: Tuesday March 20 2007 - 19:12:01 GMT

Hi,

The problem has to do with putting the menu in a div that is in a div that is in a div etc. with different position settings absolute and relative. It's due to the fact that when you code in css like that, it ends up applying not only to the page divs but to any divs that are in the menu program.

I did find a solution, one that many who are using a layout similar to yours use, and that is to split off the 'header' area of your page and set the table so the menu itself goes into the table and not into nested divs.

Here is what I came up with and it seems to work fine. You'd want to test it in all browsers available to you, but FF and IE seem OK. I don't have mac system available.

Your menu data file would be the following

Code:

fixMozillaZIndex=false; //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;
_buildAfterLoad=true;



with(menuStyle=new mm_style()){
bordercolor="#FFFFFF";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="12px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#139FB4";
offcolor="#FFFFFF";
onbgcolor="#0F6BB0";
oncolor="#ffcc00";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=5;
pagebgcolor="#139fb4";
pagecolor="#ffcc00";
separatorcolor="#ffffff";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}

subStyle=new copyOf(menuStyle); 
subStyle.bordercolor="#FFFFFF";
subStyle.borderstyle="solid";
subStyle.borderwidth=1;
subStyle.separatorcolor="#2D729D";

/////
/////

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position='relative';
menuheight=26;
itemheight=26;
aI("image=linkskurve-24b.gif;type=header;separatorcolor=#ffffff;");
aI("fontsize=12px;text=Suchen;url=index.php?option=com_search&ps=Suche;offclass=menubordr;onclass=menubordr;");
aI("fontsize=12px;text=Newsletter;url=index.php?option=com_yanc&ps=Newsletter;offclass=menubordr;onclass=menubordr;");
aI("fontsize=12px;showmenu=Presse;text=Presse;offclass=menubordr;onclass=menubordr;");
aI("fontsize=12px;showmenu=Unterstuetzen;text=Unterstützen;offclass=menubordr;onclass=menubordr;");
aI("fontsize=12px;showmenu=Ueber;text=Über uns;offclass=menubordr;onclass=menubordr;");
aI("image=apfel-endeb.gif;url=http://umweltinstitut.org/test1/index.php?option=com_content&task=view&id=31&Itemid=45;");
}

with(milonic=new menuname("Presse")){
style=subStyle;
aI("text=2007;url=#;");
aI("text=2006;url=#;");
aI("text=2005;url=#;");
aI("text=2004;url=#;");
aI("text=2003;url=#;");
aI("text=2002;url=#;");
aI("text=2001;url=#;");
aI("text=2000;url=#;");
aI("text=1999;url=#;");
}

with(milonic=new menuname("Unterstuetzen")){
style=subStyle;
aI("text=Spende;url=#;");
aI("text=Fördermitglied werden;url=#;");
aI("text=Erbschaft;url=#;");
aI("text=Bußgelder;url=#;");
}


with(milonic=new menuname("Ueber")){
style=subStyle;
aI("text=Überblick;url=index.php?option=com_content&task=view&id=29&ps=Über%20uns;");
aI("showmenu=Taetigkeit;text=Tätigkeitsbericht;");
aI("text=Team;url=#;");
aI("text=Kontakt;url=#;");
aI("text=Impressum;url=#;");
aI("text=Dank an;url=#;");
aI("text=Neues;url=#;");
aI("text=Jobs/Praktikum;url=#;");
aI("text=Praktikumsbericht;url=#;");
aI("text=Infomaterial;url=#;");
aI("text=Links;url=#;");
}

with(milonic=new menuname("Taetigkeit")){
style=subStyle;
aI("text=Vorwort;url=#;");
aI("text=2006;url=#;");
aI("text=2005;url=#;");
aI("text=2004;url=#;");
aI("text=2003;url=#;");
aI("text=2002;url=#;");
aI("text=2001;url=#;");
aI("text=2000;url=#;");
aI("text=1999;url=#;");
}

drawMenus();

You'll note there is a buildAfterLoad=true; added at the top, that is because you are using the method to place the relative menu by calling all the files in the div/table.

Your page would be this. The only thing I did was to split off the 'header' area and make it it's own table not using divs in the cell that has the menu. The menu itself will now contain the beginning and ending images, while the flag is still in its own table cell. This is the top of the page, showing the top changes but including what is now existing at that left side main menu and that Startseite on the right. The two areas have just been separated out, but are the same visual layout.

Code:

<TABLE cellSpacing=0 cellPadding=0 width=900 border=0>
  <TR>
    <TD ROWSPAN=2 align="right" width=156><DIV id=header><A 
      href="http://umweltinstitut.org/test1/index.php?option=com_content&task=view&id=31&Itemid=45"><IMG 
      alt=Apfel src="Apfel.gif" border=0></A> </DIV></TD>
    <TD width=744><DIV id=top_outer>
      <DIV id=top_inner align=left>
      <DIV id=headline>Umweltinstitut München e.V.</DIV></TD>
  </TR>
  <TR>
    <TD valign='bottom'>
<!--Milonic DHTML Website Navigation Menu Version 5.0+ Copyright 2006 (c) Milonic Solutions Limited (UK). All Rights Reserved.    Please visit http://www.milonic.com/ for more information. -->
<table border=0 cellpadding=0 cellspacing=0 height=26>
<tr>
       <td width='68'> </td>
       <td><SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
      <SCRIPT src="mmenudom.js" type=text/javascript></SCRIPT>
      <SCRIPT src="test_data1.js" type=text/javascript></SCRIPT>
      <SCRIPT src="tooltips.js" type=text/javascript></SCRIPT></td>
       <td width='150'>
     <IMG ALT="change to english" SRC="flagge_und_bg.jpg" BORDER="0">
      </td>
      <tr>
       <td colspan=3 height=5> 
      </td>
</tr>
</table></TD>
  </TR>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=900 border=0>
 <TR>
 <TD><DIV id=left_outer>
   <DIV id=left_inner>
     <DIV id=left_inner_abschluss_outer>
       <DIV id=left_inner_abschluss_top_inner align=right>
         <IMG alt="" SRC="ma_top_right.gif">
       </DIV>
     </DIV>
     <DIV class=moduletable>
       <H3>
         Main Menu
       </H3>
       <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

Finally, in your css file add this code. This is the code to produce the border over the actual items in the middle of the menu and not have it over the beginning and ending items.

Code:

.menubordr{border-top:1px solid #ffffff;border-right:0px solid #ffffff;border-bottom:1px solid #ffffff;border-left:0px solid #ffffff;}

If you look at the menu_data file you'll see that this class is called in the 'middle' main menu items that need the border top and bottom. The only thing I couldn't do in the main menu was to keep the blue color separator, I had to go to white. The reason for this is that since the menu now has the curved beginning and the ending images it is not possible to use the border that surrounds the actual full 'menu' because you wouldn't want a border around that beginning or that ending image. This means using css since what you really need in this setup is a top and bottom border for each item, using css borders put borders around the items and not the 'menu' With that kind of border, having the separator blue in the main menu meant you had a white border top and bottom on the Suchen item, and then this 1px blue color that was the separator, then white border over and under the next item and then 1px blue separator.

This really isn't involved but the explanation takes longer than the fix

I'll be glad to put your page up for you to see if you need that.

Ruth
Ruth

Poster: paeppi
Dated: Tuesday March 20 2007 - 22:13:35 GMT

Hi Ruth,

thanks for your fast reply, I appreciate it very much!

Well, I tried uploading your menu_data.js, editing the template html to fit your proposition and adding the class in css, and .. the submenu positioning works just fine, but the left and right surrounding images which you linked into the menu_data.js now are displayed wrong.

I won't try to explain it in words but rather post you two screenshots:

Internet Explorer 7.0.5730.11 displays:

Firefox 2.0.0.2 displays:

I do realize that the html code with which the mmenu adds the image looks like this, thus I can't blame the menu directly for not adding border=0 attribute to the image or something.

Code:

<table class="milonictable" style="padding: 0px; line-height: normal;" id="MTbl0" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"><tbody><tr id="td0"><td id="_imgO0"><img style="display: block;" id="img0" src="linkskurve-24b.gif" border="0"></td></tr></tbody></table>

Then I remembered you told me the problem was that putting the menu in a <div>, which is in another <div> and so on, while not all <div>s have the same position-attribute.

I decided to take the older version of the site (without your changes) and now try making all positions of <div>s which are are parents/grandparents/... from the menu explicitly relative, which resulted in exactly the same behaviour as described in my first post. Again, Firefox will display the menus correct when setting fixMozillaZIndex=true, and so on..

I've also made a screenshot of this behaviour for the purpose of documentation, since the linked site is the copy I'm still working on and may change.

I now assume that the menu just has problems with nested <div>s. The only thing I might do at the moment would be setting the complete div-trace down to the menu to be absolute, which would unfortunately be a lot of work, as I would have to shift many divs to the right and bottom. (I looked at the site when just setting all positions absolute without adding any information, it looks horrible)

I'm quite helpless at the moment, and will continue with other work on the site, maybe I come up with a new plan after having a little rest on that subject.

paeppi

Poster: Ruth
Dated: Wednesday March 21 2007 - 3:05:30 GMT

Hi,

The problem with the border at the left side was due to the headerbgcolor="#ffffff"; in the menuStyle. I just changed that to headerbgcolor="transparent";

And the other problem with the images not matching is something in the css, but I was able to fix it by making that table height=24 and the itemheight in the menu also being set at 24, which you will see in the main menu in that test_data1.js file.

You'll have to test in other browsers.

Ruth

Poster: paeppi
Dated: Thursday March 22 2007 - 0:43:14 GMT

Hi Ruth,

please excuse my late answer. I've viewed and downloaded your example.

It works great, now also in IE7... I encountered some problems which I will explain later because I'm quite in a hurry now.

Well, then, one more time: Problem solved, Ruth, THANK YOU!!

paeppi

Poster: paeppi
Dated: Thursday March 22 2007 - 5:00:03 GMT

Hi,

I just wanted to tell about the 2 issues I still had to fix after uploading your solution. Both were directly linked to IE7, FF and Opera would display the page perfectly since your last changes.

First, I had to turn off the overfilter option, which executed the DXImageTransform shadows under the menus. When leaving it turned on, IE did not show the bottom part of the white border line.

And Second was that IE counts the padding of a <div> from the inner end of the <div>'s border, and FF and Opera from the outer end, so that you will have 1 padding pixel less in FF and Opera when using a border with 1 pixel width. The padding of 5 made IE display the menu-<div> too big, while padding 6 made it too big in all browsers, and padding 4 makes it the right size in all of them

And that's - hopefully - the very end of this story. Thanks again for your great help Ruth, feel free to email me if you visit Munich some day, and I will invite you to a bavarian breakfast with beer

paeppi

Industrial Strength JavaScript and DHTML Menus

Wrong submenu positioning