Spry menu broken links

Hi,
i am working on a web site in which drop down menu bar is required.
I inserted the spry menu and linked all the tabs to their respective pages.the linked pages are in the same folder as the index file.path being-
c:/..doccuments/site name/xyz.html
now when i preview any page in my browser(chrome,IE,opera),the links work on the first click.if i try to navigete to the same page again,it shows a message 'No webpage was found for the web address: file:///C:/.../Documents/pagename.html'
now when i check again,dreamweaver shows the paths to be of the form 'c:/..my doccuments/site name/xyz.html'
but the browser is trying to search for the pages in folder 'Doccuments' and not 'Doccuments/sitename'
any help would be great.
thank u.
vijay ramaswamy
[email protected]

Try this:
ul.MenuBarHorizontal {
     cursor:default;
     font-size:100%;
     list-style-type:none;
     margin:-34px 0 0 95px;
     padding:0;
     width:600px;
ul.MenuBarHorizontal li {
     cursor:pointer;
     display:block;
     float:left;
     font-family:Verdana,Arial,Helvetica,sans-serif;
     font-size:11px;
     font-weight:normal;
     height:18px;
     list-style-type:none;
     margin:0;
     padding:0;
     position:relative;
     text-align:left;
     width:auto;
ul.MenuBarHorizontal a {
     background-image:url(navTitle_menuBkgd.gif);
     color:#000000;
     cursor:pointer;
     display:block;
     height:18px;
     padding:0 15px;
     text-decoration:none;

Similar Messages

  • Spry Menu Bar link colors not consistent

    I have a horizontal Spry menu bar set up with 4 items in it.
    The first item is the Home link and does not have a submenu, but
    the other 3 items do. What I want is when you roll over the main 4
    items the text link color will be purple (#583399). When an item
    has a submenu the rollover text link on the submenu links will be
    green (#89b11a).
    My current code almost works, but the problem I am having is
    that the Home link
    without the submenu changes to a green color instead of
    purple like the other 3 main links. If I add a test submenu to the
    Home link then it turns purple like the other links. How can I get
    the Home link to change to purple like the others without having a
    submenu attached to it?
    Here is my html code that refers to the menu:
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html"
    class="MenuBarItemSubmenu">HOME</a></li>
    <li><a href="about.html"
    class="MenuBarItemSubmenu">ABOUT</a>
    <ul>
    <li><a
    href="services.html">services</a></li>
    <li><a
    href="bios.html">bios</a></li>
    <li><a
    href="news.html">news</a></li>
    </ul>
    </li>
    <li><a href="work.html" class="MenuBarItemSubmenu"
    >WORK</a>
    <ul>
    <li><a href="design.html">design</a>
    </li>
    <li><a
    href="advertising.html">advertising</a></li>
    <li><a href="casestudies.html">case
    studies</a></li>
    </ul>
    </li>
    <li><a href="contact.html"
    class="MenuBarItemSubmenu">CONTACT</a>
    <ul>
    <li><a href="#">.</a></li>
    <li><a
    href="location.html">location</a></li>
    <li><a
    href="opportunities.html">opportunities</a></li>
    </ul>
    </li>
    </ul>
    Here is the Spry CSS code that pertains to the links:
    /* Menu items are a light gray text with padding and no text
    decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #666666;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    /* Menu items that have mouse over or focus have green text
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #89b11a;
    /* Menu items that are open with submenus are set to
    MenuBarItemHover with purple text */
    ul.MenuBarHorizontal a.MenuBarItemHover,
    color: #583399;
    /* Menu items that are open with submenus are set to
    MenuBarItemHover with purple text */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
    ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    color: #583399;
    And
    here
    is a link to my test file so you can see what I am talking
    about.
    Thanks for any help and let me know if you need anything else
    to help with it.

    Anyone??

  • Spry menu-change links to carry through all 16 pages?

    I am sure this is easy to do. I just don't know where to begin.
    I have a 16 page website "northeastohioweddingexperts.com.   The side menu is the same on all 16 pages. Its a spry menu. What is the easies way to change the links so it changes through all 16 pages? I  have been doing it the hard way by make a change to the spry menu, and opening each HTML page and pasting the change in that area. I am sure this can be all changed simply in CSS.  So if there is one document that can be altered, or on CSS file that can be changed THIS would be helpful.
    Please point me in the right direction.
    Thanks,
    Tony

    HTML = content.  CSS = styles.  I'm sorry to say that changes to your CSS file won't have any global effect on the links in your HTML code.
    If you had built your site around a DW Template or Server-Side Includes, making site wide changes to menus would be much easier.  See links below for details:
    Dreamweaver Templates -
    http://www.smartwebby.com/web_site_design/dreamweaver_template.asp#1
    Server-Side Includes
    http://www.smartwebby.com/web_site_design/server_side_includes.asp
    If you don't want to start over, use Find & Replace (Ctrl+F) to change hyperlink code in your local site.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Spry Menu and website differ on linked pages

    Two pages on my website (www.SimplyGreen.biz) are pointing to an incorrect page on my Spry Menu Bar.  When I look at the Spry Menu Bar set up - it is correct and when I look at the code behind that menu bar - it is pointing to the correct page also.  When I preview the page in browser, it comes up correct.  When I go to my website, the index page comes up correctly, but when you point or hover over the first menu item (Corporate Solutions on the far left) it opens the Driving Positive Solutions page instead of the index page it's supposed to.  The Spry menu is correctly pointing to the correct files.  I have manually taken the spry menus off the remote site and reloaded the new local site file........ and it still won't change it.  It must be saved somewhere else & I can't figure out where else to look.
    The same situation (wrong page opening up) happens under the Sustainable Solutions menu item (4th menu item) which is bringing up the Value of Partnerships page instead of it's own page (that shows up correctly also in the Spry Menu Bar and its deign code.
    It's driving me crazy!  I have reloaded the entire site, the dependent files, removed the template and reloaded it onto remote site, changed to another page and then back to force it over, etc.    I can't figure out where the wrong linked page info is coming from and why only those two pages bring up a different page than they are supposed to.

    Is it possible that your problem is caused by a web cache bringing up the wrong information? Clear history in your browser, or test on another machine to see if this is the problem.

  • Spry Menu Bar Editing Links PLEASE HELP

    Ok I am a new user and this is my first site and I have a question regarding creating links in the spry menu bar. 
    I created my home page with a spry menu bar and I have begun creating pages to link to my home page. 
    My question is when I navigate to another page from my home page my spry menu bar on the second page does not have the links set for the spry menu.  Do I have to input all the links again on each additional page or is there an easier way to copy from my home page.
    I am creating an online store and my homepage menu bar has over thirty links to products pages.  Each page has the original banner and spry menu bar from my home page but the links arent set on any of the products pages.  Do I have to go into each one of my thirty pages and create the thirty links to the other pages?  and if that is the case what if I want to change or add additional links to the home page for new products launching?  Do I have to update the links and spry menu bar on all of the additional pages as well?
    If anyone can help me out I would greatly appreciate it.  Any answer would be helpful even if its not the one I want.

    If you're not using DW Templates to spawn site pages or Server-Side Includes for sitewide menus, you definitely must edit each menu on each page and upload to your server.  Tedious.
    Server-Side Includes are a huge time saver.  Learn to use them.
    http://www.smartwebby.com/web_site_design/server_side_includes.asp
    Nancy O.

  • Having issues linking spry menu bar to my other pages

    Hey everyone,
    I am brand new to web development. I am currently using the trial of DW and I must say I love it. I am having issues with my spry menu bar though. I will click on a certain box in the menu bar and use the properties page at the bottom and insert a link to another one of my webpages that I have created. However when I test my webpage, it will not be linked to it. Instead it is linked to #, or my index page. Now my domain name is: thecampuscocktail.com. I have created two other pages "feedback.html" and "speedydrinks.html" and even when I enter those manually into my browser (i.e. "thecampuscocktail.com/feedback.html") it gives me a page not found error. So I may be doing something incorrectly with uploading my pages however I have used the "put" option with all of them and I have used the "sync site wide" option. I am also using a template though that shouldn't affect it. Being brand new I know very, very little about coding. But here is the code to my template:
    <!DOCTYPE html PUBLIC "-//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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>The Campus Cocktail</title>
    <!-- TemplateEndEditable -->
    <link href="../twoColLiqLtHdr.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    <body>
    <div class="container">
      <div class="header">
        <p><a href="../index.html"><img src="../images/newlogo.gif" alt="logo" width="331" height="189" class="logo" /></a></p>
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">Drinking Games</a>      </li>
          <li><a href="#" class="MenuBarItemSubmenu">Recipes</a>
            <ul>
              <li class="subsubmenu"><a href="#" class="MenuBarItemSubmenu">By Ingredient</a>
                <ul>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">By Type</a>
                <ul>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">By Form</a>
                <ul>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="../Pages/speedydrinks.html">Speedy Drinks</a>      </li>
          <li><a href="#">Drinks by Occasion</a></li>
          <li><a href="../index.html">Local Bars</a></li>
          <li><a href="../Pages/speedydrinks.html">Submit Your Own</a></li>
        </ul>
        <p> </p>
      <!-- end .header --></div>
      <div class="sidebar1"><!-- TemplateBeginEditable name="EditRegion3" -->
        <ul class="nav">
        </ul>
        <p> Whats New:</p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <!-- end .sidebar1 -->
      <!-- TemplateEndEditable --></div>
      <div class="content"><!-- TemplateBeginEditable name="EditRegion4" --><span class="drinklabel">Drink Of The Day:</span>
          <p> </p>
          <!-- end .content -->
      <!-- TemplateEndEditable --></div>
      <div class="footer">
        <p>                 &copy; 2012 Brandon Hall</p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    any help will be appreciated! Sorry for the length of this post.

    DW_Noobie wrote:
    can anyone help
    It depends.  I can see your two pages as in this link:
    <http://www.thecampuscocktail.com/speedydrinks.html>
    <http://www.thecampuscocktail.com/feedback.html>
    You need to describe what these issues are.

  • Link to spry css broken in template or child pages

    Hi,
    on the following pages the spry menu is not displaying properly.  I did notice that in the template pages the link ref was missing ../ at the beginning.  Having added this and updated the templates and child pages (these were also uploaded to the server) I thought that would solve the problem.  But it doesn't look as though the change in the link ref has updated correctly.
    http://davidcoshdesign.com/nea/lighting_decorative.html
    http://davidcoshdesign.com/nea/lighting_functional.html
    http://davidcoshdesign.com/nea/news.html
    http://davidcoshdesign.com/nea/links.html
    http://davidcoshdesign.com/nea/blog.php
    Any pointers, would be great.
    Second url: 
    http://davidcoshdesign.com/nea/lighting_functional_wall.html
    This one appears not to be linking properly to the template?  At leats, I think that's the problem.  The template is in the correct folder and uploaded to the server.
    I have noticed on this site that when I make a new page based on any of the site templates, when I look at the coding in DW, there are references to the local site 'root' folder.
    Have I messed up the links to templates etc on site-wide basis?  Do I need to go into 'Manage Sites' to sort this out?

    No, just a reoccurring problem, for someone who constantly struggles witht the vagaries of html.
    RP

  • Spry Accordion Menu Tab Link css - totally confused

    Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day.  I've created a spry accordion menu with links in the actual panel tabs.  Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs.  You'll see from code that I've tried a few styles but can't get this to work.  I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
    Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
    <div id="sidebar1">
    <div id="Accordion1" class="Accordion">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Photo Gallery</div>
        <div class="AccordionPanelContent">
        <ul>
        <li><a href="PhotoGallery.html">Gallery 1</a></li>
        </ul>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Unit Newsletters</div>
        <div class="AccordionPanelContent">
        <ul>
        <li><a href="Newsletter.html">February 2010</a></li>
        </ul>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Forms</div>
        <div class="AccordionPanelContent">
        <ul>
        <li><a href="">Joining Instructions</a></li>
        <li><a href="">Enrolment</a></li>
        <li><a href="">Next of Kin</a></li>
        <li><a href="">Volunteer Blue Card</a></li>
        </ul>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
        <div class="AccordionPanelContent">
        <ul>
        <li><a href="WhatsOn.html">Whats On</a></li>
        <li><a href="PSG.html">Parent Support Group</a></li>
        </ul>
        </div>
        </div>
      </div>
    </div>
    .AccordionPanel {
    margin: 0px;
    padding: 0px;
    .AccordionPanelTab {
    background-color: #036;
    border-bottom: 1px #93b747 solid;
    margin: 0px;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    text-decoration: none;
    .AccordionPanelTabOpen {
    color: #036;
    background-color: #93b747;
    display: block;
    text-decoration: none;
    .AccordionPanelTabHover {
    color: #036;
    background-color: #93b747;
    text-decoration: none;
    border-bottom: 1px solid #036;
    display: block;
    .AccordionPanelTab a {
    color: #93b747;
    margin: 0px;
    font-size: 12px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    text-decoration: none;
    display: block;
    .AccordionPanelTab a.open {
    font-color: #036;
    color: #036;
    background-color: #93b747;
    text-decoration: none;
    display: block;
    .AccordionPanelTab a.active {
    color: #036;
    background-color: #93b747;
    display: block;
    text-decoration: none;
    .AccordionPanelTab a.hover {
    color: #036;
    background-color: #93b747;
    font-weight: bold;
    text-decoration: none;
    display: block;
    .AccordionPanelTab a.close {
    color: #93b747;
    background-color: #036;
    text-decoration: none;
    display: block;
    .AccordionPanelContent {
    margin: 0px;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 12px;
    background: #fff;
    font-size: 12px;
    color: #036;
    font-weight: 500;
    .AccordionPanelContent ul li {
    margin-left: -40px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: #fff;
    font-size: 12px;
    color: #036;
    font-weight: 500;
    text-decoration: none;
    list-style-type:none;
    list-style:none;
    .AccordionPanelContent ul li a:link {
    color: #036;
    text-decoration: none;
    list-style-type:none;
    list-style:none;
    .AccordionPanelContent ul li a:hover {
    color: #036;
    font-weight: bold;
    text-decoration: none;
    .AccordionPanelContent ul li a:visited {
    color: #036;
    text-decoration: none;
    .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    background: #93b747;
    border-bottom: 1px solid #036;
    .AccordionPanelOpen .AccordionPanelTab.a {
    color: #036;
    background: #93b747;
    border-bottom: 1px solid #036;
    .AccordionPanelOpen .AccordionPanelTabHover {
    color: #036;
    font-weight: bold;
    .AccordionPanelOpen.a .AccordionPanelTabHover.a {
    color: #036;
    font-weight: 600;
    .AccordionFocused .AccordionPanelTab {
    color: #036;
    font-weight: 600;
    a.AccordionFocused .AccordionPanelTab {
    color: #036;
    font-weight: 600;
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    font-weight: 600;
    a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    font-weight: 600;

    Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong.  I've uploaded site so you can see what's happening (www.11acu.org).  All tab states should be as per Photo Gallery, Newsletters and Forms.  Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work.  Now I've probably got you confused as well! lol Apologies!  Recreated css for tab links below.  Html same as in original post.  Any help much appreciated.
    .AccordionPanelTab {
    color: #93b747;
    background-color: #036;
    border-bottom: solid 1px #93b747;
    margin: 0px;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    .AccordionPanelTab a {
    color: #93b747;
    background-color: #036;
    margin: 0px;
    padding-left: -10px;
    padding-top: -2px;
    padding-bottom: -2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    display: block;
    .AccordionPanelTab a:link {
    color: #93b747;
    background-color: #036;
    margin: 0px;
    padding-left: -10px;
    padding-top: -2px;
    padding-bottom: -2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    display: block;
    .AccordionPanelTab a:hover {
    color: #036;
    background-color: #93b747;
    margin: 0px;
    padding-left: -10px;
    padding-top: -2px;
    padding-bottom: -2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    display: block;
    .AccordionPanelTab a:active {
    color: #036;
    background-color: #93b747;
    margin: 0px;
    padding-left: -10px;
    padding-top: -2px;
    padding-bottom: -2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    display: block;
    .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    background-color: #93b747;
    border-bottom: solid 1px #036;
    text-decoration: none;
    .AccordionPanelTabHover {
    color: #036;
    background-color: #93b747;
    text-decoration: none;
    border-bottom: solid 1px #036;
    .AccordionPanelOpen .AccordionPanelTabHover {
    color: #036;
    background-color: #93b747;
    text-decoration: none;
    font-weight: bold;
    .AccordionFocused .AccordionPanelTab {
    color: #93b747;
    background-color: #036;
    text-decoration: none;
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    background-color: #93b747;
    border-bottom: solid 1px #036;
    text-decoration: none;

  • Spry menu link text cut off in IE8

    I have built a website in Dreamweaver using a horizontal spry menu bar. The site works everywhere when I tested it in all browsers on several different computers. However, when someone else checked it on their computer, the text on the links is cut off. Like where the link says Neurosurgery, it bumps up against the edge of that link and cuts off half of the word. The shorter text links aren't cut off, but they aren't centered. They are using IE 8, which I checked it on and it worked fine on my computer. Turns out his computer isn't the only one doing this, but I can't seem to replicate the problem on my computer even though we are using the same browser. I have had him clear his cache and it hasn't helped. The site is kyneurosurgery.com. I included a photo of what the text is doing on the other computer. I'm not sure how to even begin trying to fix the problem since I can't see it on my computer.

    Please read the following.
    How to Get Help Quickly
    This is a user-to-user forum. Unless you see EMPLOYEE under a screen name, you should assume the poster is an upaid volunteer. Everyone's time is valuable, including yours. The following tips will help you get answers more quickly:
    DO
    Check the Dreamweaver FAQ. The answer to your question might already be there.
    Give your post a meaningful subject line, indicating of the nature of the problem.
    Give sufficient details (such as operating system, browser, hardware platform, and other relevant information) for others to understand the nature of the problem, but don't go overboard. Short, focused questions tend to get answered more quickly.
    If your problem concerns a web page that doesn't display as expected, upload the page to a public website and give the URL. But don't post links to anything you don't want indexed by a search engine. Create a test folder on the site, and remove the page when the problem has been solved.
    Give details of any error messages.
    Say briefly what you have done to try to solve the problem yourself.
    If your question involves a database or server-side technology, such as PHP, ColdFusion, or ASP, say which one, and include it in the subject line.
    DON'T
    Don't post a series of questions in a single post. Splitting them into separate threads increases your chances of a quick answer.
    Don't repeat the same question in different forums, as this makes it harder for both you and those trying to help you to keep track of progress. Duplicate posts will be deleted.
    When someone has answered your question, don't start asking more questions in the same thread. Keeping threads separate with clear subject lines makes it easier for others who might have the same problem to find the information they need.
    Don't be impatient. If you don't get an answer in 24 hours, post a follow-up question in the same thread, asking if you need to give more details. The lack of replies might also indicate that no one else knows the answer.\
    Don't hijack existing topics by replying with unrelated questions or suggestions. Start a new discussion thread so your question stands out.
    When your question has been answered
    If you started the thread, buttons like those in the following screenshot will appear at the bottom of each reply. Use these buttons to indicate that you have been helped or that you have received a satisfactory answer. You can choose up to two answers as "helpful" and one as "correct". Once selected, you cannot change your mind. Marking answers like this helps others identify solutions to their own problems.
    Gramps

  • Clicked Link Color Within Spry Menu Bar

    Greetings,
    I have a spry menu bar that is working like I want it to
    except for one thing. The unclicked links are white, which is what
    I want. In the template in which the menu is located, the page
    properties are sent black for visited links.
    How can I make only the menu bar links remain white when
    visited and keep other links on the page going black when visited?
    They stay white now in IE7 and FF, but not IE6.
    Thanks in advance for any assistance.
    Glenn

    Have you tried changing the value of the Background colour in your CSS:
    ul.MenuBarHorizontal a
        cursor: pointer;
        text-align: center;
        padding-top: 2px;
        padding-bottom: 2px;
        text-decoration: none;
        color: #FFF;
        padding-right: 2px;
        padding-left: 2px;
        display: block;
        background-color: #223F9A;

  • I was working on my spry menu bar and now my sidebar1 photo moves with the menu bar?

    I was working on my spry menu bar, and getting really far with it thanks to GRAMPS, and all of a sudden I wanted to put padding of 30px top and 30 px bottom on the sidebar1 photo in the container and now all of a sudden the home.jpg photo in the sidebar moves when you hover over the menu bar. 
    I can noit for the life of me figure out what changed and somehow was so excited about my spry menu bar working that I did not save the most recent working page.    Can anybody look at this with me and let me know what changed to mess the page up on me.
    Thanks a million.
    Ted
    site is located here http://www.subzerorefrigeration.com 
    None of the links are working I have just been playing with the spy menu for weeks.  I finally figured it out and do not belive the error is in the spry style sheets. 
    Here is the code for my page.  I know I am working with a template.  I really do not want to start over if a <div> tag is missing.
    Any other suggestions would be appreciated.
    <!DOCTYPE html PUBLIC "-//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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sub Zero Refrigeration Heating and Air Conditioning in Midlothian Illinois</title>
    <style type="text/css">
    <!--
    body {
        margin: 0;
        padding: 20;
        color: #000;
        background-color: #b7e3ea;
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 100%;
        line-height: 1.4;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
        padding-right: 15px;
        padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
        color: #000099;
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
        border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
        color: #42413C;
        text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
        color: #6E6C64;
        text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
        text-decoration: none;
        color: #000099;
    /* ~~this fixed width container surrounds the other divs~~ */
    .container {
        width: 960px;
        background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
        background-color: #b7e3ea;
        padding: 0px;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
        float: left;
        width: 180px;
        padding-bottom: 10px;
        background-color: #FFFFFF;
        padding-top: 30px;
    .content {
        padding: 10px 0;
        width: 780px;
        float: left;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
        padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
        list-style: none; /* this removes the list marker */
        border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
        margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    ul.nav li {
        border-bottom: 1px solid #666; /* this creates the button separation */
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
        padding: 5px 5px 5px 15px;
        display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
        width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
        text-decoration: none;
        background: #C6D580;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
        background: #ADB96E;
        color: #FFF;
    /* ~~ The footer ~~ */
    .footer {
        padding: 0px;
        position: relative;/* this gives IE6 hasLayout to properly clear */
        clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
        background-color: #B7E3EA;
        color: #000099;
        width: 960px;
    verybottomfooter {
        padding: 10px;
    .footerlightblue {
        background-color: #B7E3EA;
    .container .footer table tr th {
        background-color: #FFF;
        color: #000099;
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .container .footer2 #footer3 .footer p {
        text-align: center;
    .container .footer2 #footer3 .footer p {
        font-size: medium;
    .container .footer2 #footer3 .footer p {
        font-size: small;
        background-color: #B7E3EA;
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="container">
      <div class="header"><!-- end .header -->   
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="125" height="190" align="left" id="FlashID" title="Sub Zero Refrigeration &quot;Subby&quot; Logo">
          <param name="movie" value="Images/SubbyMovie.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="7.0.70.0" />
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->
          <object data="Images/SubbyMovie.swf" type="application/x-shockwave-flash" width="125" height="190" align="left">
            <!--<![endif]-->
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="7.0.70.0" />
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object>
        <img src="Images/HeaderOriginal.jpg" alt="Sub Zero Refrigeration Heating and Air Condtioning Header Photo" width="834" height="190" align="left" /><br />
      </div>
      <div class="container" id="navbar"> </div>
    <div class="namephoto">
    <ul id="MenuBar" class="MenuBarHorizontal">
       <li><a class="MenuBarItem" href="#">Home</a></li>
       <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
         <ul>
           <li><a href="#" class="MenuBarItemSubmenu">Our Staff</a>
             <ul>
               <li><a href="#">Bud Wagner</a></li>
               <li><a href="#">Tim Wagner</a></li>
               <li><a href="#">Dave Allen</a></li>
               <li><a href="#">Terry Burke</a></li>
               <li><a href="#">Larry Skarr</a></li>
               <li><a href="#">Niko Opla</a></li>
               <li><a href="#">Gina Ames</a></li>
               <li><a href="#">Laura Kane</a></li>
             </ul>
           </li>
           <li><a href="#">Our Service Area</a></li>
           <li><a href="#">Our Mission Statement</a></li>
           <li><a href="#" class="MenuBarItemSubmenu">Why Choose Sub Zero Refrigeration?</a>
             <ul>
               <li><a href="#">Our Review's</a></li>
               <li><a href="#">Our Competition's Reviews</a></li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Careers</a>
             <ul>
    <li><a href="#">HVAC Technician</a></li>
    <li><a href="#">HVAC/R Installer</a></li>
    <li><a href="#">Commercial Refrigeration Technician</a></li>
             </ul>
           </li>
           <li><a href="#">Testimonials</a></li>
           <li><a href="#" class="MenuBarItemSubmenu">Easily Leave Us a Review</a>
             <ul>
               <li><a href="#">On &quot;YAHOO&quot;</a></li>
               <li><a href="#">On &quot;YELP&quot;</a></li>
               <li><a href="#">On &quot;MERCHANT CIRCLE&quot;</a></li>
               <li><a href="#">On &quot;GOOGLE PLACES&quot;</a></li>
             </ul>
           </li>
    </ul>
       </li>
       <li><a class="MenuBarItemSubmenu" href="#">Repair</a>
         <ul>
    <li><a href="#">Commercial Refrigeration</a></li>
    <li><a href="#">Commercial Rooftop</a></li>
    <li><a href="#">Commercial Ice Machine</a></li>
    <li><a href="#">Air Conditioning </a></li>
    <li><a href="#">Boiler</a></li>
    <li><a href="#">Furnace</a></li>
    <li><a href="#">Heat Pump</a></li>
    <li><a href="#">Indoor Air Quality</a></li>
    <li><a href="#">Schedule A Service Call</a></li>
         </ul>
    </li>
       <li><a class="MenuBarItemSubmenu" href="#">Sales</a>
         <ul>
    <li><a href="#">Commercial Refrigeration</a></li>
    <li><a href="#">Commercial Rooftop</a></li>
    <li><a href="#">Commercial Ice Machine</a></li>
    <li><a href="#">Air Conditioning</a></li>
    <li><a href="#">Boiler</a></li>
    <li><a href="#">Furnace </a></li>
    <li><a href="#">Heat Pump</a></li>
    <li><a href="#">Indoor Air Quality</a></li>
    <li><a href="#">Financing</a></li>
           <li><a href="#">Schedule a &quot;FREE&quot; Computerized ACCA MJ8 Equipment Replacement Estimate </a></li>
         </ul>
    </li>
       <li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
         <ul>
    <li><a href="#">Commercial Refrigeration Service Agreements</a></li>
    <li><a href="#">Commercial Rooftop Service Agreements</a></li>
    <li><a href="#">Commercial Ice Machine Service Agreements</a></li>
    <li><a href="#">Residential Air Conditioning Service Agreements</a></li>
    <li><a href="#">Residential Boiler Service Agreements</a></li>
    <li><a href="#">Residential Furnace and IAQ Service Agreements</a></li>
    <li><a href="#">Heat Pump Service Agreements</a></li>
    </ul>
    </li>
       <li><a class="MenuBarItemSubmenu" href="#">Products</a>
         <ul>
           <li><a href="#" class="MenuBarItemSubmenu">Commercial Refrigeration</a>
             <ul>
               <li><a href="#">Beverage Air</a></li>
               <li><a href="#">Beacon Smart Controller</a></li>
               <li><a href="#">Continental</a></li>
               <li><a href="#">Crown Tonka Walk Ins</a></li>
               <li><a href="#">Delfield</a></li>
               <li><a href="#">Heatcraft Refrigeration</a></li>
               <li><a href="#">Hoshizaki Refrigeration</a></li>
    <li><a href="#">International Cold Storage</a></li>
    <li><a href="#">Kelvinator</a></li>
    <li><a href="#">Kolpak</a></li>
    <li><a href="#">Larkin Refrigeration</a></li>
    <li><a href="#">Perlik Bar and Beverage Equipment</a></li>
    <li><a href="#">True Refrigeration</a></li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Commercial Rooftop</a>
             <ul>
               <li><a href="#">Arcoaire</a></li>
               <li><a href="#">American Standard</a></li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Commercial Ice Machine</a>
             <ul>
               <li><a href="#">Hoshizaki Ice Machines</a></li>
               <li><a href="#">Manitowoc Ice Machines</a></li>
               <li><a href="#">Scotsman Ice Machines</a></li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Air Conditioning</a>
             <ul>
               <li><a href="html/subzero/arcoaireaircondioning.html">Arcoaire</a></li>
               <li><a href="html/subzero/americanstandardairconditioning.html">American Standard</a></li>
               <li><a href="html/subzero/mitsubishiairconditioners.html">Mitsubishi</a></li>
             </ul>
         </li>
           <li><a href="#" class="MenuBarItemSubmenu">Boiler </a>
             <ul>
               <li><a href="#">Weil McLain Residential</a></li>
               <li><a href="#">Weil McLain Commercial</a></li>
             </ul>
       </li>
           <li><a href="#" class="MenuBarItemSubmenu">Furnace </a>
             <ul>
               <li><a href="#">Arcoaire</a></li>
               <li><a href="#">American Standard</a></li>
               <li><a href="#">Mitsubishi</a></li>
             </ul>
       </li>
           <li><a href="#" class="MenuBarItemSubmenu">Heat Pump </a>
             <ul>
               <li><a href="#">Arcoaire</a></li>
               <li><a href="#">American Standard</a></li>
               <li><a href="#">Mitsubishi</a></li>
             </ul>
       </li>
           <li><a href="#" class="MenuBarItemSubmenu">Indoor Air Quality</a>
             <ul>
               <li><a href="#">Aprilaire Humidifiers</a></li>
               <li><a href="#">Honeywell Electronic Air Cleaners</a></li>
               <li><a href="#">Honeywell Thermostats</a></li>
             </ul>
       </li>
         </ul>
    </li>
       <li><a class="MenuBarItemSubmenu" href="#">Job Photos</a>
         <ul>
    <li><a href="#">Commercial Refrigeration</a></li>
    <li><a href="#">Commercial Rooftop</a></li>
    <li><a href="#">Commercial Ice Machine</a></li>
    <li><a href="#">Air Conditioning</a></li>
    <li><a href="#">Boiler</a></li>
    <li><a href="#">Furnace</a></li>
    <li><a href="#">Heat Pump</a></li>
    <li><a href="#">Indoor Air Quality</a></li>
         </ul>
       </li>
       <li><a class="MenuBarItemSubmenu" href="#">Cool Savings</a>
         <ul>
           <li><a href="#">Monthly Specials</a></li>
           <li><a href="#">Manufacturers Rebates</a></li>
           <li><a href="#">Utility Rebates</a></li>
           <li><a href="#">Website Coupons</a></li>
    <li><a href="#">Customer Referral Program</a></li>
         </ul>
       </li>
       <li><a class="MenuBarItemSubmenu" href="#">Social</a>
         <ul>
           <li><a href="#">&quot;LIKE&quot; Us on Facebook</a></li>
           <li><a href="#">&quot;FOLLOW&quot; Us on Twitter</a></li>
    <li><a href="#">Facebook Disclaimer</a></li>
         </ul>
    </li>
    <li><a class="MenuBarItem" href="#">Contact Us</a>  </li>
    </ul>
    <p><br />
    </p>
    <div class="sidebar1"><img src="Images/home.jpg" alt="Home Page Photo" width="105" height="240" /></div></div>
      <div class="content">
        <h1>Instructions</h1>
        <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
        <h1>Clearing Method</h1>
        <p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule.  This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a &lt;br class=&quot;clearfloat&quot; /&gt; or &lt;div  class=&quot;clearfloat&quot;&gt;&lt;/div&gt; after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
        <h3>Logo Replacement</h3>
        <p>An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
        <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
        <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
        <h4>Backgrounds</h4>
        <p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
        <!-- end .content --></div>
      <div class="footer">
        <table width="960" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th width="102" scope="col"> </th>
            <th width="101" scope="col"> </th>
            <th width="106" scope="col"> </th>
            <th width="120" scope="col"> </th>
            <th width="172" scope="col"> </th>
            <th width="120" scope="col"> </th>
            <th width="103" scope="col"> </th>
            <th width="136" scope="col"> </th>
          </tr>
          <tr>
            <td colspan="2"><img src="Images/van.jpg" alt="Sub Zero Refrigeration Heating and Air Conditioning Service Van" width="243" height="109" align="left" /></td>
            <td colspan="6"><img src="Images/footer_right.jpg" width="717" height="109" alt="Footer" /></td>
          </tr>
        </table>
      </div>
      <div class="footer2">
        <div class="footer">
        <table width="960" height="62" border="1" align="center" cellspacing="8">
          <tr valign="middle">
            <th width="234" scope="col">Schedule a Service Call</th>
            <th width="247" scope="col"><p>Schedule Free New Equipment Replacement Estimate</p></th>
            <th width="99" scope="col"><a href="https://www.acca.org/consumer/find-a-contractor" target="_blank"><img src="Images/acca.gif" width="85" height="48" alt="ACCA Sub Zero Refrigeration" /></a></th>
            <th width="94" scope="col"><a href="http://www.bbb.org/chicago/business-reviews/heating-and-air-conditioning/sub-zero-refriger ation-and-a-c-in-midlothian-il-7695" target="_blank"><img src="Images/BBB.png" width="87" height="48" alt="Sub Zero Refrigeration BBB A+ Rating" /></a></th>
            <th width="84" scope="col"><a href="http://www.natex.org/" target="_blank"><img src="Images/nate.png" width="76" height="74" alt="NATE Sub Zero Refrigeration" /></a></th>
            <th width="83" scope="col"><a href="http://www.twitter.com/subzerorefrig" target="_new"><img src="Images/twitter_logo.jpg" width="69" height="69" alt="Follow us on Twitter" /></a></th>
            <th width="143" scope="col"><a href="https://www.facebook.com/subzerorefrig" target="_new"><img src="Images/facebook.png" width="81" height="81" alt="" /></a></th>
          </tr>
        </table>
        </div>
        <div class="footer3" id="footer3">
          <div class="footer">
            <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <th width="960" style="background-color: #B7E3EA; font-size: 10px; font-family: Arial, Helvetica, sans-serif" scope="col">Home |  About Us | Repair | Sales | Maintenance | Products | Our Job Photos | Cool Savings | Social | Contact Us | Schedule Free New Equipment Estimate | Schedule Service | Site Map<br />
                Search Sub Zero Refrigeration Heating and Air Conditioning<br />            </th>
              </tr>
            </table>
            <p><!-- end .container -->      Copyright 1999-2013 | Last updated on
              <!-- #BeginDate format:Am1 -->February 19, 2012<!-- #EndDate --> | Web designer's - Ted Wagner and Cherie White Cachampis      </p>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    swfobject.registerObject("FlashID");
    </script>
    </body>
    </html>

    I seem to have fixed it by putting <div  class="clearfloat"></div> after the navigation bar?

  • Spry Menu Bar disappears absolute position

    Hello all this is my first time posting on this site so bear with me. I have a semi-transperant spry menu bar that i inserted into the header div, over an image. I moved the menu bar -38px, when the position is set to relative the menu bar is visible, however the old position of the menu bar has a blank white space there. I think this is due to the relative position property. When i change it to absolute the whole menu bar disappears? http://www.brightlikethesun.com/index2.html (the position is back to relative to show the menu bar and also background for header is blue to show the space) 
    CSS
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    width: 100%;
    margin: auto;
    position: relative;
    top: -38px;
    font-family: "Lucida Console", Monaco, monospace;
    opacity: 0.7;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    margin-right: auto;
    margin-left: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 20%;
    float: left;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 70%;
    z-index: 1020;
    cursor: default;
    width: 50em;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 50em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #C0C0C0;
    text-decoration: none;
    background: rgba(98, 135, 167, .4)
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top, #45484d 0%, #000000 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #45484d 0%,#000000 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #45484d 0%,#000000 50%); /* IE10+ */
    background: linear-gradient(to bottom, #45484d 0%,#000000 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #33C;
    color: #FFF;
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 50%); /* IE10+ */
    background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
      display: inline;
      f\loat: left;
      background: #FFF;
    html 
    <!DOCTYPE html PUBLIC "-//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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bright Like The Sun -- San Antonio, TX</title>
    <style type="text/css">
    <!--
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #000000;
    margin: 0;
    padding: 0;
    color: #000;
    background-image: url(background.jpg);
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
    h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;  /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 5px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    font-family: Tahoma, Geneva, sans-serif;
    color: #000;
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
    color:#414958;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
    color: #4E5869;
    text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
    width: 80%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
    background-color: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
    background-color:#06C
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
    float: left;
    width: 20%;
    padding-bottom: 0px;
    background: #f1da36; /* Old browsers */
    background: -moz-linear-gradient(left, #f1da36 0%, #fefcea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1da36), color-stop(100%,#fefcea)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* IE10+ */
    background: linear-gradient(to right, #f1da36 0%,#fefcea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1da36', endColorstr='#fefcea',GradientType=1 ); /* IE6-9 */
    .content {
    padding: 0px 0;
    width: 80%;
    float: left;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
    padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The footer ~~ */
    .footer {
    padding: 10px 0;
    background-color: #000000;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    font-family: "Comic Sans MS", cursive;
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    #menurules {
    margin: 0px;
    padding: 0px;
    -->
    </style>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="container">
      <div class="header"><a href="#"><img src="BLTS1.jpg" alt="BLTS" name="BLTS" width="100%" height="100%" id="BLTS" style="display: block;" /></a>
       <ul id="MenuBar1" class="MenuBarHorizontal">
         <li><a class="MenuBarItemSubmenu" href="#"><center>Home</center></a></li>
         <li><a href="#"><center>Shows</center></a>
    <ul>
             <li><a href="#"><u>Upcoming shows</u><br />
    <br />
    May 4th 2013 @<img src="502.jpg" width="5%" height="5%"><br />
    Bright Like The Sun along with Little Science<br />
    8pm 21+
    </a></li>
                   </ul>
         </li>
         <li><a class="MenuBarItemSubmenu" href="#"><center>Merch</center></a>
           <ul>
             <li><a class="MenuBarItemSubmenu" href="#"><u>Album</u><br /><img src="coda fin cover.jpg" width="15%" height="15%"><font size="4">Coda Fin</font><br />
    Purchase Here or Itunes</a>
                        </li>
             <li><a href="#">Shirts--Coming Soon!</a></li>
             <li><a href="#">Various--Coming Soon!</a></li>
           </ul>
         </li>
         <li><a href="#"><center>Bio</center></a></li>
    <li><a href="#"><center>Contact</center></a></li>
    </ul><!-- end .header --></div>
    <div class="sidebar1">
      <p></p>
        <br />
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      </div> 
      <div class="content"><p align="right"><a href="https://www.facebook.com/brightlikethesun"><img src="FB.jpg" width="30" height="31" alt="Facebook" /></a><img src="twitter-icon.png" width="30" height="31" /></p>
        <p align="left"><img src="weare.jpg" width="185" height="72" /></p><p align="right"><iframe style="border:none" src="http://files.podsnack.com/iframe/embed.html?hash=adznldvg&t=1366488970" width="340" height="54" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe></p>
        <p><img src="BLTS2.jpg" alt="BLTS" width="411" height="297" align="left" /><img src="BLTS font.jpg" width="340" /> is a Post-Rock band from San Antonio. They were born in early 2012 from the collective desire to make beautiful, thought provoking, and at times, chaotic music. Much like fellow Texan bands like Explosions in the Sky and This Will Destroy You, they are entirely instrumental, and known for creating progressively intricate waves of ambiance that grow with intensity and an unabashed wash of emotion. Attuned to their affinity for dynamics, seeing them live takes the listener from deafening walls of orchestrated sound, to melodies so subtle that one finds themselves acutely aware of their own breathing. <br />
          Bright Like The Sun&rsquo;s debut album, Coda Fin, was engineered/mixed by Alex Bhore (of This Will Destroy You), and mastered by TW Walsh (of Pedro The Lion). The record, which was self released, was made available on April 12, 2013.<br /><br /><img src="BLTS3.jpg" width="330" height="245" align="right" /></p>
    <br />
    <br />
        <h4>Bright Like The Sun Consists of:</h4>
        <p>Rob Mochen - Guitar <br />
        Chris Etheredge - Guitar/Keys <br />
        Christian Miranda - Bass <br />
        Steven Barrera - Drums    </p>
        <p><br />
        </p>
        <h4><u>Coda Fin</u> Release Date April 12th 2013    </h4>
        <h4><img src="coda fin cover.jpg" width="250" height="238" align="left" /><img src="venues.jpg" width="171" height="65" align="right" /><br />
        <br />
        <br />
        <br />
           <a href="http://502bar.com/"><img src="502.jpg" width="150" height="112" align="right" /></a><a href="http://www.gypsyloungeaustin.com"><img src="gypsylounge.jpg" / width="150" height="112" align="right"></a></h4>
        <p align="right"> </p>
      </div>
      <div class="footer">
        <p><font face="verdana" font size="2" font color="#FFFFFF">&#169;2013 Bright Like The Sun All Rights Reserved</font></p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

    What I see:
    You need a width on the ul.MenuBarVertical style. Make it the same width as the ul.MenuBarVertical li selector.
    Remove the float: none; from this style:
    ul.MenuBarVertical ul li
         width: 12em;
         float: none;
    No such measurement as a half a pixel:
    ul.MenuBarVertical ul
         border: .5px solid #CCC;
    If you want a border, 1px is minimum...you repeat this incorrect half-pixel in several places.
    Running your page through the W3C Validator returned this: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.healthydirections.ca%2F&charset=%28dete ct+automatically%29&doctype=Inline&group=0
    Your initial errors are not declaring a DOCTYPE, which among other things, does not provide the browser with any information regarding how you want the code interpreted for your viewer. Some browsers guess well, some do not (IE).
    This
         <html>
    is insufficient.
    Apply this in its place, and run through the validator again.
    <!DOCTYPE html PUBLIC "-//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">
    Beth

  • Spry Menu Bar lost formating

    Hi,
    Using DW CS3, I was cleaning up my site and wanted to place
    my main css file in the css folder (for some reason, it was in the
    root folder). I assumed DW would keep all links, etc. in tact.
    Everything else is fine, including my horizontal Spry Menu Bar, but
    the vertical Spry Menu in my left sidebar lost all of it's
    formatting.
    I tried moving the file back but the link to the css, or
    whatever it is that formats the styling for this, is broken. Even
    deleting the Spry Menu Bar and inserting a new one has the same
    result - no formatting.
    In the code for the Spry Menu Bar discussed (I removed a
    number of irrelevent links):
    <script src="../SpryAssets/SpryMenuBar.js"
    type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css"
    rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style1 {
    color: #FFFFFF;
    -->
    </style>
    <link href="../SpryAssets/SpryMenuBarVertical.css"
    rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" --><!--
    TemplateEndEditable -->
    </head>
    <body class="thrColFixHdr">
    <div id="container">
    <div id="header">
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="../Contact-Us.html" rel="no
    follow">Contact Us</a></li>
    <li><a
    href="../FAQs.html">FAQs</a></li>
    <li><a href="../About-Us.html">About
    Us</a></li>
    </ul>
    <a href="../index.html"><img
    src="../Graphics/bannerimage.jpg" alt="BodyMindAwakening.com"
    width="890" height="275" border="0" /></a>
    <!-- end #header --></div>
    <div id="sidebar1">
    <ul id="MenuBar2" class="MenuBarVertical">
    <li><a href="../index.html">Home</a>
    </li>
    <li><a href="../Reading.html">Recommended
    Reading</a></li>
    </ul>
    <h3 class="style1"> </h3>
    <!-- end #sidebar1 --></div>
    Is this enough to go on to figure this out?
    The CSS folder is in the root folder. The Spry Assets folder
    is in the root folder. The .css file "thrColFixHdr.css" is the one
    I moved from the root folder to the CSS folder.
    Thanks for any help or suggestions!

    Add the following to each page, or to your template
    <script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
    function InitPage(){
    Spry.$$('#MenuBar1 li').forEach(function(node){
        var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
        if(a.href == window.location){
            Spry.Utils.addClassName(node,"current");
    Spry.Utils.addLoadListener(InitPage);
    </script>
    making sure that you do have SpryDOMUtils.js in the SpryAssets folder.
    Because the above place a class of current in the list item, you will need to change the selctor to and add
    ul.MenuBarHorizontal li.current a {
        color: #F4F4F4;
        background-color: #8FC8D1;
    Gramps

  • Dreamweaver CS5 cannot access blue spry menu

    Whenever I use a spry menu I have this problem where it is not possible to see the little blue menu bar that allows you to edit your menus.
    WHY? I have searched forums, searched the internet but no answers. Okay I have seen other people ask the same problem but als their threads end with no solution. Sometimes it shows, mostly it doesn't
    So please can someone help as to why I cannot see or access the little blue spry menu bar?
    Cheers Dean

    Thanks for the help.
    I have created a new document and inserted a horizontal spry menu, I still have the same problem
    Here is hopefully the code you require.
    Thanks
    <!DOCTYPE html PUBLIC "-//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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
        font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
        background: #42413C;
        margin: 0;
        padding: 0;
        color: #000;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
        padding-right: 15px;
        padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
        border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
        color: #42413C;
        text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
        color: #6E6C64;
        text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
        text-decoration: none;
    /* ~~this fixed width container surrounds the other divs~~ */
    .container {
        width: 960px;
        background: #FFF;
        margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
        background: #ADB96E;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
        float: left;
        width: 180px;
        background: #EADCAE;
        padding-bottom: 10px;
    .content {
        padding: 10px 0;
        width: 780px;
        float: left;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
        padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
        list-style: none; /* this removes the list marker */
        border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
        margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    ul.nav li {
        border-bottom: 1px solid #666; /* this creates the button separation */
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
        padding: 5px 5px 5px 15px;
        display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
        width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
        text-decoration: none;
        background: #C6D580;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
        background: #ADB96E;
        color: #FFF;
    /* ~~ The footer ~~ */
    .footer {
        padding: 10px 0;
        background: #CCC49F;
        position: relative;/* this gives IE6 hasLayout to properly clear */
        clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="container">
      <div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="180" height="90" id="Insert_logo" style="background: #C6D580; display:block;" /></a>
        <!-- end .header --></div>
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="#">Link one</a></li>
          <li><a href="#">Link two</a></li>
          <li><a href="#">Link three</a></li>
          <li><a href="#">Link four</a></li>
        </ul>
        <p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.</p>
        <p>If you would like the navigation along the top, simply move the ul.nav to the top of the page and recreate the styling.</p>
        <!-- end .sidebar1 --></div>
      <div class="content">
        <h1> </h1>
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
            <ul>
              <li><a href="#">Item 1.1</a></li>
              <li><a href="#">Item 1.2</a></li>
              <li><a href="#">Item 1.3</a></li>
            </ul>
          </li>
          <li><a href="#">Item 2</a></li>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
            <ul>
              <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                <ul>
                  <li><a href="#">Item 3.1.1</a></li>
                  <li><a href="#">Item 3.1.2</a></li>
                </ul>
              </li>
              <li><a href="#">Item 3.2</a></li>
              <li><a href="#">Item 3.3</a></li>
            </ul>
          </li>
          <li><a href="#">Item 4</a></li>
        </ul>
        <p> </p>
        <p> </p>
        <h1> </h1>
        <h1> </h1>
        <h1>Instructions</h1>
        <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
        <h2>Clearing Method</h2>
        <p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule.  This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a &lt;br class=&quot;clearfloat&quot; /&gt; or &lt;div  class=&quot;clearfloat&quot;&gt;&lt;/div&gt; after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
        <h3>Logo Replacement</h3>
        <p>An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
        <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
        <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
        <h4>Backgrounds</h4>
        <p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
      <!-- end .content --></div>
      <div class="footer">
        <p>This .footer contains the declaration position:relative; to give Internet Explorer 6 hasLayout for the .footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.</p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

  • Spry Menu bar file

    Hi,
    While running link checker on my site, I discovered the
    SpryMenuBar.js file is shown as a broken link (and probably why
    when i view my site in a browser, none of the drop down menus
    work). I searched my hard drive and the file is nowhere to be
    found...actually, didn't even know it existed. Question is, can I
    get it back somehow?

    "dreamnew" <[email protected]> wrote in
    message
    news:f4rkr2$g6i$[email protected]..
    > Ok, when I created the new page in the same site as you
    suggested, I did
    > get
    > the SpryAssets folder,
    Ok, that's good, we know it's working as it should. Take a
    look in the site
    definition preferences, there is a section for Spry - you can
    set where the
    Spry files get written.. maybe there's something in there
    that's not quite
    right.
    > before the few spry files I had were just in the file
    > manager listing, right along with my othr files. Very
    strange indeed.
    This is confusing me... are you saying that the spry files
    were just mixed
    in with the rest of your files? but weren't saved to a Spry
    folder?? I
    thought you said that no such js file was created....
    > So, will the menu settings I've created on the template
    and other pages of
    > my
    > site need updating somehow or does it automatically pick
    up the .js file?
    You will need to check your original file and see where the
    Spry Menu js
    script is being pointed to?
    As long as the JS script and the css file are pointing to the
    correct files
    so that paths are correct, then you will be able to edit the
    Spry menu with
    no problems.
    Hope all that makes sense :-)
    Nadia
    Adobe® Community Expert : Dreamweaver
    CSS Templates |Tutorials |SEO Articles
    http://www.DreamweaverResources.com
    ~ Customisation Service Available ~
    http://www.csstemplates.com.au
    Spry Widget Examples
    http://www.dreamweaverresources.com/spry-widgets/

Maybe you are looking for