menualign="left" issue with Netscape 7

[thelondonuser]

Hi all,

While developing my website, I came across something of a bug with the 100% span horizontal menu. Setting menualign="left"; in the menu properties messes up in Netscape 7 (fine in IE, NS4, not sure about others). By this I mean:

1. To the right of the final menu entry, the 1px border line running along the top of the menu becomes a 2px line instead.
2. Underneath the length of the whole menu, there is no 1px border line.

Strangely, setting menualign="center"; or not mentioning menualign at all (since default=center) poses no problem for NS7 and it renders fine.

Apologies for not being able to link to a URL, but it's not publicly accessible at the moment. The rest of the menu style is:

Code: Select all

position="relative";
menuwidth="100%";
alwaysvisible=1;
orientation="horizontal";

Any help would be most appreciated. I think that it is just this line and not an issue with any settings I have chosen (I hope )[/b]

[Ruth]

If there's no way to put up a test page, we'd need the menu_data.js file coding, plus the page on which it appears coding, any css file. There could be any number of reasons for what you describe, something in the css code, something in the page html code, something in the menu style code and without your files we couldn't begin a process of elimination.

Ruth

[thelondonuser]

Hi Ruth,

Thanks for the advice on what info would be needed, as well as offering to help:

The data file (only weird thing I can spot is that I've added position="relative" for layout reasons.

Code: Select all

_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150            // The time delay before menus open on mouse over
_subOffsetTop=0              // Sub menu top offset
_subOffsetLeft=0            // Sub menu left offset

with(menuStyle=new mm_style()){
align="left";
bordercolor="#cccccc";
borderstyle="solid";
borderwidth=1;
clickbgcolor="#990000";
clickcolor="#ffffff";
decoration="none";
fontfamily="verdana,arial,tahoma,sans-serif";
fontsize="10px";
fontweight="bold";
high3dcolor="#ffffff";
offbgcolor="#ffffff";
offcolor="#555555";
onbgcolor="#eeeeee";
oncolor="#555555";
ondecoration="none";
outfilter="fade(duration=0.4)";
overfilter="inset(duration=0.2);alpha(opacity=95);Shadow(color='#777777', Direction=180, Strength=5))";
padding=5;
separatoralign="center";
separatorcolor="#999999";
separatorpadding=0;
separatorsize=1;
subimage="/menus/arrow.gif";
subimagepadding="2";
valign="middle";
}

with(milonic=new menuname("Main Menu")){
style=menuStyle;
position="relative";
menuwidth="100%";
menualign="left";
alwaysvisible=1;
orientation="horizontal";
aI("text= Home;url=/;image=/menus/menu_home.gif;");
aI("text= Search;showmenu=Search;status=Please make a selection from the sub-menu;");
aI("text= Profiles;showmenu=Profiles;status=Please make a selection from the sub-menu;");
aI("text= Articles;showmenu=Articles;status=Please make a selection from the sub-menu;");
aI("text= Contact Us;url=/contactus/;image=/menus/menu_contactus.gif;");
}

with(milonic=new menuname("Search")){
style=menuStyle;
aI("text= Search database;url=/search.php;");
aI("text= Search alerts;url=/alerts.php;");
}

with(milonic=new menuname("Profiles")){
style=menuStyle;
aI("text= Sector 1;url=/profiles1.php;");
aI("text= Sector 2;url=/profiles2.php;");
aI("text= Sector 3;url=/profiles3.php;");
}

with(milonic=new menuname("Articles")){
style=menuStyle;
aI("text= General tips;url=/articlesgen.php;");
aI("text= Specialist tips;url=/articlesspec.php;");
}

drawMenus();

Page that calls it: relevant bit from HEAD section

Code: Select all

<script language="JavaScript" type="text/javascript" src="/menus/milonic_src.js"></script>	
<script language="JavaScript" type="text/javascript">
<!-- 
if(ns4)_d.write("<script language=JavaScript type=text/javascript src=menus/mmenuns4.js></script>");		
else _d.write("<script language=JavaScript type=text/javascript src=/menus/mmenudom.js></script>"); 
//-->
</script>

Where it is called in BODY

Code: Select all

<script language="JavaScript" type="text/javascript" src="/menus/menu_data.js"></script>

No CSS data at the moment - that's not been added yet.

Any help would be great.

[Maz]

You have position=relative but if its not in a table take it off, I also see a 0 value and none, maybe you need to remove those?

Perhaps it should be left=0 instead of menualign, I'm thinking you answered your own question, maybe you don't need menualign.

Regards,
maz

[Ruth]

Hi,
Maz is correct. If you remove the position="relative"; that fixes the problem. However, if you are trying to put the menu in a table then position="relative"; is required. If you're doing a table, put all the calls the first item after the body tag. You also need to get the main menu out of the menu_data.js file and place it in it's own file or put it in the actual table cell. See HEREfor how to put the menu in a table.

Any of the above fixes the problem you are having in Netscape.

Ruth

[thelondonuser]

Thanks everyone,

Removing just position="relative" did the trick. I put it in thinking that I needed to in order to avoid overlapping issues... I'm a newbie when it comes to DIVs and still try to include (in an admittedly 'hypochondriac' fashion) position=relative to make sure nothing shares its space on the screen with anything else.

As expected, removing the line did cause a few layout quirks:

1. All of a sudden, in Netscape 7 the menu is roughly one <br> lower than it should be. (This is not a problem in either IE or Opera and I can't just get rid of the <br clear="all"> before the menu therefore, otherwise IE and Opera screws up).

2. After removing the "=relative" line, the vertical gap underneath the menu before the table underneath disappeared in IE and Netscapedespite there being <br><br> underneath the menu call code. Adding a third <br> fixed, but now Opera shows too much of a gap because it understood the initial <br><br> just fine and adding another line break just sent it further down the page.

Here's the snippet:

Code: Select all

<img src="/images/logo.gif" width="369" height="167" hspace="0" vspace="0" border="0"><br clear="all">
<script language="JavaScript" type="text/javascript" src="/menus/menu_datapublic.js"></script>
<br><br><br>

I can probably live with all of this, given the rarity of Netscape 7 and Opera 7, but a workaround would be nice

As always, thanks a bundle!

[Ruth]

The snippets of code for the menu on the page really are less than we need. A lot depends on the menu position. So, if you could give the body coding on the page, including the menu_data.js call it would be much easier to figure things out. This way it's just hit or miss since we do not know just exactly where you are placing your menu. For example, you should not place the menu inside a div, it doesn't like it. It's made up of divs, spans etc. You mentioned divs so that makes one wonder if that is where the menu is. You also do not have a top position listed, but did have position relative, that makes one think it may be in a table. And, there are issues if that's the case, because if the menu isn't placed correctly for that it can break-up or become non-functioning in some browsers, positioned incorrectly. From your questions it seems you are tyring to put it in a table. We could be giving you a snippet of info to try here and there and never find the real problem without knowing the layout of the page. Can you please post the page layout, ie from the body tag down? Thanks

Ruth

[John]

Ruth is absolutely correct. It's all but impossible to help with just bits and pieces of code, and, in fact, quite easy to give an incorrect reply that way. We really need to see the interaction of everything. This is why we ask for a URL.