If this has been asked and solved before then accept my apologies as I'm very new to this. I'm building a site using DW and don't use code at all. Everything looked fine on my machine but on other machines the screen seemed to resize and scroll-bars appeared - any idea why?

I put in a series of dropdown menus using Spry features - all worked fine. Then seemingly for no reason (I know there must be) the drop down menus seemed to convert themselves into a what could best be described as a bulleted list. I switched over to the code and have cut and pasted what was highlighted when I did that. Any help would be really appreciated.

thanks

<ul class="MenuBarHorizontal style1" id="MenuBar1">
          <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
              <ul>
                <li><a href="Aboutus.html">Our Team</a></li>
                <li><a href="Missionstatement.html">Mission Statement</a></li>
                <li><a href="Literature.html">Literature Download</a></li>
                <li><a href="Feedbackformpage.html">Feedback Form</a></li>
                <li><a href="careers.html">Careers</a></li>
              </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Our Services</a>
            <ul>
              <li><a href="Pensions.html">Pensions</a></li>
              <li><a href="Investments.html">Investments</a></li>
              <li><a href="Mortgages.html">Mortgages</a></li>
              <li><a href="Insurance.html">Insurance</a></li>
              <li><a href="Taxation.html">Taxation</a></li>
              <li><a href="Section481.html">Section 481</a></li>
              </ul>
            </li>
          <li><a href="Newspage.html">News</a>              </li>
          <li><a href="#" class="MenuBarItemSubmenu">Useful Links</a>
            <ul>
              <li><a href="LifeCompanies.html">Life Companies</a></li>
              <li><a href="">Financial Regulator</a></li>
              <li><a href="">Pensions Board</a></li>
              <li><a href="http://www.bloomberg.com/">Bloomberg</a></li>
              <li><a href="http://www.ise.ie/">Irish Stockmarket</a></li>
              <li><a href="http://www.revenue.ie/">Revenue</a></li>
              <li><a href="">Financial Ombudsman</a></li>
            </ul>
            </li>
          <li><a href="ContactUs.html">Contact Us</a></li>
          <li><a href="IndexHC.html">Home</a></li>
        </ul>

Dani AI

Generated

Two separate things are going on in the thread: the page sizing/scrollbars and the Spry dropdowns degrading to a bulleted list (as described). Building on the points raised by and , the dropdowns turning into a plain list almost always means the JavaScript/CSS that turns that UL into a menu never ran or the HTML was malformed so the script could not find the menu. Fixing that will also help make the layout behave more predictably across machines.

Quick diagnostic checklist (do these in order):

  • Verify Spry assets are actually on the server and referenced with correct site-relative paths (not local C:\ or file:// paths). Hosts that run Linux are case-sensitive, so filename case must match exactly.
  • Open developer tools (F12): check the Console for JS errors and the Network tab for 404s or blocked files (mixed HTTP/HTTPS can block scripts). Any error mentioning Spry or "ReferenceError" means the init script didn’t run.
  • Validate the HTML (unclosed tags or malformed attributes break DOM traversal). Use the W3C Markup Validation Service to catch these issues: W3C Markup Validation Service.
  • Inspect the menu element in the Elements/Inspector panel and look at computed styles. If the stylesheet that sets list-style: none is missing, the bullets remain.
  • Clear browser cache or test in a private window to rule out stale assets.

Fixes to try: re-upload the SpryAssets folder and correct broken href attributes or nested anchors, fix any validation errors, ensure the menu initialization script (the new Spry.Widget.MenuBar call) is present and not prevented by earlier JS errors, and confirm file permissions. If long-term maintenance is needed, consider replacing Spry with a modern, lightweight CSS/JS solution—but first get the Spry resources and markup correct so the dynamic behavior can run.

Recommended Answers

All 2 Replies

For the resizing, did you put in pixel sizes or percentages for the elements?

I dont do much in the way of drop downs or anything, but the code you have is for an unordered list with the list points. I have no idea why it would have done that.

The problem is that not all monitors have the same screen resolution. If you design a page to fit a certain screen resolution with absolute sizes, the following happen to the page:

- On monitors with lower resolutions, scrollbars will appear.

- On monitors with higher resolutions, the page will be in the upper left corner.

To make the pages more flexible for resolution changes, do the following:

- Use relative sizes and positioning. Usually this is a percentage of the width of the page.

- Don't use a page creator such as DW.

- It is impossible to exactly fit a page vertically for all monitors. Don't waste time trying. If you don't want scrollbars, don't put stuff near the bottom.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.