PVII Pop Menu Magic

User Guide Home :

editing menu widths:
variable horizontal root menu widths

This method describes how to set your top-level menu items so that they collapse to the natural width of the text inside them. This method is supported in all target browsers except Mac IE5, which will degrade to the default fixed width for the top-level items.

Step 1: Hide the width mod from Mac IE5

We'll create a rule that sets the root menu item width to auto and we'll use a filter hack to hide it from Mac IE5. Open your P7pm css file and make a new line at the bottom. Add this rule, including the comment:

/* The single backslash \ character inside this comment
causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width. */
#p7PMnav li {width: auto;}

The comment that precedes the above rule contains a backslash in the middle of the text. It is this backslash that serves to hide the rule from Mac IE5.

If you must support IE5 Mac, you can try this alternative technique.

Note: This rule is a duplicate. There already is a #p7PMnav li rule in your menu style sheet. Leave that rule alone as it is the rule that sets the default width for Mac IE5.

Step 2: Add a Conditional Comment for MSIE-Windows

We need to counteract the default Conditional Comment with the following one, which contains two simple rules.

<!--[if lte IE 6]>
<style>
#p7PMnav a {height: auto !important;}
#p7PMnav ul a {height: 1em !important;}
</style>
<![endif]-->

Place the above Conditional Comment just before your page's closing </head> tag.

Finished

That's it. Your top-level menu items will adjust to a natural width based on the amount of link text.

Next: Home