Menu display problems in IE

dillybar1 · Post by **dillybar1** » Fri Apr 28, 2006 7:18 pm

I'm working on a site and having problems with the menus positioning properly in IE, everything works fine in Firefox. The site is at http://www.soundgate.com/new/ .

The issue only happens on the homepage, the inner flashless pages, such as http://www.soundgate.com/new/index.php? ... news.index , have no problems.

I've determined the problem is because the menu code is in a div that is positioned absolutely, which was necessary to have the menus float over the flash animation. This also causes the menus to display way too far to the right (see screenshot at http://soundgate.com/new/screen.jpg ). I've attempted to hack in a fix by detecting the browser and subtracting 250px from the _subOffsetLeft for IE, but that didn't work well because the problem varies with the size of the browser window (it's much more pronounced in larger screen resolutions). My next attempt will be to reduce the _subOffsetLeft by a percentage of the window size, but I really don't like ugly hacks like that so i'm hoping there's a more legitimate fix for this.

Another problem that was reported is on a mac the search box disappears when the menus open, although I can't test it because I don't have a mac. The search box is also positioned over the flash, i'm wondering if milonic is hiding this layer because it mistakenly thinks it owns it.

Additionally the links in the flash animation are not clickable in IE, i'm assuming milonic has some hidden layers sitting over the links, and IE won't let the user click through a hidden layer, firefox doesn't have this problem.

Any suggestions would be appreciated, just getting this far has been a huge pain in the rear.

vikenk · Post by **vikenk** » Fri Apr 28, 2006 8:35 pm

Hi,

The menu traditionally doesn't like to be in a DIV. The menu should generally be positioned in a table. I have successfully used the menu in DIV's before, but DIV support is different from broweser to browser. That's why the menu is better off in a table.

I notice that you have only used a Partial DOCTYPE statement. Try using the full DOCTYPE. A partial DOCTYPE means that IE will still be in Quirks Mode and DIV's (and the box model) will not be displayed properly. Use this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Use it all on one line. See if that makes a difference and let us know.

Migru · Post by **Migru** » Mon May 01, 2006 10:50 am

Hi

This means that the menu can now be installed inside tables and divs without having to revert to our other technique

did you try using buildAfterLoad as this is now supported (new feature, please see and read
http://milonic.com/menuvinfo.php, prerelease 5.747 )

Michael

kercheval · Post by **kercheval** » Wed May 03, 2006 5:32 am

I have also seen this problem. I have tried the buildAfterLoad=true; global property without affect. My menus are embedded in a table within an absolutely positioned div.

Interestingly the onborder is rendering at the offset location as well as the submenu.

Using Version 5.746

Milonic Account Id: 164737 Worldwide license.

Migru · Post by **Migru** » Wed May 03, 2006 6:24 am

Hope you´re aware that buildAfterLoad needs the prerelease xx47.
M.

kercheval · Post by **kercheval** » Wed May 03, 2006 5:40 pm

Yes, thanks for the suggestion, but the 747 build makes no discernable difference in behavior.

Additionally the behavior is extremely consistent across browsers (IE and Firefox).

The only time I can see a change in behavior is when the variable fixMozillaZIndex is set to true. In that case, the submenu in Firefox shows correctly but the onBorder and mouse cursor changes still occur at the offset displayed when fixMozillaZIndex is set to false. This variable has no effect on IE layout.

This is a real problem since nearly every menu in our product (really in ALL of our products) are positioned in exactly this way. Most of the newer CSS system layouts that I am aware of also utilize absolute positioned divs to do primary layout to avoid framesets and most of them that have any complexity in forms layout utilize tables within those divs and thus must use a relative positioned menu to accomplish the task.

A fairly critical bug for us.

Any suggestions on work around or other global variables which may help?

I will try to come up with a trivial example I can post.

jbk

kercheval · Post by **kercheval** » Wed May 03, 2006 5:55 pm

Here is a good example (HTML and data file). Found using 746 and 747.

HTML First

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--
* Copyright (c) 1999-2006 Empirix, Inc.
* 20 Crosby Drive, Bedford, MA 01730, U.S.A.
* All rights reserved.
* www.empirix.com
-->
<html>

<head>
   <style type="text/css">
#bannerRoles {
	position: absolute; 
	top: 3px;
	left: 210px;
	height: 75px;
	font-size: .75em;
}

#bannerRoles .label{
	width: 1%;
	background-color: #ffffff;
	color: #3c3c3c;
	font-weight: bold;
	white-space: nowrap;
}

   </style>
</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_dropdownselect.js"></script>

<script type="text/javascript"><!--
	with(groupsMenuOptions=new menuname("Groups Options")) {
		style=menuStyleDropdownSelectElements;
		overflow="scroll";
		aI("text=Default;url=javascript:selectUserGroup('1');");
	}

	with(rolesMenuOptions=new menuname("Roles Options")){
		style=menuStyleDropdownSelectElements;
		overflow="scroll";
		aI("text=Administrator;url=javascript:selectRole('3');");
		aI("text=Analyst;url=javascript:selectRole('2');");
		aI("text=Business;url=javascript:selectRole('1');");
		aI("text=Operator;url=javascript:selectRole('4');");
	}

// --></script>
<div id="bannerRoles">
<table cellspacing="0" cellpadding="0">
 <tr>
   <td class="label">
     User Group: 
   </td>
   <td>
<script type="text/javascript"><!--
	with(groupsMenu=new menuname("Groups")){
		alwaysvisible=1;
		orientation="horizontal";
		position="relative";
		style=menuStyleDropdownSelect;
		aI("text=Default;showmenu=Groups Options;openonclick=1;");
	}
	drawMenus();
// --></script>
   </td>

   <td>
      &nbsp;&nbsp;&nbsp;
   </td>
   <td class="label">

     Role: 
   </td>
   <td>
<script type="text/javascript"><!--
	with(rolesMenu=new menuname("Roles")){
		alwaysvisible=1;
		orientation="horizontal";
		position="relative";
		style=menuStyleDropdownSelect;
		aI("text=Administrator;showmenu=Roles Options;openonclick=1;");
	}
	drawMenus();
// --></script>
   </td>

   <td style="width: 100%">
      &nbsp;
   </td>
   </tr>

 </table>
</div>
<script type="text/javascript"><!--
   function selectUserGroup(id) {
	   updateServerContext(id, 3);
   }
   function selectRole(id) {
	   updateServerContext(1, id);
   }
   function updateServerContext(id_ug, id_r) {
   }
// --></script>


</body>
</html>

And the data 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=150;
_subOffsetTop=2;
_subOffsetLeft=-2;
buildAfterLoad=true;

function changeParentText()
{
	_i=getParentItemByItem(_itemRef);
	_mi[_i][1]=_mi[_itemRef][1];

	_item=gmobj("el"+_i);
	_item.innerHTML=BDMenu(_mi[_i][0]);
	itemOn(_i);

	menuDisplay(_mi[_itemRef][0], 0); 
}

with(menuStyleDropdownSelect=new mm_style()){
	bordercolor="#cacaca";
	borderstyle="solid";
	borderwidth=0;
	onborder="1px solid #cacaca";
	clickfunction="";
	closeonclick="true";
	fontfamily="Verdana, Tahoma, Arial";
	fontsize="100%";
	fontstyle="normal";
	headerbgcolor="#ffffff";
	headercolor="#000000";
	offbgcolor="#ffffff";
	offcolor="#3c3c3c";
	onbgcolor="#ffffff";
	oncolor="#3c3c3c";
	padding=3;
	pagebgcolor="#82B6D7";
	pagecolor="black";
	separatorcolor="#2D729D";
	separatorsize=1;
	subimage="images/menuArrowDown.gif";
	subimagepadding=2;
}

with(menuStyleDropdownSelectElements=new mm_style()){
	bordercolor="#cacaca";
	borderstyle="solid";
	borderwidth=1;
	clickfunction="changeParentText();";
	fontfamily="Verdana, Tahoma, Arial";
	fontsize="100%";
	fontstyle="normal";
	headerbgcolor="#ffffff";
	headercolor="#000000";
	offbgcolor="#ffffff";
	offcolor="#3c3c3c";
	onbgcolor="#ffffff";
	oncolor="#3c3c3c";
	padding=2;
	pagebgcolor="#82B6D7";
	pagecolor="black";
	separatorcolor="#2D729D";
	separatorsize=0;
}

This will not show the subimage referenced in the styles (of course).

Any suggestions would be appreciated.

jbk

kercheval · Post by **kercheval** » Thu May 04, 2006 6:11 pm

I have posted a trouble ticket for this issue. If it does not result in a bug fix or patch release, then I will post back the issue resolution I receive.

Thanks.

jbk

kercheval · Post by **kercheval** » Wed May 10, 2006 12:06 am

There is no resolution as of yet. I was forced to modify the layout to use absolute positioning.

This is a relatively strong limitation for relative positioning at this time.

kercheval · Post by **kercheval** » Wed May 10, 2006 4:37 pm

I spent some time experimenting here.

Although an absolutely positioned div will show this problem in a hurry, you CAN use a relative positioned Milonic menu within an absolutely positioned table.

The table can cause a few layout hassles, but in the majority of cases (that I have been dealing with) direct replacement of a div tag with the table/tr/td combination and using the same CSS positioning will do exactly what is needed.

This is also the best method I have found to use the menu in a right aligned situation (keeping the menus relative to the right margin of the page).

I hope this helps until Andy can work through the cascade issues that absolutely positioned div sections present.

jbk

Migru · Post by **Migru** » Wed May 10, 2006 6:22 pm

Hi

could you please forward a simple sample html file including the menu code,
a url will do it too.

Michael

kercheval · Post by **kercheval** » Wed May 10, 2006 7:08 pm

Certainly. You will need to supply the dropdown arrow in this example, but this shows the absolutely positioned table using a relative milonic menu 50 pixels off of the top of the page and on the right.

I have modified the standard dropdown logic a bit to ensure that on selection the dropdown submenu goes away (more standard behavior). All of this is using 5.747 release.

The milonic style data is

Code: Select all

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;

function changeParentText()
{
	_i=getParentItemByItem(_itemRef);
	_mi[_i][1]=_mi[_itemRef][1];

	_item=gmobj("el"+_i);
	_item.innerHTML=BDMenu(_mi[_i][0]);
	itemOn(_i);

	menuDisplay(_mi[_itemRef][0], 0); 
}

with(menuStyleDropdownSelectLight=new mm_style()){
	bordercolor="#cacaca";
	borderstyle="solid";
	borderwidth=0;
	onborder="1px solid #cacaca";
	clickfunction="";
	closeonclick="true";
	fontfamily="Verdana, Tahoma, Arial";
	fontsize="75%";
	fontstyle="normal";
	headerbgcolor="#ffffff";
	headercolor="#aeaeae";
	offbgcolor="#ffffff";
	offcolor="#aeaeae";
	onbgcolor="#ffffff";
	oncolor="#3c3c3c";
	padding=2;
	pagebgcolor="#82B6D7";
	pagecolor="black";
	separatorsize=0;
	subimage="images/menuArrowDownLight.gif";
	subimagepadding=3;
}

with(menuStyleDropdownSelectLightElements=new mm_style()){
	bordercolor="#cacaca";
	borderstyle="solid";
	borderwidth=1;
	clickfunction="changeParentText();";
	fontfamily="Verdana, Tahoma, Arial";
	fontsize="75%";
	fontstyle="normal";
	headerbgcolor="#ffffff";
	headercolor="#000000";
	offbgcolor="#ffffff";
	offcolor="#3c3c3c";
	onbgcolor="#ffffff";
	oncolor="#3c3c3c";
	padding=2;
	pagebgcolor="#82B6D7";
	pagecolor="black";
	separatorsize=0;
}

The html is

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#bannerButtons {
	position: absolute; 
	top: 50px;
	right: 0px;
	z-index: 2;
}
</style>
</head>
<body>
<table id="bannerButtons">
   <tr>
      <td>
<script src="milonic_src.js" type="text/javascript"></script>	
<script src="mmenudom.js" type="text/javascript"></script>
<script src="menu_test.js" type="text/javascript"></script>
<script type="text/javascript"><!--

	with(rolesMenuOptions=new menuname("Roles Options")){
		style=menuStyleDropdownSelectLightElements;
		overflow="scroll";
	       aI("text=Administrator;url=javascript:selectRole('3');");
	       aI("text=Analyst;url=javascript:selectRole('2');");
	       aI("text=Business;url=javascript:selectRole('1');");
	       aI("text=Operator;url=javascript:selectRole('4');");
	}

	with(contextMenu=new menuname("contextMenu")){
		alwaysvisible=1;
		orientation="horizontal";
		position="relative";
		style=menuStyleDropdownSelectLight;
	        aI("text=Role: ;fontweight=bold;type=header;");
		aI("text=Administrator;showmenu=Roles Options;openonclick=1;");
	}
	drawMenus();

	function selectUserGroup(id) {
		updateServerContext(id, 3);
	}
	function selectRole(id) {
		updateServerContext(1, id);
	}
	function updateServerContext(id_ug, id_r) {
		alert("Select: " + id_ug + ", " + id_r);
	}
// --></script>
      </td>
      <td>
	 TD_RIGHT_OF_MENU
      </td>
      <td>
</body>
</html>

jbk

Migru · Post by **Migru** » Wed May 10, 2006 7:11 pm

Hi

thank you for that, I´m interested in testing that........

Michael

kercheval · Post by **kercheval** » Wed May 10, 2006 7:55 pm

Grrrrrr....

This test sample shows some artifacts in IE.

Firefox handles it fine.

I will post further....

Sigh...

jbk

kercheval · Post by **kercheval** » Wed May 10, 2006 8:28 pm

The use cases I had been dealing with were all based on zero based (left and top) cases. When I simplified the example in my prior post the left hand TD was removed and the offset problem exposed.

In order to use this workaround you must have a td on the left which is width 100% in style. Vertical adjustment will require tr tags which do the offsets for you. This is essentially a grid style and could get ugly. It is really your only choice (that I have found so far) if you need right aligned menus in an absolutely positioned environment.

Using the same styles as above, the following HTML also shows well in IE.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#bannerButtons {
	position: absolute; 
	top: 0px;
	right: 0px;
	z-index: 2;
}
body,
html {
	margin: 0px;
	padding: 0px;
}
</style>
<link rel=stylesheet type="text/css" href="/test.css" />
<script src="/core.js" type="text/javascript"></script>

<title>OneSight</title>
</head>
<body>
<table id="bannerButtons">
   <tr>
      <td style="width: 100%;">
	  &nbsp;
      </td>
      <td>
<script src="milonic_src.js" type="text/javascript"></script>	
<script src="mmenudom.js" type="text/javascript"></script>
<script src="menu_dropdownselect.js" type="text/javascript"></script>

<script type="text/javascript"><!--

	with(rolesMenuOptions=new menuname("Roles Options")){
		style=menuStyleDropdownSelectLightElements;
		overflow="scroll";
	       aI("text=Administrator;url=javascript:selectRole('3');");
	       aI("text=Analyst;url=javascript:selectRole('2');");
	       aI("text=Business;url=javascript:selectRole('1');");
	       aI("text=Operator;url=javascript:selectRole('4');");

	}

	with(contextMenu=new menuname("contextMenu")){
		alwaysvisible=1;
		orientation="horizontal";
		position="relative";
		style=menuStyleDropdownSelectLight;

	        aI("text=Role: ;fontweight=bold;type=header;");
		aI("text=Administrator;showmenu=Roles Options;openonclick=1;");

	}
	drawMenus();

	function selectUserGroup(id) {
		updateServerContext(id, 3);
	}
	function selectRole(id) {
		updateServerContext(1, id);
	}
	function updateServerContext(id_ug, id_r) {
		ag
		var url = "/user_context_set.jsp?usergroup=" + id_ug + "&role=" + id_r;
		if (!postToServer(url, "", false)) {
			alert("PostToServer Failed on " + url);
		} else {
			parent.frames['content'].location.reload();
		}
	}

// --></script>
      </td>
      <td>
	 &nbsp;
      </td>
      <td>
	 Test
      </td>
   </tr> 
</table>
</body>
</html>

z-indexing will need to be adjusted so that the menu is positioned correctly and not covering other components.

If anyone else has some way to work around the crazy IE CSS bugs here, I would love to hear it.

jbk

PlexQ · Post by **PlexQ** » Sun Jun 04, 2006 8:36 pm

If you are running 5.747, the parameter looks like it's called buildAfterLoaded not buildAfterLoad. I have tried it so far, and it actualy causes my menus not to appear at all.

ecpearson · Post by **ecpearson** » Tue Jun 06, 2006 6:13 am

I have tried what is in the forum, but using IE7 (haven't tested 6), the sub-menus are way off. In my scenario, position:relative was the only thing that did what I wanted fo placement, so I am kind of stuck.
BTW, the menu looks fine in Firefox 2 (alpha), but the same problem in Opera.
My site is here if someone has a suggestion:
http://www.pearsonfuneralhome.com/2006test/

ecpearson · Post by **ecpearson** » Tue Jun 06, 2006 6:32 am

Well, I must not have updated after I changed it to Loaded, instead of BuildafterLoad, but it work now in both IE and Opera.

Thanks for the help.

kercheval · Post by **kercheval** » Tue Jun 06, 2006 11:05 pm

You had better test this in Firefox in a restricted real estate. If your menu is long (and scrolling) in a limited area, you may find that selection is odd.

It is a bug that can be difficult to replicate if you got things just right, but you should check.

Milonic JavaScript Menu

Menu display problems in IE

Menu display problems in IE

Menu display problems in IE and Firefox

buildAfterLoad