The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

howdy...I am implementing Kevin Yanks excellent drop-down menu on a site of mine. I am encountering some unforeseen problems and would like some dHTML gurus to take a look and make some suggestions. To be fair, the menu in it's unaltered state works perfectly in both IE and NS (does it work in AOL?) The problem lies in the fact that I am making some pretty substantial edits/additions.

1) The menu was designed for use in a left-aligned site. On my intro page ONLY, the menu will be center-aligned. The problem with this is that fact the the DIV's rely on absolute postioning. How can I overcome this?

2) The original menu used only one background color for each menu. I want to use a different background color for each menu. I have accomplished this in IE by creating duplicate styles for each menu item, then changing the bg color. But as you might expect, it does not work in Netscape. I have narrowed it down to the part that I must change/add to in NS, but I don't know how to proceed.

In Netscape, the DIV that contains the actual text just covers the text itself.

3) I would like to know if it possible to make each menu a different width? As you can see from the mockup, each button is a different width, and I would like the menu's to be the same width. This one is not that important as I can change the images themselves if I need to.

Let me give a glossy answer to each of your questions before I hop in bed for the night. If you're still stumped on any of them due to my half-bummed responses, feel free to post back.

1) The menu was designed for use in a left-aligned site. On my intro page ONLY, the menu will be center-aligned. The problem with this is that fact the the DIV's rely on absolute postioning. How can I overcome this?

Unfortunately, absolute positioning is a concession I had to make for the sake of cross-browser compatibility. Try as I might, I couldn't get all major browsers to agree on how a relative-positioned menu was to be displayed, let alone multiple relative-positioned menus (you'd be surprised at how much trouble ensued when they overlapped!). Either the menu was shifted slightly down vertically in Opera, or Netscape was displaying the borders of the menu wrong... in the end I had to be contented with an absolute-positioned menu.

One thought might be to try using some funky DOM code to determine the absolute position of your first menu button and then dynamically derive the absolute positions of the menus from that information. That sounds to me like the kind of thing that would only be possible in NS6 or MSIE 5+.

2) The original menu used only one background color for each menu. I want to use a different background color for each menu. I have accomplished this in IE by creating duplicate styles for each menu item, then changing the bg color. But as you might expect, it does not work in Netscape. I have narrowed it down to the part that I must change/add to in NS, but I don't know how to proceed.

In Netscape, the DIV that contains the actual text just covers the text itself.

At first glance, you'd think that all there is to changing the background colours of the menus is to give a different CSS class to each style of menu item you want to have. Indeed, this is all you have to do for NS6, MSIE, and Opera.

Netscape 4 is (as usual) a little more troublesome. If you look at the setupMenus() JavaScript function closer to the top of the page, you'll find a big section of code that begins with a comment "This section is for Netscape 4 only". In it, you'll find a for() loop that does serveral set-up tasks for each menu item in the page. Among the things that loop does is the following:

Notice the colour codes. That's what's causing Netscape to stick with the same old colours. You can change these colour values to make Netscape use those colours for all menu items. Using the 'menuid' and 'i' variables (to identify the menu and menu item currently being coloured, respectively) you can add if-else statements to use alternate colours for particular menus or menu items. If you want to take it to extremes, you could create an array to store all the colours to be used by all the menu items... but I think that would be overkill for most practical purposes.

3) I would like to know if it possible to make each menu a different width? As you can see from the mockup, each button is a different width, and I would like the menu's to be the same width. This one is not that important as I can change the images themselves if I need to.

Yes, it's possible, but again it's more than a matter of altering the CSS. Look for all the places in the JavaScript where the menuItemWidth and menuItemHeight variables are used. Those are the places where you'll have to get clever and make sure the values you want are used for the menus/menuitems you want.