View Full Version : UDM4 Bug/Complaint re: Fixed width horizontal menu first level list items

04-18-2008, 01:26 AM
(NOTE: Fix has been found - see reply, further down)


It's maddening that in udm-custom.js, there is this line in // NAVBAR DEFAULT STYLES :

um.navbar = (array extraction) "117px", // width["em"|"ex"|"px"] (vertical navbar only - horizontal navbar items have "auto" width) ("%" doesn't work right)

Why, oh why is this restricted to vertical navbars only? Are us horizontal nav bar users being punished? It's not like this is that hard to take care of. I mean really! How hard is it to set a hard fixed width of first level li list items?

Just a further bit down the config file, you CAN set a fixed width for secondary and lower list elements, and if the text is too long then it just wraps inside the fixed width.

See this line which DOES work for adjusting horizontal width in // MENU DEFAULT STYLES:

um.menus= (array extraction) "107px", // width ["em"|"ex"|"px"]

Allright, so if UDM is so configurable (yet overly restraining), WHY allow one but not the other.

Here's what I am trying to do, done with the free son of suckerfish dropdown:
Note the pretty little controlled width squares?
Text wrapping/stacking is OK with me.
Not working in IE/Mac is not so OK with me, though... which brought me to UDM.

I really, really want to be able to do this in UDM. In fact, it's why I bought UDM! However, the closest UDM can get (using above quoted configuration) is as follows:

Config files are in http://dev.santafecreativetourism.org/udmsucks/

UDM DOES correctly set a fixed width for the child menus, but won't do it for the first level.

Is there any way that this behaviour can be achieved in UDM?

If not, are there any recommendations for a drop down script that can do this?


04-23-2008, 12:58 AM
Note that the UDM4 Developers provide just enough info in the FAQ to get one intro trouble... On the UDM4 FAQ page, http://www.udm4.com/manual/faq/ the very first Question is:

1. The width of the links in a horizontal nav seems to be "auto" - can I override those and set specific dimensions?

To which the (partially erroneous) answer supposedly is:

Yes, you can add individual widths by addressing the navbar links and list-items from external CSS - for example give each one a class or id attribute, then set the widths from a normal stylesheet. Please see the Individual item widths documentation for more information.

And, the link/example is given at:

It should be as simple as applying width to each link in the navbar, but in Opera 7.0 to 7.2 applying a fixed width to floated and positioned elements is problematic - the navbar might collapse, such that the links are all on top of each other. To avoid that we have to apply widths to the list-items as well as to the links; we can't apply them just to list-items, or it won't work in Opera 5. Phew!

However, on my test page,

The very last style on the page is:

ul#udm li a, ul#udm li { width:117px; }

and it didn't work - every single top level nav item just spaces out to whatever it damn well pleases.

Even tried highest specificity in-line CSS ala:

<li style="width:117px;"><a style="width:117px;" href="http://dev.santafecreativetourism.org/contact.html">Contact</a></li>

But no cigar.

The problem appears to be that fixed width li items works ONLY if your fixed-width size is LARGER (longer) than that necessary to display the textual copy.

For example, if on the above page I made the width 217px, then all items WOULD be the same width.

However, notice on my son of suckerfish (free) drop down example,
My desired behavior of truly fixed width works, and the text simply wraps inside the li to fit.

Thinking that maybe another culprit (in the encrypted and extremely - on purpose - difficult to decipher code) for this unintended no-wrap behavior might be the CSS white-space property, I tried:

ul#udm li a, ul#udm li {width:117px;white-space:normal;text-align:center;}

Voila - Problem fixed.

UDM - could you please update the answer in your FAQ to address the issue of white-space, CSS and wrapping text, when li 'buttons' are LESS wide than the total space available?