Mozilla 1.6 / NN Colours & Width Problem

iggle · Post by **iggle** » Tue Mar 09, 2004 10:47 am

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://milonic.com/forum/viewtopic. ... ght=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: Select all

_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,

Maz · Post by **Maz** » Tue Mar 09, 2004 2:33 pm

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

Post by **John** » Tue Mar 09, 2004 2:57 pm

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.

iggle · Post by **iggle** » Tue Mar 09, 2004 3:20 pm

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

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.

Best regards,

Post by **John** » Tue Mar 09, 2004 3:40 pm

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.

Maz · Post by **Maz** » Tue Mar 09, 2004 10:14 pm

Glad to help,

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

maz

iggle · Post by **iggle** » Wed Mar 10, 2004 11:57 am

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

Post by **Andy** » Wed Mar 10, 2004 4:11 pm

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: Select all

_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;"); 
}

iggle · Post by **iggle** » Wed Mar 10, 2004 4:57 pm

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,

iggle · Post by **iggle** » Wed Mar 10, 2004 8:15 pm

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,

Post by **John** » Wed Mar 10, 2004 8:41 pm

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

Post by **Ruth** » Thu Mar 11, 2004 8:12 pm

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

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

Milonic JavaScript Menu

Mozilla 1.6 / NN Colours & Width Problem

Mozilla 1.6 / NN Colours & Width Problem

Solved one of the problems...

URL

Issues

Netscape Navigator Positioning Issue