Spry Menu Bar not appearing on browsers

I created a web page using Dreamweaver CS5 and inserted a horizontal Spry Menu Bar on the page. I proceeded to modify the CSS to get the bar to appear as I wanted it. The bar looks great in Dreamweaver, including in Dreamweaver's 'Live View.'

When I uploaded the file to my web server and view in using various browsers, Firefox, Safari, or IE, the menu bar appears as a simple unordered list with no CSS style.

I have compared the HTML code generated by Dreamweaver when it creates the Spry Menu bar to sample coding on the ADOBE website and it appears correct. (Since Dreamweaver creates all the code automatically, I assume it would be.) I had made edits to the SpryMenuBarHorizontal.css style sheet when refining my Menu Bar, but nothing that should cause the problems I'm experiencing.
In order to verify that I did not mess something up, I deleted the style sheet I had edited and had Dreamweaver create a new one in connection with creating a new HTML page that I created to have no coding on it except for coding that would generated by Dreamweaver to create the Spry Menu Bar. Once again the same result, the Spry Menu Bar shows on Dreamweaver, but not on any Browsers. (I did verify that the browsers were set to run JavaScript since Java Script is needed to generate the menu bar).

In summary, after creating a web page with a Spry Menu Bar that appeared on browsers as an vertical unordered list with no CSS, I deleted the style sheet, and created a new bare-bones html file that contained nothing but Dreamweaver generated code to create a Spry Horizontal Menu Bar that referenced a new unedited Dreamweaver style sheet related to Spry Horizontal Menu Bars. The same problem, but since for the second try I did no editing to the html or the style sheet, I appear to rule myself out as the problem.

Since JavaScript is needed to create the Spry Menu Bar, I verified that JavaScript was running on the browsers. I also verified that the style sheets were uploaded to the remote site and that the paths referencing them in the html were correct. (Since I use Dreamweaver to upload, they have always been correct in the past..)

Attached are three files, all in Word.doc format:

1.  html code for spry menu bar.doc - This is the html file created by Dreamweaver of the bare bones file I created to troubleshoot the problem. The only code in the body section relates to the code generated by Dreamweaver to set up the Spry Menu Bar.

2.  SpryMenuBarHorizontal_css.doc - This the style sheet SpryMenuBarHorizontal.css file created by Dreamweaver. It does reflect changes I made styling my bar. But as stated above, when I removed this file and had Dreamweaver recreate one, applying the unedited style sheet did not correct the problem. Therefore I restored my edited style sheet since the style sheet does not appear to be the problem.

3.  SpryMenuBar_js.doc - This is a file referenced in the html related to the Spry Menu Bar. I made no edits to this file.
The previous two files are located in the SpryAssets folder. The other files in the SpryAssets folder are .gif files which are not necessary to post as part of this question.

 html-code-for-spry-menu-bar.doc SpryMenuBar-js.doc SpryMenuBarHorizontal-css.doc
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineDon't talk to me.Commented:
Hi dltcpa,

Is it possible to also get a link for testing?
Hagay MandelCommented:
Please provide a link
Jason C. LevineDon't talk to me.Commented:
Typically when something reverts to its list form, its because the CSS file is in the wrong place or linked wrong.  With a testing link, we'll be able to tell you what is going on more or less instantly.
Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

stu215Systems Analyst/Project Manager/ProgrammerCommented:
When i copied and pasted your "html-code-for-spry-menu-bar.doc" into a blank .html file pointing to my SpryAssets dir it worked fine.

Did you check to make sure your references to the SpryAssets folder/files are correct:

NOTE:: your doctype tag at the top of that file is messed up

It should be :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

LIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head><!DOCTYPE html PUB

Open in new window

stu215Systems Analyst/Project Manager/ProgrammerCommented:
In addition i also put your .css and your .js file in the same directory and it worked fine:

Try putting the files you modded in the same directory and use these tags at the top instead of what you have.

<script src="SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
stu215Systems Analyst/Project Manager/ProgrammerCommented:
Err you wil also need to make sure the images reffered to are pointing to the correct place wherever you put them:

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
dltcpaAuthor Commented:
Several respondents are asking for a testing link. I'm not sure what you want a link to, so I will give you a link to the webpage that I am having the problem with. If this is not what you mean, please advise. http://www.thejaxshopper.com

This is the first page I am setting up for this site, so no outgoing links from that page have yet been set up.

Also, since none of the browsers show the Spry MenuBar, I thought maybe the problem is with my web hosting server POWEB. Is is possible that my subscription does not include running Java on their server? I have not yet contacted them since this just occurred to me.
stu215Systems Analyst/Project Manager/ProgrammerCommented:
That page you gave a link to is on the root level of your website yet all the links to spry stuff start with ../../  :


Do you have your SpryAssets folder outside the webroot?

dltcpaAuthor Commented:
No, the Spry assets folder is not outside the root. There are actually five websites, four of which are in subfolders of the root. That is why the .../.../ is included in the path. This is how Dreamweaver set up the path. I had also thought this might be the problem before I posted my problem on Experts-Exchange, so I did try editing the paths by removing the .../... , but that did not help
Hagay MandelCommented:
Look carefully, this is your css file
stu215Systems Analyst/Project Manager/ProgrammerCommented:
On a side note: Javascript is a client side language so i dont think it has anything to do with your provider.
dltcpaAuthor Commented:
RE HagayMadel posting 35351501 - I don't understand the comment, the style sheet (.css file) is not a web page

RE stu215 posting 35351531 - I check with POWEB and they said the problem is not with them.
stu215Systems Analyst/Project Manager/ProgrammerCommented:
All files processed by your webserver still need to be viewable by it.

If the browser returns "Page Not Found" then your paths to the files are incorrect and are not being processed.
Hagay MandelCommented:
The given path to JS & CSS files is wrong!!
This is the source of your file (part of the head section)

<link href="css/thrColFixHdr.css" rel="stylesheet" type="text/css">

only the first link is valid, the other two lead to 404 page!
Simply put SpryMenuBar.js and SpryMenuBarHorizontal.css files in folder in your root  (for example:http://www.thejaxshopper.com/sprymenubar) and change the links accordingly:

<script src="sprymenubar/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="sprymenubar/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
stu215Systems Analyst/Project Manager/ProgrammerCommented:
Did you make sure that the SpryAssets files exist on your server in the specified path and that your not just looking at the local copy in dreamweaver?
Jason C. LevineDon't talk to me.Commented:
>> This is how Dreamweaver set up the path

Are you managing five different web sites (domain names) as one DW Site Definition?  If so, the DW wrote the path "correctly" given what you told it to do but you didn't set up DW correctly so the paths on the server are incorrect.

A DW site definition should handle one domain name and you must set up the folders from the public web root and mirror that on the local drive.  Only then will DW write paths correctly.
Jason C. LevineDon't talk to me.Commented:
>> RE HagayMadel posting 35351501 - I don't understand the comment, the style sheet (.css file) is not a web page

Doesn't matter.  It's a plain text file so it can be accessed and seen through a browser.  The point is, the files are not where the page expects them to be given the paths being written.

>> RE stu215 posting 35351531 - I check with POWEB and they said the problem is not with them.

No, this issue is not with your provider.  This is a simple issue that's probably stemming from an incorrect site definition in DW.
dltcpaAuthor Commented:
I edited the paths as suggested to start with sprymenubar/SpryAssets/...  That did NOT work. Then I tried starting the path with SpryAssets/... and that DID work. Dreamweaver had originally written the code as ../../SpryAssets/   This apparently did not work because my Dreamweaver site actually contains 5 websites, a main one in the root, and subsites in folders under that main site.
Jason C. LevineDon't talk to me.Commented:
Which means you really should have split the points between the Experts as we all provided a piece of the solution for you.
stu215Systems Analyst/Project Manager/ProgrammerCommented:
Doh, that was suggested earlier too:
Comments: 35346713 & 35346724
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Dreamweaver

From novice to tech pro — start learning today.