Member Avatar for KamiArmand

Hello,
I'm trying to make a spry menu bar for a website. It looks great in DW CS3, and when I preview it in different browsers, it works. However, once uploaded, when I look on the web, it's displaying in outline form rather than a menu. Why is that and how could it be fixed?

The website is here:

Thanks!

Kami

  • 4 Contributors
  • 5 Replies
  • 214 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by susamck

Dani AI

Generated

As correctly diagnosed, a Spry menu that shows up as a plain outline almost always means the browser never received the Spry CSS (or the Spry JS never ran). That can happen when the page still points to local disk files, when asset files weren’t uploaded, when filenames don’t match exactly on a case‑sensitive host, or when the browser reports 404/JS errors. Later posts from and suggest browser/IE differences, which usually trace back to the same asset-loading or initialization problems.

Practical checklist to resolve the outline display

  • Open the browser DevTools (F12). Look at Network for 404s and Console for JS errors. Missing or blocked .css/.js files are the main clue.
  • Type the CSS and JS asset URLs directly into the address bar (use the site/HTTP URL). Confirm each file returns and shows the expected content.
  • Verify all Spry asset files (both CSS files, the Spry JS, and any images referenced inside the CSS) are uploaded to the server and that the HTML uses HTTP-accessible relative/absolute paths — not local disk paths. Watch filename case: production servers are often case-sensitive.
  • Make sure the Spry script is loaded before any code that creates the menu, and that the widget initialization runs after the DOM is ready. A minimal initialization looks like:
<script>
new Spry.Widget.MenuBar("MenuBar1");
</script>
  • Clear the browser cache and test in another browser. Check the page DOCTYPE (use a standards DOCTYPE) — IE quirks mode can break layout. Also confirm the server is sending correct MIME types for .css and .js.

Summary: the outline is a symptom, not the disease. Fix the asset paths and ensure the Spry script runs after those files load; once CSS/JS are reachable and the widget is initialized, the Spry menu will render as intended.

Recommended Answers

All 5 Replies

Member Avatar for buddylee17

You are referencing your PC's C drive for the javascript and css sources:

<script src="[B]file:///C[/B]|/Documents and Settings/Armand/My Documents/Kami's Webpage/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="[B]file:///C[/B]|/Documents and Settings/Armand/My Documents/Kami's Webpage/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="[B]file:///C[/B]|/Documents and Settings/Armand/My Documents/Kami's Webpage/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

This will work fine when previewing locally, but once on the web server it will not.
If you haven't already done so, upload , MenuBarHorizontal.css, SpryMenuBarVertical.css. Then change the source for the page to the appropriate directory.

Member Avatar for KamiArmand

Thanks! I think I understand (I'm new at this)-- the problem is that once on the server, it doesn't know where to find those files because it can't see my C drive. To change the directory, do I just use the source code and delete everything between ////C and /SpryAssets? I can see the Spry Asset folder on the server, and can see the files you mention in there.

Thanks for your help!

You are referencing your PC's C drive for the javascript and css sources:

<script src="[B]file:///C[/B]|/Documents and Settings/Armand/My Documents/Kami's Webpage/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="[B]file:///C[/B]|/Documents and Settings/Armand/My Documents/Kami's Webpage/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="[B]file:///C[/B]|/Documents and Settings/Armand/My Documents/Kami's Webpage/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

This will work fine when previewing locally, but once on the web server it will not.
If you haven't already done so, upload , MenuBarHorizontal.css, SpryMenuBarVertical.css. Then change the source for the page to the appropriate directory.

Member Avatar for buddylee17

Yes, you have to point the browser to where the file is located on the server. If you're SpryAssets folder is in the same directory as the file then you can use:

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
Member Avatar for kendra88

Hi I am a student for becoming a web and graphic designer… I am having a little trouble on this website that I am working on right now. When I open the website up in dream weaver it works and then when I open it up in the preview it in the browser it also works, but when I place it on the server it doesn’t seem to want to work in Internet explore. But it works in Firefox. Also I have no idea why my drop down box wont work for the Treatments link? This is my first time with sub navigation bars so if you could help me out that would be great! Thanks
Kendra

Member Avatar for susamck

I am having the same trouble, only difference is that the menu is showing as an outline when previewing in both Firefox & IE from DreamWeaver.

I'm not sure what to do.

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.