I'd like to add a drop-down menu on themebot.com. It needs to be light-weight and accessible for search engines. I've looked at Suckerfish, Suckerfish variations and other CSS-based drop down menus but I haven't found a technique that will work for this specific situation:

1. The first requirement is that the menu needs to be centered with something like

margin:0px auto;

. I can manually center the flat list by adding margin to the left side, but this will not work well because different browsers use different fonts and so the menu will be off-center in some browsers.

The second requirement is that the menu items need to all have the same amount of padding on the right and left sides. The dropdown menus I've seen that can be centered use a set width for the list items. This adds a lot of unnecessary padding. For example, the menu items "FAQ" and "Website Templates" will both have the same set width. This limits the number of top level menu items that can be added and doesn't look very good.

Does anyone know of a technique that works for both of the requirements above?

Thanks in advance!

For the first issue specify the font. You won't be able to control what everyone sees, but as long as you specify something common most people will see the same font.

What I've done with the extra padding issue is to set ids on specific dropdowns and then given them a different width than other sub menus. Your FAQ list will have one width while your 'website templates' list will use another width.

Add the id to the <ul> for the submenu and then you can style that one submenu different than the others.

Even if I specify the font family, Windows is going to be different than OSX which is going to be different than Linux. The block level item containing the menu needs to be automatically centered using either margin: 0 auto; or text-align: center;

Even if I specify the font family, Windows is going to be different than OSX which is going to be different than Linux.

Which is exactly why you specify more than one font and always include the plain vanilla serif or sans-serif as the last resort default.

I always specify fonts this way :
font: 100.01% Verdana, Arial, Georgia, Helvetica, sans-serif;

That pretty much hits most of the OS's included fonts for a sans-serif face.

Originally Posted by LadynRed

Which is exactly why you specify more than one font

Which is exactly why specifying a font won't work for this particular purpose. Different fonts have different character widths and letter spacings and will cause the navigation bar to be off center depending on the font that is installed on the user's operating system and the user's font preferences (when centering the menu using left margin). I'm beginning to think that a centered CSS dropdown menu with automatic menu item widths is impossible.

Is there a reason why the {margin: 0 auto} isn't working to center the menu?

The only way i've been able to get the menu item containers to autofit for each link anchor text is by applying "float:left;display:block;padding:0 7px" for all the <li> tags in the top level menu items. Then, of course, the <ul> containing all the menu items will not center with auto margins.

Then, of course, the <ul> containing all the menu items will not center with auto margins.

It will if you define a width for the UL.

As with many things to do with cross-browser compatibility, sometimes you have to be able to bend, to be a little bit more flexible. Pixel-perfection is nearly impossible, with browsers doing slightly different things and users doing wildly different things on top of that.

I think a great deal of your problem is you've got everything stuck in tables.

Originally Posted by LadynRed

As with many things to do with cross-browser compatibility, sometimes you have to be able to bend, to be a little bit more flexible.

Yep. I've touched my toes, i've touched my nose to my elbows, i've had both legs tucked behind my head and i still can't figure this one out :P

If I give the <ul> a set-width and fit it to the exact width of the menu, then there is going to be overflow for people with larger fonts. I'm thinking I will just reorganize the top level menus a bit so that the link text for each one is more equal in width, then set a fixed width for all the <li> menu items. This seems to be the simplest solution and will have the least amount of code bloat.

I've gotten rid of all the tables I have control over with the version of Joomla I am using with the site. Unfortunately, the core files would need to be hacked quite a bit to eliminate the rest of them. If and when I upgrade to Joomla 1.5, I'll be able to fix this.

Thanks for the ideas

I think I fully see the issue now. I'm not sure there's a good way to fix the font issue. I've used suckerfish on a few sites and yes if you resize the text some of the top level menu items want to drop to a second line as they exceed the width you set for the <ul>

It hasn't been an issue for the sites I've worked with. I think I've just left a little extra room so you can resize up once with the menu still working. At some point people will almost always be able to resize to things to where your page breaks. My goal is to keep the page together for a reasonable amount of increased font size.