Member Avatar for DGray678
DGray678 0 Newbie Poster

I have a Spry menu on this page: http://www.allaboutbags.ca/notmadeincanadamyth.html
when I view it in IE it is perfect (a straight black menu bar across the page) but when I view it in Firefox all the menu items are bumped to the right of the page stacked on top of each other...I'm not a programmer so I'm not sure what to do! Any help would be greatly appreciated!

  • 1 Contributor
  • 0 Replies
  • 99 Views

Dani AI

Generated

Spry MenuBars that look fine in IE but break in Firefox almost always come down to one of a few reproducible causes: the Spry CSS/JS files not loading or throwing errors, the page rendering in quirks mode due to a missing/incorrect DOCTYPE, or HTML/CSS that IE tolerates but Firefox enforces (unclosed tags or overriding rules). For the quickest path is a short, targeted checklist to identify which of those is happening.

Checklist to run in Firefox:

  • Open the Web Console (Ctrl+Shift+K) and look for JavaScript errors. A Spry initialization error will stop the menu behavior.
  • Use the Network/Inspector tools to confirm Spry assets (CSS and JS) return 200 and are the expected files and order.
  • Verify the page has a standards DOCTYPE (for example <!DOCTYPE html>). Quirks mode changes layout rules across browsers.
  • Run the markup through a validator to catch unclosed ul/li tags; broken HTML often causes vertical stacking in Firefox.
  • Inspect the computed styles for the ul, li, and a elements to see if float/display rules from Spry are being overridden by site CSS.

A small, safe CSS override that often restores a horizontal Spry menu if the Spry stylesheet is missing or overwritten:

/* force horizontal Spry menu */
ul.MenuBarHorizontal, ul.MenuBarHorizontal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.MenuBarHorizontal li {
  float: left;
}

ul.MenuBarHorizontal li a {
  display: block;
}

Notes and cautions: clear the browser cache after changes or append a version query string to Spry asset URLs to force reload. If SpryMenuBar.js still fails in Firefox, confirm the initialization call exists and runs after the DOM is ready. Spry is an older Adobe library and is no longer actively maintained; for long-term stability, consider migrating to a CSS-only menu or a modern, supported library.

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.