AnyLink Vertical Menu text overlap issue

[craiged]

1) Script Title: AnyLink Vertical Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nkvertical.htm

3) Describe problem: I'm using an unordered list for the main links. When the default font size is increased in the browser in IE7 and Firefox, some of the text wraps beyond the height of the <li>, causing overlapping text. Any suggestions?

[jscheuer1]

Express the dimensions of the container in em's rather than px's. An em is roughly equivalent to the size of a character so will shrink and grow with text size changes. With a default font like times at its default size, it is also roughly equivalent to 16px. Fractional amounts of em's are allowed:

<div style="width:10.725em;">Some text</div>

If the dimensions you need to influence are set by the script, the script most likely would need to be modified to accommodate em's in place of px's but, perhaps not, only way to know is to try.

Also, in many cases, not specifying a width or specifying a larger value than could possibly be required, will create the conditions required to allow text to appear all on one line.

If following either of these strategies, it is important that there be no containing element with smaller dimensions around the element who's dimensions you are setting. The outer container will almost always set the dimensions for the inner element.

To be of more help, I would need a link to your page.

[craiged]

The problem, jscheuer1, is that there isn't enough room in the fixed-width template for the text to stay on one line in a larger font. Here is the page I'm working on: http://www.entrust.com/index.cfm

Thanks for your help on this.

[jscheuer1]

You're right. It is a problem due to your use of a fixed width template. Anything that doesn't fit and that has no way to wrap is getting squished. This has nothing much to do with the menu. If you want to use ul and li tags here, you need to find another template or modify this one to use relative widths, such as ems.

Or, if you don't mind the text wrapping, you could scrap the ul's and use div's in place of the li's.

[craiged]

div's, eh? I'll give that a shot. Thanks!