Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:39

Mozilla 1.6 / NN Colours & Width Problem


Poster: iggle
Dated: Tuesday March 9 2004 - 9:47:13 GMT

I'm working on a project that includes applying Milonic Menu to a website (using a fully licenced version). I have successfully created the code to output the JavaScript menu code from Vignette's content management system, but have come across some issues outside IE.

1) Using Mozilla & NN the mouse-over colour of each menu-item seems to stick, i.e. the mouse over colour is fine, but it doesn't revert to the original colour.

The menu entries are output with offbgcolor in order to be able to dynamically output the entry with a different colour each time. However, it appears that Moz/NN ignores this value and only looks to the style colours. Using the style colours is fine except that I can't control the menu offbgcolor value.

I read the post about applying item-styles, but I effectively already do this...http://www.milonic.com/forum/viewtopic.php?t=3682&highlight=styles

So why is it that my item properties are not overiding those in the menu style, when using Moz/NN?

2)The width of the main menu bar is incorrect in Moz/NN. It is too narrow, even though each menu has a set width and the main menu has a set width.

Why is Milonic ignoring these width settings that are being picked up in IE?

Here's some code to help resolve these issues: -

Code:
_menuCloseDelay=100
_menuOpenDelay=50
_followSpeed=100               
_followRate=100                   
_subOffsetTop=5     
_subOffsetLeft=-10           
_scrollAmount=3             
_scrollDelay=0             

with(mainStyle=new mm_style()){
  onbgcolor='#4B0B8B';
  oncolor='#FFFFFF';
  offbgcolor='#144E80';
  offcolor='#FFFFFF';
  bordercolor='#FFFFFF';
  borderstyle='solid';
  borderwidth=1;
  separatorcolor='#FFFFFF';
  separatorsize='1';
  padding=5;
  fontsize='10';
  fontstyle='normal';
  fontweight='bold';
  fontfamily='verdana';
  subimage='/Cat_World/assets/media/perkins/arrow.gif';
  subimagepadding='2';
  //overfilter='Alpha(opacity=90);';
      }
with(milonic=new menuname('Main Menu1')){
  style=mainStyle;
  //position='relative';
  alwaysvisible=1;
  orientation='horizontal';
  menuwidth='598';
aI('text=Home;offbgcolor=#4B0B8B;itemheight=34;itemwidth=84;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000__843,00.html;showmenu=2000;');
aI('text=About<BR>Us;offbgcolor=#8FB0CC;itemheight=34;itemwidth=84;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_226__843,00.html;showmenu=226;');
aI('text=News;offbgcolor=#769CBD;itemheight=34;itemwidth=84;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_225__843,00.html;showmenu=225;');
aI('text=Products;offbgcolor=#5E89AE;itemheight=34;itemwidth=84;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2001__843,00.html;showmenu=2001;');
aI('text=Support;offbgcolor=#45759E;itemheight=34;itemwidth=84;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002__843,00.html;showmenu=2002;');
aI('text=Consultancy;offbgcolor=#2D628F;itemheight=34;itemwidth=82;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2003__843,00.html;showmenu=2003;');
aI('text=Recruit;offbgcolor=#144E80;itemheight=34;itemwidth=82;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2004__843,00.html;showmenu=2004;');
}

with(milonic=new menuname('1403')){
  style=mainStyle;
aI("text=Genuine Parts;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002_1403-1406,00.html;showmenu=1406;offbgcolor=45759E;parent=1403;");
aI("text=Ordering Parts;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002_1403-1407,00.html;offbgcolor=45759E;parent=1403;");
aI("text=Powerpart Warranty;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002_1403-1408,00.html;offbgcolor=45759E;parent=1403;");
}

with(milonic=new menuname('1404')){
  style=mainStyle;
aI("text=2nd level menu that wraps inline!;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002_1404-2389,00.html;showmenu=2389;offbgcolor=45759E;parent=1404;");
aI("text=An option;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002_1404-2392,00.html;offbgcolor=45759E;parent=1404;");
aI("text=An option;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002_1404-2391,00.html;offbgcolor=45759E;parent=1404;");
}

with(milonic=new menuname('2000')){
  style=mainStyle;
aI("text=About Perkins;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1419,00.html;offbgcolor=A7C3DB;parent=2000;");
aI("text=Image Test;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_2398,00.html;showmenu=2398;offbgcolor=A7C3DB;parent=2000;");
aI("text=Community Work;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1256,00.html;offbgcolor=A7C3DB;parent=2000;");
aI("text=Test Live Content;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_2129,00.html;offbgcolor=A7C3DB;parent=2000;");
aI("text=Company History;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1391,00.html;offbgcolor=A7C3DB;parent=2000;");
aI("text=Environment;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1392,00.html;offbgcolor=A7C3DB;parent=2000;");
aI("text=Exhibitions;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1394,00.html;offbgcolor=A7C3DB;parent=2000;");
aI("text=News;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1355,00.html;showmenu=1355;offbgcolor=A7C3DB;parent=2000;");
aI("text=Perkins Locations;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1393,00.html;offbgcolor=A7C3DB;parent=2000;");
aI("text=Survey;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1810,00.html;offbgcolor=A7C3DB;parent=2000;");
aI("text=Gonzo problem log;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1417,00.html;offbgcolor=A7C3DB;parent=2000;");
aI("text=Contact Us;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_2136,00.html;offbgcolor=A7C3DB;parent=2000;");
aI("text=What’s New;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_2144,00.html;offbgcolor=A7C3DB;parent=2000;");
aI("text=Power News;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_2255,00.html;showmenu=2255;offbgcolor=A7C3DB;parent=2000;");
}


That's an extract of some longer code.

I would really appreciate some help on this, although it will be difficult as I can't supply a site URL (it's a development site within a firewall).

Keep up the good work with a great menu system!

Many thanks,


Poster: Maz
Dated: Tuesday March 9 2004 - 13:33:51 GMT

Hi,

I don't have an answer, but suggestions, because I see things that look different from normal, maybe - it makes a difference.

Earlier on some older browsers had problems with rem// instead remove them completely. I don't know if its correct or not, but I've not seen anyone use single quotes, only double quotes.

The only problem I've seen recently involved images, although my pet peeve is with IE not using standard css so everything gets thrown out.

maz


Poster: John
Dated: Tuesday March 9 2004 - 13:57:04 GMT

Think you hit it with the quotes, Maz. Some of the items are single, some are double, and I believe that's a no-no. Follow the examples and use " as shown, then let us know. You've got quite a mix in there, so check carefully.

Solved one of the problems...


Poster: iggle
Dated: Tuesday March 9 2004 - 14:20:54 GMT

Thank you very much indeed for the quick responses to my post - what a refreshing change in the world of customer service! :o

I have solved the 'sticky' colours issue. The problem was my syntax. I output all HTML from within a TCL template, dynamically changing the output as required. I waded through and realised that an array of preset colour values was missing the preceeding # - I hate debugging non-OO code! I only found it because I was trying out the previous post! It would seem that a mix of " and ' didn't solve the issue, but I've set all menu-item strings to use only ".

That leaves the Moz/NN menu-width issue. I'm sure there's a simple explanation for this one.

Keep up the great work. 8)

Best regards,


Poster: John
Dated: Tuesday March 9 2004 - 14:40:32 GMT

Many thanks for the kind words, Rob. We try to be the best.

My fault for not catching the colors, but they got lost in all the numbers in your URLs (good excuse, eh?). Further, many of them are correct.

Don't have either of those browsers up right now, so I can't look at your code snip. One of the other folks will get it.

Glad you got at least part of it solved.


Poster: Maz
Dated: Tuesday March 9 2004 - 21:14:20 GMT

Glad to help,

What url are you using, I only see the -www- link unless I missed it.

maz

URL


Poster: iggle
Dated: Wednesday March 10 2004 - 10:57:21 GMT

The URL I'm using is internal only at the moment. Eventually it'll be live on Perkins.com


Poster: Andy
Dated: Wednesday March 10 2004 - 15:11:21 GMT

The problem with your colors is down to a missing hash before the hex color value is each menuitem.
I wish that IE wouldn't ignore the fact that there is a missing hash, it causes so much confusion.

If you put the hash in the colors will work in Mozilla.

The width problem can be resolved by adding itemwidth="100%"; to the main menu.

Here's a copy of your working code:

Code:
_menuCloseDelay=100
_menuOpenDelay=50
_followSpeed=100               
_followRate=100                   
_subOffsetTop=5     
_subOffsetLeft=-10           
_scrollAmount=3             
_scrollDelay=0             

with(mainStyle=new mm_style()){
  onbgcolor='#4B0B8B';
  oncolor='#FFFFFF';
  offbgcolor='#144E80';
  offcolor='#FFFFFF';
  bordercolor='#FFFFFF';
  borderstyle='solid';
  borderwidth=1;
  separatorcolor='#FFFFFF';
  separatorsize='1';
  padding=5;
  fontsize='10';
  fontstyle='normal';
  fontweight='bold';
  fontfamily='verdana';
  subimage='/Cat_World/assets/media/perkins/arrow.gif';
  subimagepadding='2';
  //overfilter='Alpha(opacity=90);';
      }
with(milonic=new menuname('Main Menu1')){
  style=mainStyle;
  //position='relative';
  alwaysvisible=1;
  orientation='horizontal';
  itemwidth="100%"
  menuwidth=598;
aI('text=Home;offbgcolor=#4B0B8B;itemheight=34;itemwidth=84;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000__843,00.html;showmenu=2000;');
aI('text=About<BR>Us;offbgcolor=#8FB0CC;itemheight=34;itemwidth=84;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_226__843,00.html;showmenu=226;');
aI('text=News;offbgcolor=#769CBD;itemheight=34;itemwidth=84;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_225__843,00.html;showmenu=225;');
aI('text=Products;offbgcolor=#5E89AE;itemheight=34;itemwidth=84;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2001__843,00.html;showmenu=2001;');
aI('text=Support;offbgcolor=#45759E;itemheight=34;itemwidth=84;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002__843,00.html;showmenu=2002;');
aI('text=Consultancy;offbgcolor=#2D628F;itemheight=34;itemwidth=82;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2003__843,00.html;showmenu=2003;');
aI('text=Recruit;offbgcolor=#144E80;itemheight=34;itemwidth=82;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2004__843,00.html;showmenu=2004;');
}

with(milonic=new menuname('1403')){
  style=mainStyle;
aI("text=Genuine Parts;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002_1403-1406,00.html;showmenu=1406;offbgcolor=45759E;parent=1403;");
aI("text=Ordering Parts;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002_1403-1407,00.html;offbgcolor=45759E;parent=1403;");
aI("text=Powerpart Warranty;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002_1403-1408,00.html;offbgcolor=45759E;parent=1403;");
}

with(milonic=new menuname('1404')){
  style=mainStyle;
aI("text=2nd level menu that wraps inline!;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002_1404-2389,00.html;showmenu=2389;offbgcolor=45759E;parent=1404;");
aI("text=An option;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002_1404-2392,00.html;offbgcolor=45759E;parent=1404;");
aI("text=An option;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2002_1404-2391,00.html;offbgcolor=45759E;parent=1404;");
}

with(milonic=new menuname('2000')){
  style=mainStyle;
aI("text=About Perkins;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1419,00.html;offbgcolor=#A7C3DB;parent=2000;");
aI("text=Image Test;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_2398,00.html;showmenu=2398;offbgcolor=#A7C3DB;parent=2000;");
aI("text=Community Work;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1256,00.html;offbgcolor=#A7C3DB;parent=2000;");
aI("text=Test Live Content;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_2129,00.html;offbgcolor=#A7C3DB;parent=2000;");
aI("text=Company History;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1391,00.html;offbgcolor=#A7C3DB;parent=2000;");
aI("text=Environment;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1392,00.html;offbgcolor=#A7C3DB;parent=2000;");
aI("text=Exhibitions;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1394,00.html;offbgcolor=#A7C3DB;parent=2000;");
aI("text=News;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1355,00.html;showmenu=1355;offbgcolor=#A7C3DB;parent=2000;");
aI("text=Perkins Locations;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1393,00.html;offbgcolor=#A7C3DB;parent=2000;");
aI("text=Survey;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1810,00.html;offbgcolor=#A7C3DB;parent=2000;");
aI("text=Gonzo problem log;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_1417,00.html;offbgcolor=#A7C3DB;parent=2000;");
aI("text=Contact Us;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_2136,00.html;offbgcolor=#A7C3DB;parent=2000;");
aI("text=What’s New;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_2144,00.html;offbgcolor=#A7C3DB;parent=2000;");
aI("text=Power News;url=http://devperkinsd.cis.cat.com/perkins/main/1,2783,7_2000_2255,00.html;showmenu=2255;offbgcolor=#A7C3DB;parent=2000;");
}

Issues


Poster: iggle
Dated: Wednesday March 10 2004 - 15:57:17 GMT

Hi,

Cheers for the response. We solved the hash issue yesterday, as per the prior posts, but thanks for that answer anyway!!

The width fix seems to have worked a treat. The best bit is that I've maintained fixed width buttons on IE, but a full-length bar in Mozilla with variable width buttons - a good compromise!

Thanks again for your help.

Regards,

Netscape Navigator Positioning Issue


Poster: iggle
Dated: Wednesday March 10 2004 - 19:15:28 GMT

OK, the colours issue is solved & the width issue has been worked around. That leaves one other possibly more awkward snag to solve!

In Netscape Navigator 7.1 the menu-bar is positioning itself a single menu-bar's height down the page from the place it's supposed to be. Nothing else around it has moved. It all works OK.

Now to confuse the issue...

1) It's fine in Internet Explorer 5.5 & 6
2) It's fine in Mozilla R1.6
3) It's fine in Mozilla Firefox 0.8 (same as 2 methinks)

It's just trusty old NN7 that's playing up. I'm wondering if it's a CSS issue, but my code isn't using any CSS to position the menu-bar.

Answers on a post card - or just this bulletin board for that matter - & my customers will become happy.

Regards,


Poster: John
Dated: Wednesday March 10 2004 - 19:41:20 GMT

Re: your css, note the post from Andy towards the bottom of http://www.milonic.com/forum/viewtopic.php?t=3561. Don't know if it applies or not, but...


Poster: Ruth
Dated: Thursday March 11 2004 - 19:12:53 GMT

I'm probably blind and don't know it, but I can't see anyplace in your code where you actually position the menu? And, I would check any kind of code that has a margin in particular. Since it's being placed down it will probably be top margin. If the menu is in a table, take a look at your table padding, margin, border padding etc. I think each browser has magins set and of course, I'm sure they are different in each browser :lol: When I have a problem, one thing I do to test things is set the top and left margins in the body code to 0 so when I'm checking that particular margin has no effect.

Ruth