Menu centering working in FF, IE, but not Opera - resolved

Poster: TheOpinionatedWebguy
Dated: Saturday February 23 2008 - 17:47:55 GMT

OK, hopefully this is an easy one. What am I doing wrong?

I've got a couple of menu bars which center nicely in Firefox and IE6 and IE7, but not in Opera.
What am I doing wrong?

The page is posted at http://www2.computer.org/portal/web/se/home.
The HTML for the menu (without the path for the files) is:

<div style="text-align:center; border: 0px solid rgb(141, 178, 227);">
<script type="text/javascript" src="milonic_menu_code.js"></script>
<script type="text/javascript" src="sub_menu_data.js"></script>
</div>

I've included the image preload script into the data file to reduce the number of .js files and to get rid of a white flash on first use. Here's the data file:

fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=100;
_subOffsetTop=0;
_subOffsetLeft=0;
buildAfterLoad=true;
horizontalMenuDelay="1";

with(subbarrStyle=new mm_style()){
borderwidth=0;
bgimage="/alfresco/d/d/workspace/SpacesStore/b9614099-e00c-11dc-81d5-4f378b857737/background.png";
fontfamily="arial, tahoma";
fontsize=12;
fontstyle="normal";
fontweight="bold";
offcolor="#ffffff";
overbgimage="/alfresco/d/d/workspace/SpacesStore/b90d53c3-e00c-11dc-81d5-4f378b857737/activebackground.png";
oncolor="#ffffff";
padding=7;
separatorimage="/alfresco/d/d/workspace/SpacesStore/b9b26e4f-e00c-11dc-81d5-4f378b857737/separator.png";
separatorsize=1;
}

with(milonic=new menuname("First Category Bar")){
alwaysvisible=1;
position="relative";
margin=2;
style=subbarrStyle;
orientation="horizontal";
menuheight=30;
menualign="center";
align="center";

aI("text=Search Results;url=#Search Results;");
aI("text=External Websites;url=#External websites;");
aI("text=CSDP Certification;url=#CSDP;");
aI("text=Standards Committees;url=#Standards Committees;");
aI("text=CS Website Areas;url=#CS Website Areas;");
aI("text=SWEBOK;url=#SWEBOK Overview;");
}

with(milonic=new menuname("Second Category Bar")){
alwaysvisible=1;
position="relative";
margin=2;
style=subbarrStyle;
orientation="horizontal";
menuheight=30;
menualign="center";
align="center";

aI("text=Technical Committees;url=#Technical Committees;");
aI("text=SE Vocabulary;url=#SEVOCAB;");
aI("text=Books;url=#Books;");
aI("text=Code of Ethics;url=#Code of Ethics;");
aI("text=Magazines;url=#Magazines;");
aI("text=Journals;url=#Journals;");
aI("text=IEEE Readynotes;url=#IEEE ReadyNotes;");
aI("text=Conferences;url=#Conferences;");
}

drawMenus();

/*
Milonic DHTML Menu Image Pre-loading Module preloadmenuimages.js version 1.3 June 27 2006
This module is only compatible with the Milonic DHTML Menu version 5.16 or higher

Copyright 2004 (c) Milonic Solutions Limited. All Rights Reserved.
This is a commercial software product, please visit http://www.milonic.com/ for more information.

USE: This module does not need any parameters but needs to be placed after the menus have been built

Version 1.2 added ability to load images and give control back to the menu at the same time, the system is now more thread like

SYNTAX: <script language="JavaScript1.2" type="text/javascript" src="preloadmenuimages.js"></script>
*/

_mIms=new Array();
_mIms2=new Array();

function _mPLF(i)
{
for(var x=0;x<_mIms.length;x++){
if(i==_mIms[x])return
x++
}
_mIms[_mIms.length]=i
}

function mmPLIs(i,n){

if(n){
_mIms2[i]=new Image()
if(_mIms[i])_mIms2[i].src=_mIms[i]
}

if(!_mIms2[i].complete){
_StO("mmPLIs("+(i)+",0)",5)
return
}

if(i<_mIms.length)_StO("mmPLIs("+(i+1)+",1)",20)
}

function mmenuPreLoadImages(){
for(var x=0;x<_mi.length;x++){
var I=_mi[x]
if(I[24])_mPLF(I[24])
if(I[29])_mPLF(I[29])
if(I[32])_mPLF(I[32])
if(I[46])_mPLF(I[46])
if(I[47])_mPLF(I[47])
if(I[48])_mPLF(I[48])
if(I[56])_mPLF(I[56])
if(I[69])_mPLF(I[69])
if(I[71])_mPLF(I[71])
if(I[73])_mPLF(I[73])
if(I[79])_mPLF(I[79])
if(I[82])_mPLF(I[82])
if(I[83])_mPLF(I[83])
if(I[85])_mPLF(I[85])
if(I[88])_mPLF(I[88])
if(I[90])_mPLF(I[90])
if(I[91])_mPLF(I[91])
if(I[92])_mPLF(I[92])

}
mmPLIs(0,1)
}

mmenuPreLoadImages();

Re: Menu centering working in FF, IE, but not Opera

Poster: TheOpinionatedWebguy
Dated: Wednesday February 27 2008 - 17:57:46 GMT

OK, I found a workaround. I'm not really happy with it, but it seems to work in virtually all browsers except IE 5.2 running on Max OSX. I'm not happy with it because it uses a "deprecated" tag, but it works.

It turns out the problem manifested itself in a few browsers, including Safari. However, using browsercam.com to capture a wide variety of browsers and os combinations, it looks like this works for now.

Here's the new invocation code that seems to work:

<div style="text-align:center;">
<center>
<script type="text/javascript" src="milonic_menu_code.js"></script>
<script type="text/javascript" src="sub_menu_data.js"></script>
</center>
</div>

Re: Menu centering working in FF, IE, but not Opera - resolved

Poster: scientica
Dated: Sunday March 2 2008 - 19:16:57 GMT

Hi!
I have been struggling with it the same way. The menu appears absolutely fine in FF but in IE7 it appears to extreme right, after adding the DIV tag you suggested it moved to left yet half way through. And the drop down is still appearing at a vague position. What is the solution for this?

Re: Menu centering working in FF, IE, but not Opera - resolved

Poster: Ruth
Dated: Monday March 3 2008 - 7:31:31 GMT

Hi,

We can't tell you the solution without having the web page to test it.

Ruth