Help with menu code

**bbs914** · 12-11-2009, 04:18 PM

I'm experiencing issues with the menu code that I used from DD. Apparently, it's not working in several browsers. Would anyone mind taking a look and see what I am missing? Individuals have contacted us indicating that the submenu does'nt display properly or when they are hovering over an item on the main menu and the submenu list pops out, it disappears as they try to select an item from it. I do not know what browsers they are using, but something is amiss. Any help would be GREATLY appreciated.
Thank you!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="Content-Type">
  <link rel="stylesheet" href="fmtstylesheet1.css"
 type="text/css">
</head>
<body>
<table class="global" border="0" cellpadding="0"
 cellspacing="2">
  <tbody>
    <tr>
      <td style="width: 18px;" colspan="3" height="127"><!-- ======Header section ============== -->
      <table class="header" border="0" cellspacing="0">
        <tbody>
          <tr>
<!-- ============ Logo ============== -->
            <td style="width: 100%;">
            <div
 style="display: table; margin-left: 20px; margin-top: 20px;">&nbsp;</div>
            </td>
          </tr>
        </tbody>
      </table>
      <div
 style="background: rgb(40, 65, 81) none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 1px;"><br>
      </div>
<!-- ============ Navbar Menu ============== -->
      <table class="navbar" border="0" cellspacing="0">
        <tbody>
          <tr>
            <td>
            <table
 style="background-color: rgb(35, 91, 174); height: 20px; text-align: left; margin-left: auto; margin-right: auto;"
 class="navbarmenu" border="0">
              <tbody>
                <tr>
                  <td
 style="vertical-align: middle; text-align: center; color: white;"><a
 href="http://www.fairmont.org/chamber/home.htm">Chamber of
Commerce</a><span style="text-decoration: underline;"></span></td>
                  <td style="color: white;"><a
 href="http://www.fairmontcvb.com/RunScript.asp?p=ASP%5CPg0.asp">Convention
&amp; Visitors Bureau</a>&nbsp; </td>
                  <td style="color: white;"><a
 href="http://www.fairmont.org/docs/ecodevo.htm">Economic
Development</a> </td>
                  <td style="text-align: center; color: white;"><a
 href="https://www.minnesotaworks.net/searchresult.aspx?zip=56031">Jobs</a></td>
                  <td align="undefined" valign="undefined"></td>
                  <td align="undefined" valign="undefined"></td>
                  <td align="undefined" valign="undefined"></td>
                </tr>
              </tbody>
            </table>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
<!-- ============ COLUMNS SECTION ============== -->
<!-- ============ Left Column ============== --><tr>
      <td class="left" align="center" width="220">
      <div id="menucontainer">
      <div id="menucontainer ul">
      <ul>
        <li><a class="button" href="residents.htm">Residents</a>
        </li>
        <li><a href="visitors.htm">Visitors</a>
        </li>
        <li><a href="business.htm">Business</a>
        </li>
        <li><a href="http://www.fairmont.org">Home</a></li>
        <li><a
 href="http://cityoffairmont.revtrak.net/tek9.asp">On-line
Payments</a></li>
        <li><a>What's New?</a>
          <ul>
            <li><a href="fmtnewsletters.htm">
City
Newsletters</a></li>
            <li><a href="fmtnews.htm">
General
Information</a></li>
          </ul>
        </li>
        <li><a href="fmtair.htm">
Fairmont Regional Airport</a></li>
        <li><a>Agendas &amp;
Minutes</a>
          <ul>
            <li><a href="fmtagmin.htm">Agendas</a></li>
            <li><a href="fmtagmin.htm">Minutes
              </a></li>
          </ul>
        </li>
        <li><a>Applications &amp; Forms</a>
          <ul>
            <li><a href="otherforms.htm">Other
Applications &amp; Forms</a>
            </li>
            <li><a href="permits.htm">Permits</a></li>
            <li><a href="utilityrebates.html">Utility
Rebates</a></li>
          </ul>
        </li>
        <li><a> Boards &amp; Commissions</a>
          <ul>
            <li><a href="fmtairportadvisory.htm">
Airport
Advisory Board</a></li>
            <li><a href="fmthrc.htm">
Human Rights Commission</a></li>
            <li><a href="fmtparkboard.htm">
Park Board</a></li>
            <li><a href="fmtplanning.htm">
Planning Commission</a></li>
            <li><a href="puccomm.htm"> Public
Utility
Commission</a></li>
            <li><a href="fmtsafety.htm">
Safety
Council</a></li>
          </ul>
        </li>
        <li><a
 href="http://www.municode.com/Resources/gateway.asp?pid=10755&amp;sid=23">City
Code</a></li>
        <li><a>City Departments</a>
          <ul>
            <li><a href="fmtcitystaff.htm">
City Staff</a></li>
            <li><a href="fmtadmin.htm">Administration</a></li>
            <li><a href="fmtecd.htm">Economic
Development</a></li>
            <li><a href="fmtfinance.htm">Finance</a></li>
            <li><a href="fmtengineer.htm">Engineering</a></li>
            <li><a href="fmtit.htm">Information
Technology</a></li>
            <li><a href="fmtinspection.htm">Inspection</a></li>
            <li><a href="publicsafety.htm">Public
Safety</a></li>
            <li><a href="pucintro.htm">Public
Utilities</a></li>
            <li><a href="publicworks.htm">
Public
Works</a>
            </li>
          </ul>
        </li>
        <li><a> Community Information</a>
          <ul>
            <li><a> Arts </a>
              <ul>
                <li><a href="http://ourstorymn.com/index.html">
Fairmont Film Society</a></li>
                <li><a
 href="http://www.fairmontoperahouse.com/">
Fairmont Opera House</a></li>
                <li><a
 href="http://www.martincountypreservation.org/redrock/index.html">
Red Rock Center</a></li>
              </ul>
            </li>
            <li><a
 href="http://www.fairmont.org/chamber/Community%20Directory.pdf">Community
Directory</a></li>
            <li><a
 href="http://www.fairmont.org/chamber/brochures.htm">
Dining
              </a></li>
            <li><a href="fmtedu.htm">
Education</a></li>
            <li><a
 href="http://www.fairmont.org/chamber/mcarea.htm">
Events &amp; Attractions</a></li>
            <li><a href="fmthelth.htm">
Health
Care</a></li>
            <li><a href="fmtsites.htm">
Historical
Sites</a></li>
            <li><a href="fmthist.htm">
History
of
Fairmont</a></li>
            <li><a href="links.htm"> Links of
Interest </a></li>
            <li><a
 href="http://www.fairmont.org/chamber/brochures.htm">
Lodging </a></li>
            <li><a
 href="http://www.martincountylibrarysystem.org">
Martin County Library</a></li>
            <li><a href="hhw2009.pdf"> Solid
Waste
Collection&nbsp;</a></li>
            <li><a href="fmtshop.htm">
Shopping
              </a></li>
            <li><a
 href="http://www.fairmont.org/chamber/brochures.htm">
Transportation </a></li>
            <li><a href="fmtworsh.htm">
Worship
Opportunities</a></li>
          </ul>
        </li>
        <li><a> Community Links </a>
          <ul>
            <li><a href="links.htm"> Area
Links
of
Interest</a></li>
            <li><a
 href="http://www.state.mn.us/portal/mn/jsp/home.do?agency=NorthStar">State
of Minnesota </a></li>
            <li><a href="http://www.co.martin.mn.us/">
Martin
County</a></li>
          </ul>
        </li>
        <li><a href="fmtofficials.htm"> City
Officials</a></li>
        <li><a> Employment</a>
          <ul>
            <li><a href="fmtemployment.htm">
City of
Fairmont</a></li>
            <li><a href="http://www.mnwfc.org/">
MN
Workforce Center</a></li>
          </ul>
        </li>
        <li><a href="fmtofficialdocuments.htm">
Official
Documents</a></li>
        <li><a href="docs/votinginformation.htm">Voting
Information</a>
          <ul>
            <li><a href="pollinglocations.htm">Polling
Locations</a></li>
            <li><a
 href="http://www.co.martin.mn.us/Maps/2008%20Fairmont_Election_Map.pdf">Ward
Map</a></li>
          </ul>
        </li>
        <li><a href="docs/aboutus.htm">About Us</a>
          <ul>
            <li><a href="fmtcable.htm">Cable
Channel</a></li>
            <li><a href="fmtmaps.htm">Maps</a></li>
            <li><a href="staffinfo.htm">Staff
Information</a></li>
          </ul>
        </li>
        <li><a href="search.htm">Search</a></li>
      </ul>
      </div>
<!-- ============ Extra Block below Photo ============== --></div>
      </td>
<!-- ============ Content Column (Middle) ============== -->
      <td class="content padded"
 style="width: 685px; vertical-align: top;">
      <h1 class="headingstyle">Finance</h1>
      <br>
      <p>Finance Director Paul Hoye</p>
      <p><span
 <br>
      </p>
      </td>
<!-- ============ Right Column ============== -->
      <td style="width: 18px;" class="right padded"><br>
      </td>
    </tr>
<!-- ============ Footer ============== --><tr>
      <td colspan="3" class="footer"
 style="vertical-align: middle; width: 18px;">City of
Fairmont © 2009 &nbsp; ¦ &nbsp; 100 Downtown Plaza Fairmont, MN
&nbsp;56031 &nbsp; ¦ &nbsp; (507) 238-9461 &nbsp; ¦
&nbsp; <a href="docs/policy.htm">Privacy
Policy</a>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

**jscheuer1** · 12-11-2009, 05:17 PM

Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

So what script is this exactly? Also:

Please post a link to the page on your site that contains the problematic code so we can check it out.

And:

Your code is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

**bbs914** · 12-11-2009, 08:48 PM

I apologize for the lack of information when posting on this forum. I am new to all of this (using a forum, etc), so please bear with me. Thank you for the information. I am working with a new program to create a website - - and am learning the ins and outs of it. Anyway, I believe to have adhered to the policy regarding the credits. Please check out our home page to see if that is correct. I will then make the necessary changes to all the pages if needed. If not let me know and I will add whatever we need too to get this straight.
The webpage is www.fairmont.org. If you would like to see the css sheet, let me know and I can post that. I do not have any scripts or anything like that. The menu is lovely and works well, however one person sent the following message regarding the menu.

The problem was that when she held the mouse over “Agendas & Minutes” you could see the two choices off to the right but when you moved your mouse over to click on them they disappeared. They are still doing that to me today but I see that if I right click on “agendas and minutes” it holds the two choices and I can click on “minutes.”

Any help would be greatly appreciated. Thank you jscheuer1.

**jscheuer1** · 12-12-2009, 02:04 AM

Don't worry about all that stuff too much. You're new here. I know that. I just wanted you to know the guidelines for any future posts. I also wanted to know where on DD you got this code, but I guess that's not so important right now. However, if you did get this code from DD and it had a credit notice, I'm not seeing the notice. If the code has one, it should be in the source code of the page using the code.

All that said, what this person saw only appears to be a problem in IE. It looks like it can be fixed by adding one directive (highlighted) to your stylesheet:

Code:

#menucontainer ul ul {
  visibility: hidden;
  position: absolute;
  margin-top: -2em;
  width: 95%;
  margin-left: 3em;
  left: 0;
}

This is actually the default for other browsers, so should not adversely affect them.

**bbs914** · 12-14-2009, 01:25 PM

Thank you for the help and information. I greaty appreciate it! We'll give that a try. Do you mind if I would contact you with any other concerns that I experience? Thank you again!

That is funny with the source information not appearing. I will try it again. Otherwise, I too can try to place it in the css sheet.

Thank you so much!

**jscheuer1** · 12-14-2009, 02:28 PM

Um, if you have more questions related to this, ask here in this thread. Otherwise, start a new thread.

**bbs914** · 12-15-2009, 02:48 PM

I now noticed that the submenu, when visible is displaying behind an object I have positioned below the main menu. I have viewed various sites on floating objects, but not of those tips work with my site. Any ideas?

**jscheuer1** · 12-15-2009, 03:32 PM

Add this (highlighted) to your stylesheet:

Code:

#menucontainer ul ul {
  visibility: hidden;
  position: absolute;
  margin-top: -2em;
  width: 95%;
  margin-left: 3em;
  left: 0;
  z-index: 2;
}

Notes: These aren't really "floating", in that their style isn't float:left; or float:right;. They are elements with positioning set to other than position:static; (the default). Because of this they will appear to stack when portions of each try to occupy the same spot. The z-ndex governs which will be on top in those situations. The higher z-index (default here is 0) will stack on top of the lower z-index. If none is specified, later objects will stack on top of earlier objects.

**bbs914** · 12-15-2009, 05:41 PM

THANK YOU JSCHEUER1! It worked perfectly and the menu looks great! I appreciate all of your help! THANKS!!!

**bbs914** · 12-16-2009, 08:23 PM

I have a co-worker who was trying to view the website - - for some odd reason the header doesn't automatically adjust to fit her screen - - anyway, after we adjusted her resolution the site appeared fine - however she was not able to have the submenu even appear when scrolling over menu items that had "submenu" items. Do you know why this would be?