[ Solved ] menu "wraps" unexpectedly

[snorkytheweasel]

Observe the menu on http://www.maryellenoconnor.com/docs/home.php

The menu was built using easy button & menu maker. The code is embedded in http://www.maryellenoconnor.com/docs/menu_top.inc, which is included in http://www.maryellenoconnor.com/docs/home.php

If you display http://www.maryellenoconnor.com/docs/menu_top.inc in the browser or in WeBuilder 2008, the menu displays as intended.
If you display http://www.maryellenoconnor.com/docs/home.php in the browser or in WeBuilder 2008, the menu displays wrapped.

I tried increasing the width of
<ul id="cbinsmenuebul_table" class="cbinsmenuebul_menulist" style="width: 703px; height: 35px;">
from 703px to 753px.

That didn't help.

What will it require to fix this?

[Karlis]

[EDITED]

[snorkytheweasel]

That fixed it. Thank you.

Easy Button & Menu Maker Rocks! You may quote me.

[snorkytheweasel]

Correction: it's not fixed.

I added another button to the beginning of the list. The I went through the process of saving the project and inserting the code. When I looked at the code, the last list item read <li>, not <li class="spaced_li">.

So it's not the drugs I've been taking. The code, as generated, had the error (bug?). And once again, the menu wrapped.

I corrected it as you suggested before, and as it worked before. Now it reads <li class="spaced_li">. However, the menu still wraps.

Whether the last list item reads

Code: Select all

  <li class="spaced_li">    <a><img id="cbi_cbinsmenu_7" src="images/ebbtcbinsmenu7_0.gif" name="ebbcbinsmenu_7" width="215" height="35" style="vertical-align: bottom;" border="0" alt="Workshops/Classes" title="" /></a></li>

or

Code: Select all

  <li>     <a><img id="cbi_cbinsmenu_7" src="images/ebbtcbinsmenu7_0.gif" name="ebbcbinsmenu_7" width="215" height="35" style="vertical-align: bottom;" border="0" alt="Workshops/Classes" title="" /></a></li>

[Karlis]

You got me confused There is no bug in the software and neither you did any mistakes while inserting the code.

The problem is in meo.css which takes controll of all p, li, td elements (even those internally belonging to the menus). Removing the following line seems to solve the conflict:

Code: Select all

padding:0 20px 0 50px;

Note, to have this padding set for the elements you need, better use classes instead.

[snorkytheweasel]

From meo.css I removed all references to lists and list items. That didn't stop the wrapping.

I've modified the project several different ways - including changing the order of the menu items - then saved the project and applied it to the website. None of those edits stopped the wrapping.

The only way that I've gotten the wrapping to stop is to eliminate a menu item.

On a possibly related note - every time I regenerate the code, the last list item reads
<li> instead of <li class="spaced_li">
Whether I leave it as generated, or add in the class data, makes no difference.

Is that an issue, or am I more confused than I thought?

Sorry to be such a bother.

[Karlis]

The code that is generated is correct, last item should be <li>.

If you tried removing the meo.css alltogether from your HTML and you would see that menu gets fixed once meo.css is no more present, so the conflict is there. I found out this using FireFox FireBug, it is not a guess.

Update: I can now see that you have updated CSS and also HTML (though that is not necessary) and all is fine both in IE and FireFox.

[snorkytheweasel]

Ah! The CSS!

When I removed the ID Selector for the <div id='menu-top' align="center">, the problem went away.

Thanks for your patience and help.