close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

multiple menus overlap on left hand side of webpage

Thread began 2/22/2010 1:39 pm by Alan Winthrop | Last modified 2/24/2010 10:36 am by Alan Winthrop | 963 views | 5 replies |

Alan Winthrop

multiple menus overlap on left hand side of webpage

Hello,

I am seeking some help, I use siteassist pro template and menu writer to build my site in Dreamweaver CS3 on a PC with windows XP. Internet explorer 8.

My site had displayed perfectly for me in IE8 with correct menu functions and spacing.

Uploaded my site today, however the left hand side navigation does not display correctly.
Direct link to site www.triplantanol.com

This applies to all pages of my website.

Understanding that one could use multiple menus, I added x3, complete with different colour themes, for navigation to my templates on LHS.

To space each I inserted table between each...here is code for the first top table.<table width="100%" height="41" border="0" cellpadding="0" cellspacing="5" bordercolor="#ECE9D8" bgcolor="#D4E5FF">
<tr
This allowed spacing and stopped overlap when building the site.

This clearly cannot have been the correct approach, and now after uploading, the top menu displays, but the middle and lower menu displays only reveal when a mouse is placed over them.
They have lost their spatial separation and overlap.

Could you kindly advise how I may be able to correct this.
I would like to preserve the three distinct menus rather than make a long one.

Sorry I am only a beginner at CSS and Dreamweaver CS3 so simple instructions would be greatly appreciated.

Your help is much appreciated.
With regards
Alan

Sign in to reply to this post

Alan Winthrop

just to add

Follow up...I have uploaded my site x2 to see if that solved the problem, before I posted here, but it did not help.

There are x3 menus on the left hand side.

Many Thanks.

Sign in to reply to this post

neilo

Hi Alan,

You have to close your unordered list lags for each CSSMenuWriter instance, otherwise the three sections are being controlled by one, two and three css files respectively.

The </ul> is missing from each menu section:

<ul class="level-0" id="cssmw0">
<li><span><a href="basicguide.html">Basic guide</a></span></li>
<li><span><a href="rateofuse.html">Rate of use</a></span></li>
<li><span><a href="grow_organic.html">Grow organic</a></span></li>
<li><span><a href="grow_orchids.html">Grow orchids</a></span></li>
<li><span><a href="detailiedguide.html">Detailed guide</a></span></li>
<li><span><a href="biggerleaves.html">Bigger plants</a></span></li>
<li><span><a href="biggerleaves.html">Bigger leaves</a></span></li>
<li><span><a href="more flowers.html">More flowers</a></span></li>
<li><span><a href="flowershape.html">Flower shape</a></span></li>
<li><span><a href="exotics.html">Exotics</a></span></li>
<li><span><a href="science.html">Science</a></span></li>
<li><span><a href="specialistplants.html">Specialist plants</a></span></li>
<li><span><a href="indoor.html">Indoor</a></span></li>
<li><span><a href="outdoor.html">Outdoor</a></span></li>
</ul>



Releasing each menu block to its own CSS and js files may upset some of the styling you've done, but once separated the whole thing will respond properly to any changes you make in the future!

Add:

You should also remove the height: 30px; from the 'ul#cssmw rules' in your stylesheets.

ul#cssmw {
background-image: url("../cssmw_images/bg.jpg");
background-repeat: repeat-x;
cursor: default;
height: 30px; // remove this
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 0;
}

Sign in to reply to this post

Alan Winthrop

afraid that did not work

Hello neilo,

Thank you for getting back to me.

I removed the 30px; from the 'ul#cssmw rules' and replaced that value with 0

However when I added </ul> to the menu, below the first good menu at the top of LHS and also repeated it for the lower menu it rendered the display as
a list of menu lines as text down the LHS.

Here is the code to compare with my uploaded pages.

<ul class="level-0" id="cssmw">
<li><span><span><a href="../standard.html">standard</a></span></span></li>
<li><span><span><a href="../organic.html">organic</a></span></span></li>
<li><span><span><a href="../orchid.html">orchid</a></span></span></li>
<table width="100%" height="42" border="0" cellpadding="0" cellspacing="5" bordercolor="#ECE9D8" bgcolor="#D4E5FF">
<tr>
<td height="31">&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>

<p>
</ul class="level-0" id="cssmw0">
<li><span><span><a href="../basicguide.html">Basic guide</a></span></span></li>
<li><span><span><a href="../rateofuse.html">Rate of use</a></span></span></li>
<li><span><span><a href="../grow_organic.html">Grow organic</a></span></span></li>
<li><span><span><a href="../grow_orchids.html">Grow orchids</a></span></span></li>
<li><span><span><a href="../detailiedguide.html">Detailed guide</a></span></span></li>
<li><span><span><a href="../biggerleaves.html">Bigger plants</a></span></span></li>
<li><span><span><a href="../biggerleaves.html">Bigger leaves</a></span></span></li>
<li><span><span><a href="../more flowers.html">More flowers</a></span></span></li>
<li><span><span><a href="../flowershape.html">Flower shape</a></span></span></li>
<li><span><span><a href="../exotics.html">Exotics</a></span></span></li>
<li><span><span><a href="../science.html">Science</a></span></span></li>
<li><span><span><a href="../specialistplants.html">Specialist plants</a></span></span></li>
<li><span><span><a href="../indoor.html">Indoor</a></span></span></li>
<li><span><span><a href="../outdoor.html">Outdoor</a></span></span></li>
<table width="99%" height="49" border="0" cellpadding="0" cellspacing="5">
<tr>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;
</ul class="level-0" id="cssmw3">
<li><span><span><a href="../links.html">Links</a></span></span></li>
<li><span><span><a href="../feedback.html">Feedback</a></span></span></li>
<li><span><span><a href="../award_publicity.html">Award publicity</a></span></span></li>
<li><span><span><a href="../searchsite.html">Site search</a></span></span></li>
<li><span><span><a href="../webfeeds.html">Webfeeds XML</a></span></span></li>
<li><span><span><a href="../sitemap.xml">Site map</a></span></span></li>
<li><span><span><a href="../enquiries.html">Enquiries</a></span></span></li>
</ul>
<script t

I clearly must have done something wrong...I did not proceed beyond this point.

With regard the problem of menu displaying and overlapping, strangely it only seems to be a problem when viewing my site in OE8 compatability view. When compatability view is switched off it does not happen. It also displays fine in OE7.

However I would like to resolve the problem so the menu's display as one.

With regards
Alan

Sign in to reply to this post

Eric Mittman

You ending unordered list tags do not appear to be in the correct location, it should look more like this:

html:
<ul class="level-0" id="cssmw">
<li><span><span><a href="../standard.html">standard</a></span></span></li>
<li><span><span><a href="../organic.html">organic</a></span></span></li>
<li><span><span><a href="../orchid.html">orchid</a></span></span></li>
</ul>
<table width="100%" height="42" border="0" cellpadding="0" cellspacing="5" bordercolor="#ECE9D8" bgcolor="#D4E5FF">
<tr>
<td height="31">&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>

<p>
<ul class="level-0" id="cssmw0">
<li><span><span><a href="../basicguide.html">Basic guide</a></span></span></li>
<li><span><span><a href="../rateofuse.html">Rate of use</a></span></span></li>
<li><span><span><a href="../grow_organic.html">Grow organic</a></span></span></li>
<li><span><span><a href="../grow_orchids.html">Grow orchids</a></span></span></li>
<li><span><span><a href="../detailiedguide.html">Detailed guide</a></span></span></li>
<li><span><span><a href="../biggerleaves.html">Bigger plants</a></span></span></li>
<li><span><span><a href="../biggerleaves.html">Bigger leaves</a></span></span></li>
<li><span><span><a href="../more flowers.html">More flowers</a></span></span></li>
<li><span><span><a href="../flowershape.html">Flower shape</a></span></span></li>
<li><span><span><a href="../exotics.html">Exotics</a></span></span></li>
<li><span><span><a href="../science.html">Science</a></span></span></li>
<li><span><span><a href="../specialistplants.html">Specialist plants</a></span></span></li>
<li><span><span><a href="../indoor.html">Indoor</a></span></span></li>
<li><span><span><a href="../outdoor.html">Outdoor</a></span></span></li>
</ul>
<table width="99%" height="49" border="0" cellpadding="0" cellspacing="5">
<tr>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;
<ul class="level-0" id="cssmw3">
<li><span><span><a href="../links.html">Links</a></span></span></li>
<li><span><span><a href="../feedback.html">Feedback</a></span></span></li>
<li><span><span><a href="../award_publicity.html">Award publicity</a></span></span></li>
<li><span><span><a href="../searchsite.html">Site search</a></span></span></li>
<li><span><span><a href="../webfeeds.html">Webfeeds XML</a></span></span></li>
<li><span><span><a href="../sitemap.xml">Site map</a></span></span></li>
<li><span><span><a href="../enquiries.html">Enquiries</a></span></span></li>
</ul>



This should be very close to the way the code was written from the tool originally. When you have an unordered list it should be setup like this:

html:
<ul> <!-- opening unordered list -->
<li> <!-- opening tag for list item --> </li> <!-- closing tag for li -->
</ul> <!-- closing tag for the unordered list -->
Sign in to reply to this post

Alan Winthrop

thanks

Hi Eric and neilo,

Thank you for the follow up and making things clearer.

I have replaced the code directly by pasting into CS3, to make sure it was correct and uploaded to my site.

However it has not resolved the problem with overlapping in IE8 compatability view.
Also repeated refreshing of the menu causes additional problems on the live site, which is worse than before.

I have now reverted to the orginal upload.

So I have decided to think afresh again and will go with a simpler menu system and
abandon multiple menus in LHS column. I did not want to risk customers dissapearing
as they get impatient.

Thank you all the same for your time and attention.

With regards
Alan

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...