Mozilla Firefox menu display problem w/ FreeStyle Menu v1.0R

1) jp2008 Group: Members
Posts: 4 Joined: 20 Mar 2008 Location: USA IP: 35.12.--.--

Posted:

Hi Angus, first of all, kudos on your fantastic scripts. I think it's fantastic that you make such great work available to everyone, especially a lot of people who may not be all that adept at coding. I have to note however, that, after a lot of custom editing of your code, and getting the results to look just great on IE 6 and 7.0, I unfortunately found the menu (top left of screen on my page, http://www.jpopexpress.com/) to look all jumbled and with bullets showing when displaying in FIREFOX.

My site:
http://www.jpopexpress.com/

My site's 'menu' page (include page featuring your cascading menu):
http://www.jpopexpress.com/menu.htm

I will point out (I'm not really sure if this matters, although it might, since I see that your sample code for the FreeStyle Menu looks just fine in Firefox with no images/text only) that my custom-tweaked version of your 'FreeStyle Menu' vertical code does involve using a total of 5 levels in the tree, as well as icon images to mark main categories. Please tell me if you can find any reason (in my code, etc) for why the menu looks the way it does in Firefox.

(Please also note that I went through several pages in your forum beforehand to avoid any unnecessary extra work for you and could not seem to find an exact fix for my site's specific problem. [I also noticed a lot of other people had various difficulties with getting their menus to display properly in Firefox - though interestingly some people had the opposite results!]). Also, regarding crediting you, if we can get this to display properly, I am willing to help you in any or all of the following ways: PayPal contribution, linking to you from multiple spots on my site as a credit, and direct promotion/recommendation of your work to my site's editors/other contacts, many of whom are avid Web developers all around the Internet!

Thanks so much for your help!

Kevin from Jpopexpress.com

2) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 118.92.--.--

Posted:

Thanks for your your offer of a donation and/or promotion!

This is a simple fix luckily. Remember that the submenu for an item must be within the list item, i.e. *before* the closing </li>. MSIE erroneously allows you to have submenus outside for some reason, Firefox is behaving as one would expect here!

Cheers - Angus.

3) jp2008 Group: Members
Posts: 4 Joined: 20 Mar 2008 Location: USA IP: 35.12.--.--

Posted:

Angus, first of all thanks so much for your help! Your advice about keeping all the sub-menus within their own <UL> tags within the corresponding greater category <LI> tags now at least enables the user to access all subcategories in the cascading menu on my page in Firefox. However we're not quite there yet :( ...

My site:
http://www.jpopexpress.com/

My site's 'menu' page (include page featuring your cascading menu):
http://www.jpopexpress.com/menu.htm

There are still three main issues in terms of the proper display I would like (as reflected by how the menu looks in the IE browser - which I agree with you, is not as good as Firefox - so all the more important everything looks good in FF!):

1) Overlapping background image for main category "table cells" (main category "table cell heights" too high) onMouseover;

2) The light purple TD background color is not visible in the main cascading "menu box" (that you DO in fact see once you mouseover on the main menu and start seeing the popup sub-menus);

3) There is no dark purple table border around the "main menu box" as it appears the way I would like in IE.

I know we can get it, and I will keep playing with the code too in the meantime.

Thanks a bunch again for your help.

P.S. I am thinking it is likely something contained within the code of my CSS:
http://www.jpopexpress.com/listmenu_o.css, but I can't seem to figure out what the problem is.

Thanks a lot again : - ]

4) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 118.92.--.--

Posted:

Good to see you making progress!

Regarding the main menu boxes, it's just the text wrapping. Remove some of the '-----' signs and the problem will disappear.

For the main "menu box" it's simplest to just apply your colours/borders to the element that contains it in the page.

- Angus.

5) wilfredguerin Group: Members
Posts: 3 Joined: 23 Mar 2008 Location: Pyramid de Cholula IP: 68.9.--.--

Posted:

Angus, the FreeStyle Menus are not working correctly on most environments, older IE crashes, the buffering and script latency is horrible on many of the others, and the structure handling will be incompatible with ff3+ and others forthcoming, advise migrate to a cleaner api and increase the effective capabilities with structured scripting... see other post ;)

6) wilfredguerin Group: Members
Posts: 3 Joined: 23 Mar 2008 Location: Pyramid de Cholula IP: 68.9.--.--

Posted:

Im looking through the FS versus the API... definitely the API and the techniques used with supernote and the d/r are far cleaner than the FS... both opera and FF and NS/"Flock" have problems with the FS techniques and do not handle them as you intend... more later, searching for comprehensive layer manager apis, anyone know of any?

7) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 203.173.--.--

Posted:

SuperNote and DragResize are newer scripts than FSMenu, yes. I do intend to rewrite a version of this script based on SuperNote's core at some point, with event delegation rather than event capturing on a per-menu basis. The script does still technically derive from a NS4-supporting version (the "div menus" in the demo) which would be deprecated in the update process.

It would be most helpful if you would you would clarify how the menus are not working correctly on "most environments" thought :). I don't believe I've noticed that, nor the "FF3+" problem.

- Angus.

8) jp2008 Group: Members
Posts: 4 Joined: 20 Mar 2008 Location: USA IP: 35.12.--.--

Posted:

Angus, I went ahead and removed the dash marks as you had said, and still the problem persists in Firefox (i.e. no light purple background color and dark purple border in main menu as needed). I've been looking through the CSS in the CSS file:
[http://www.jpopexpress.com/listmenu_o.css], as well as in the menu.htm page itself [http://www.jpopexpress.com/menu.htm], and I can't seem to yet find the correct solution on how to fix this.

I'm including some of the code I have been looking at where I think the problem must lie:

/* OFFICE-STYLE FREESTYLE MENU LAYOUT */

/* All <ul> tags in the menu in the ROOT LEVEL */
.menulist, {
margin: 0;
padding: 1px;
width: 180px;
list-style: none;
background: #CCCCFF;
border: 3px solid #6600CC;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned across from their parent */
.menulist ul {
margin: 0;
padding: 1px;
width: 180px;
list-style: none;
/* background with image for left border
background: #CCCCFF url(listmenu_o.png) left repeat-y; */
background: #CCCCFF;
border: 1px solid #6600CC;
display: none;
position: absolute;
top: 0;
left: 177px;
}

/* All menu items (<li> tags) are relatively positioned (to correctly offset submenus). */
.menulist li {
list-style: none; /*ADDED LINE*/
position: relative;
}

/* Links inside the menu */
.menulist li a {
display: block;
padding: 3px 4px 5px 20px;
color: #6600CC;
font-weight: bold;
text-decoration: none;
border: 1px solid transparent;
margin: 0;

}

etc..............

Basically what I need the menu that loads on the main page to do is look like the sub-menus currently do when you mouseover them ("Shop MUSIC - Shop ANIME" etc), i.e. with a light purple colored background a 3-pixel border outline in dark purple.

Your help is greatly appreciated!

- Kevin from jpopexpress.com

9) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 202.137.--.--

Posted:

.menulist, {

change to:

.menulist {

as the comma is breaking the rule and it's not applying to the first-level UL.

- Angus.

10) jp2008 Group: Members
Posts: 4 Joined: 20 Mar 2008 Location: USA IP: 35.12.--.--

Posted:

Angus, sorry for the delayed response. Just wanted to say thanks a lot for your help; it seems that that offending comma, along with making sure that all submenus are contained within the main category <li> tags did the trick!

So far, I have already promoted your site and service on my blog and newsletter, and I will be sure and add your name and site to the 'Credits' page I will be compiling for the next edition of my site. (And even though I will soon be changing the overall layout of my site which may involve no longer using your menu, I will be sure and credit you and make a donation should I continue to use your menu on the site's new version). Thanks a lot again for your nice work and help!

Mozilla Firefox menu display problem w/ FreeStyle Menu v1.0R

Post a Reply: