View Full Version : Wacky spry menu bar backwards and will not drop down

07-19-2010, 06:15 AM
Hi, thank you for reading my post. I just read the 10 commandments, however I am too late for that...

My spry menu will not drop down when uploaded onto my site, it is in bulleted form. When I view it in dreamweaver cs4 the menu is backwards (home page on the right, etc). When I preview it in IE, it is in the correct order and drops down.

Also, I managed to get a cool wiggly effect when I mouse over the menu, they move from right to left. I'd like to say that was on purpose.... :) How'd I do that? If you see any other things that will cause problems, please let me know. How do I view it in a browser other than IE? Maybe thats a silly question, sorry. I appreciate your help in advance. Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd (http://www.holly-parker.com)">
<html xmlns="[URL]http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Holly Parker - Fashion, Commercial, Swim, Runway Model Los Angeles</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="mainstyling" -->
<style type="text/css">
body {
font: georgia;
background: #FFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000;
font-family: "Forgotten Futurist Shadow";
background-image: url();
background-color: #000;
padding-top: 0px;
.oneColFixCtrHdr #container {
width: 1200px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #000000;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
color: #FFF;
.oneColFixCtrHdr #header {
padding-top: 5px;
padding-bottom: 0px;
color: #FFF;
background-color: #000;
position: static;
text-align: center;
.oneColFixCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
font-family: Tahoma, Geneva, sans-serif;
font-size: 60px;
color: #F39;
font-weight: bolder;
text-align: center;
margin-bottom: 0px;
.oneColFixCtrHdr #mainContent {
padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
font-family: "SF Foxboro Script";
color: #FFF;
font-size: 18px;
background-color: #000;
font-weight: bold;
text-align: center;
padding-top: 0px;
.oneColFixCtrHdr #footer {
padding: 0 10px;
color: #FCC;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
background-color: #000;
text-align: center;
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
font-size: 10px;
.navigation {
background-color: #000;
text-align: center;
float: right;
padding-left: 60px;
<!-- TemplateEndEditable -->
<script src="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<h1><img src="../images/holly-logo-top.jpg" width="875" height="139" /></h1>
<table width="800" border="0" cellspacing="0" cellpadding="4">
<td bgcolor="#FFE8FF" class="navigation"><!-- TemplateBeginEditable name="navieditable" -->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../index.html">MAIN</a></li>
<li><a href="../pone.html" class="MenuBarItemSubmenu MenuBarItemSubmenu">PHOTOS</a>
<li><a href="../pone.html">un</a></li>
<li><a href="../ptwo.html">deux</a></li>
<li><a href="../pthree.html">trois</a></li>
<li><a href="../pfour.html">quatre</a></li>
<li><a href="../pone.html">Un</a></li>
<li><a href="../ptwo.html">Deux</a></li>
<li><a href="../pthree.html">Trois</a></li>
<li><a href="../pfour.html">Quatre</a></li></ul>
<li><a href="../me.html">ME</a></li>
<li><a href="../connect.html">CONNECT</a></li>
<li><a href="../video.html">VIDEO</a></li><li>
<a href="../links.html">LINKS</a></li>
<!-- TemplateEndEditable --></td>
<!-- end #header -->
<div id="mainContent"><!-- TemplateBeginEditable name="bodyedit" -->
<p><img src="../images/holly-parker-pink-beauty-web.jpg" width="265" height="349" /></p>
<!-- TemplateEndEditable -->
<!-- end #mainContent --></div>
<div id="footer"><!-- TemplateBeginEditable name="footeredit" -->
<!-- TemplateEndEditable --></div></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

07-19-2010, 07:16 PM
You're javascript and css links are to files on your computer, so even if you fix things, it's not going to work online:

<script src="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

And, since it's a Spry menubar, we'd need to see your SpryMenuBarHorizontal.css file as well. The best thing would be to post your page online and then post a link here.

07-20-2010, 03:27 AM
Hi DW, thank you for your reply. I think thats exactly it, that the files are on my computer. When I go to the website on my computer the spry menu shows correctly except will not drop down, but on another computer all I get is the bullets. How do I save the css and java links in the correct place please?

Here is the link:

www.holly-parker.com (http://www.holly-parker.com)

I also created another website based on the same template, and uploaded it to a seperate folder so it can be previewed. Would this be causing problems? Im having the same issue with the spry menu on that page as well. Thank you again.

07-20-2010, 03:42 AM
where you have
<script src="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBar.js (http://www.dreamweaverclub.com/forum/view-source:file:///C%7C/Users/HOLLY/Desktop/Holly%20Parker%20Website/SpryAssets/SpryMenuBar.js)" type="text/javascript"></script>
<link href="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBarHorizontal.css (http://www.dreamweaverclub.com/forum/view-source:file:///C%7C/Users/HOLLY/Desktop/Holly%20Parker%20Website/SpryAssets/SpryMenuBarHorizontal.css)" rel="stylesheet" type="text/css" />

it should be
<script src="SpryAssets/SpryMenuBar.js (http://www.dreamweaverclub.com/forum/view-source:file:///C%7C/Users/HOLLY/Desktop/Holly%20Parker%20Website/SpryAssets/SpryMenuBar.js)" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css (http://www.dreamweaverclub.com/forum/view-source:file:///C%7C/Users/HOLLY/Desktop/Holly%20Parker%20Website/SpryAssets/SpryMenuBarHorizontal.css)" rel="stylesheet" type="text/css" />

this would be done automatically by DW if you define your site correctly, however if you correct that on your pages in code view it will correct it

07-20-2010, 04:17 AM
Thank you, I tried editing it in my code and it just gave me bullets everywhere. Is there a different procedure to getting my css and java scripts correctly defined? How do I define my site correctly? Sorry.
Thank you for your help.

07-20-2010, 05:42 AM
live its still the same . as for definitions there is a tutorial on this forum in tutorials (who'd a thought it),