Having problem with spry menu bar in Internet Explorer.

I'm having a problem with my spry menu bars in Internet Explorer.
Here are the pictures:
Firefox
Internet Explorer
HERE ARE THE CODES:
HTML CODE:
<style type="text/css">
<!--
#apDiv1 {
    position:absolute;
    width:160px;
    height:126px;
    z-index:1;
    left: 205px;
    top: 424px;
    margin: 0 auto;
-->
</style>
<style type="text/css">
#apDiv3 {
    position:absolute;
    width:254px;
    height:206px;
    z-index:2;
    left: 123px;
    top: 1529px;
#apDiv4 {
    position:absolute;
    width:250px;
    height:194px;
    z-index:3;
    left: 381px;
    top: 1528px;
#apDiv5 {
    position:absolute;
    width:256px;
    height:200px;
    z-index:4;
    left: 636px;
    top: 1529px;
#apDiv6 {
    position:absolute;
    width:349px;
    height:205px;
    z-index:5;
    left: 889px;
    top: 1530px;
</style>
<style type="text/css">
#apDiv7 {
    position:absolute;
    width:887px;
    height:204px;
    z-index:6;
    left: 324px;
    top: 905px;
#apDiv8 {
    position:absolute;
    width:1295px;
    height:74px;
    z-index:1;
    left: 212px;
    top: 668px;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<style type="text/css">
#apDiv2 {
    position:absolute;
    width:209px;
    height:197px;
    z-index:2;
    top: 1220px;
    left: 171px;
#apDiv9 {
    position:absolute;
    width:331px;
    height:97px;
    z-index:3;
    left: 385px;
    top: 1218px;
#apDiv10 {
    position:absolute;
    width:292px;
    height:199px;
    z-index:4;
    left: 724px;
    top: 1218px;
#apDiv11 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
body {
    background-color: #000;
    background-image: url();
    text-align: center;
    color: #F00;
.none {
    font-size: 80px;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
#apDiv12 {
    position:absolute;
    width:991px;
    height:60px;
    z-index:5;
    left: 198px;
    top: 192px;
#apDiv13 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 588px;
    top: 322px;
</style>
<body onLoad="MM_preloadImages('images/WebConfroll.png','images/youthfootballroll.png','images/ statefbsweatshirt.png')">
<p align="center" class="none"><img src="images/footballtitle.png" width="941" height="183"></p>
<div align="center">
  <ul id="MenuBar2" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">[Placeholder]</a>
      <ul>
        <li><a href="#">[Placeholder]</a></li>
        <li><a href="#">[Placeholder]</a></li>
        <li><a href="#">[Placeholder]</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">[Placeholder]</a>
      <ul>
        <li><a href="#">[Placeholder]</a></li>
        <li><a href="#">[Placeholder]</a></li>
        <li><a href="#">[Placeholder]</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Videos</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">2008 Videos</a>
          <ul>
            <li><a href="videos/2009 videos/Glenbard part one/partone.html">Glenbard South Game</a></li>
            <li><a href="#">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&# 160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;[Placeholder]</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">2009 Videos</a>
          <ul>
            <li><a href="#">[Placeholder]</a></li>
            <li><a href="#">[Placeholder]</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">2010 Videos</a>
          <ul>
            <li><a href="#">[Placeholder]</a></li>
            <li><a href="#">[Placeholder]</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><span class="cent"><img src="images/bulldoghelmit.png" width="150" height="99" /></span></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p class="cent"> </p>
<div align="center">
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li> <a class="MenuBarItemSubmenu" href="#">Football Season 2008</a>
      <ul>
        <li><a href="http://page.bps101.net/web/t1350/Football2009/2008%20Defense%20Stats.pdf">Defense Stats</a></li>
        <li><a href="http://page.bps101.net/web/t1350/Football2009/2008%20Offense%20Stats.pdf">Offense and Records</a></li>
        <li><a href="http://page.bps101.net/web/t1350/BHS%20All%20Time%20Stats.pdf">AllTime Data</a></li>
        <li><a href="http://page.bps101.net/web/t1350/Football2009/Western%20Sun%202009.pdf">Western Sun Final Standings</a></li>
      </ul>
    </li>
    <li> <a href="#" class="MenuBarItemSubmenu">Football Season 2009</a>
      <ul>
        <li><a href="http://page.bps101.net/web/t1350/Football%202010/2009%20Banquet%20Record%20and%20Stats.pdf">Defense Stats</a></li>
        <li><a href="http://page.bps101.net/web/t1350/Football%202010/2009%20Banquet%20Record%20and%20Stats.pdf">Record Book and Offense</a></li>
        <li><a href="http://page.bps101.net/web/t1350/Football%202010/All-Time%20Data%202009.pdf">Alltime Data</a></li>
      </ul>
    </li>
    <li> <a class="MenuBarItemSubmenu" href="#">Football Season 2010</a>
      <ul>
        <li><a href="http://page.bps101.net/web/t1350/Football%202011/2011%20Checklist.pdf">2010-2011 Offseason Checklist</a></li>
        <li><a href="http://page.bps101.net/web/t1350/Football%202011/2010%20Defense%20Stats%20Final.pdf">Defense Stats</a></li>
        <li><a href="http://page.bps101.net/web/t1350/Football%202011/2010%20Stats%20Packet.pdf">Record Book and Offense</a></li>
        <li><a href="http://page.bps101.net/web/t1350/Football%202011/2010%20ALL%20TIME.pdf">Alltime Data</a></li>
      </ul>
    </li>
  </ul>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><img src="images/Batavia Youth football.png" alt="" width="869" height="200" /></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/WebConfroll.png',1)"></a></p>
<div align="center">
  <div align="center"></div>
  <div align="center"><a href="http://www.athletics2000.com/upstate8/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/WebConfroll.png',1)"><img src="images/WebConf.png" name="Image7" width="206" height="194" border="0" id="Image7" /></a><a href="http://www.bataviayouthfootball.org/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/statefbsweatshirt.png',1)"><img src="images/statefbsweatshirt.jpg" name="Image6" width="375" height="199" border="0" id="Image6" /></a><a href="http://www.bataviayouthfootball.org/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/youthfootballroll.png',1)"><img src="images/youth football.png" name="Image8" width="329" height="197" border="0" id="Image8" /></a></div>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/youthfootballroll.png',1)"></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><img src="images/Logos.png" width="1167" height="199" /></p>
<script type="text/javascript">
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
CSS CODE
@charset "UTF-8";
/* 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
    margin: auto 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 54em;
    border-top: thick solid #00F;
    border-left: thick solid #00F;
    border-right: thick solid #00F;
    border-bottom: thick solid #00F;
    height: 2.2em;
/* 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;
    cursor: pointer;
    width: 18em;
    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-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 18em;
    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: 18em;
/* 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: #000;
    padding: 0.5em 0.75em;
    color: #C96;
    text-decoration: none;
    text-align: center;
    height: 1.2em;
/* 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: #900;
    color: #009;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #900;
    color: #FFF;
    text-decoration: underline;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    color: #FF0;
    font-family: "Lucida Console", Monaco, monospace;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
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;
The website is http://wwww.bataviabulldogfootball.tk

Note that running your page through the W3C Validator gives this list of errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bataviabulldogfootball.tk%2F&charset=%2 8detect+automatically%29&doctype=Inline&group=0
I see that you have a very thin doctype at the top. I suggest you create a new page in Dreamweaver and copy the bit at the top of the page:
<!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" />
Then put that code in place of these lines from your current page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
I see that you have two opening <body> tags. Delete one; it is not needed. Add the preload images from the second into the first body tag and delete the second.
I see code below the closing </html> tag. Re position it before the closing </body> tag.
Because of these errors mentioned above, it was impossible to see the page. Fix and reply here when you have done so.
Also, it is not possible for me to divine what difficulty you are having. If you can please also express it in English (LOL), I'll be happy to suggest a correction for you!
Beth
p.s. Posting entire blocks of code is NEVER as helpful as giving us a link to the pages in action. I seldom read through code dumps here in the Forum.
Message was edited by: Zabeth69

Similar Messages

  • Internet Explorer Problem with Spry Menu Bar

    http://www.cloud9industries.com/clients/jewelryworld/index4.html
    OK here we go
    #1) In IE, the toolbar doesn't appear with the same decreased
    opacity as it does in Firefox and Safari. I'm using a png
    background image with a transparent background and I've defined the
    background color the same as the lower layer's color. Any ideas?
    #2) THE BIG ISSUE - IE doesn't display the drop down portions
    of the menu properly as they display horizontally. If the cursor
    moves into the <li> from another <li> the menu displays
    as aforementioned. If the cursor moves into the <li> from
    outside the menu bar, the menu bar behaves properly.
    This is the first page I've done with a Spry menu bar as it
    seems the former navigation bar process has been removed from
    Dreamweaver. Any tips will be greatly appreciated.
    Thanks,
    cloud9industries

    Hi,
    I took a look over your page and I noticed that you are using
    a very old spry version 1.4. The current released version is Spry
    1.6 and contains some major bug fixes for Menu Bar widget.
    Please update to this last Spry version. You can download the
    new files from
    here.
    The problem with the transparent background is an IE6 problem
    which doesn't support transparent backgrounds. This problem is
    fixed on IE7 and I check it and it works there.
    Please let us know if you still have problems with MenuBar
    after updating it to the new version
    Thanks,
    Diana

  • Problem with Spry Menu Bar 2.0 (1.0) re - CSS

    Hello:
    I am having some difficulty with a Spry Menu Bar (horizontal) 2.0 (1.0)  that I have created.  Initially I thought the problem was with regard to rendering issues on IE 6.0, however the problem seems to be more general than that and I have come to believe that it has to do with the CSS created by the Widget Browser and modified once imported into the webpage.  Hence I have elected to post my issue here rather than on the spry page.
    I have relied on the tutorial provided by David Powers (Bayside.css) and in addition other documentation regarding the Spry menu bar UI.  The problem appeared to be one of IE 6 rendering the page with a gap that is created when the drop down menus appear, thus pushing down any divs that appear below the page.
    However, through a painstaking process of trial and error my problem now seems to be that when I export the CSS generated by the widget browser to an external style sheet (the general style sheet governing the whole site), it conflicts with other CSS styles regarding links etc.  The end result is that all the padding, background colours, background images, and text colours are lost.  So long as the CSS remains within the head this doesn't happen.
    My thinking is that this must have to do with issues of specificity, inheritence, etc.
    The site can be viewed at the following URL: http://www.aclco.org/testing/index.html.  In its current form all CSS related to the menu bar is found in the head of each page.  (see CSS below).
    My question is can I establish a separate style sheet for the horizontal menu bar and have those styles applied specifically (and only) to the menu bar.  My only other alternative is to work through the remainder of the general style sheet and work through any issues of specificity/inheritance -- which may be the "best" practice, but it risks causing other "cascading" [sic] problems elsewhere.
    Any advice or suggestions or directed reading (that would point to a solution) that could be offered would be greatly appreciated.
    Steve Webster
    The CSS governing the horizontal menu bar is as follows:  (currently the following CSS is embedded in the head of the web page)
    <style type="text/css">
    /*  -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles --  */
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
        these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
        .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
        You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
        with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:transparent;
        font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: normal;
        font-size: 17px;
        font-style: normal;
        padding:0;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarFixedLeft {
        float: left;
        width: 80em;
    .MenuBarFixedCentered {
        float: none;
        width: 80em;
        margin-left:auto;
        margin-right:auto;
    .MenuBarFixedCentered br {
        clear:both;
        display:block;
    .MenuBarFixedCentered .SubMenu br {
        display:none;
    .MenuBarFullwidth {
        float: left;
        width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
        padding: 10px 10px 10px 4px;
        background-color:#000088;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent-Dark.png);
        background-repeat:repeat-x;       
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none none none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
        text-align:center;
        line-height:1.4em;
        color:#ffffff;
        background-color:transparent;
        padding: 0px 18px 0px 5px;
        width: 10em;
        width:auto;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
        width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 15px;
        font-style: normal;
        background-color:#000088;
        padding:0px 2px 0px 0px;
        border-width:0px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: none;
        padding: 0px;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 0px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: none none none none;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
        padding-bottom: 10px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
        text-align:left;
        line-height:1em;   
        background-color:transparent;
        color:#ffffff;
        padding: 10px 10px 10px 10px;
        width: 240px;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
        background-color: #2E35A3;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
        background-repeat:repeat-x;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
        background-color:#2E35A3;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #ffffff;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: transparent;
        min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                        0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                        the dropdown with the left of the menu item label.*/
        z-index:10;
    #MenuBar.MenuBarVertical .SubMenuVisible {
        top: 0px;   
        left:100%;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: transparent;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
    * The 'SpryIsIE6' class is placed on the HTML element by  the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    /* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
    </style>
    The CSS governing the site generally is reproduced below:  (my belief is that it is the a:link, a:visited,  a:hover, a:active styles that may be in conflict).
    @charset "utf-8";
    body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        min-height: 0; /* This is necessary to overcome the "haslayout" bug that is found in Windows 7 in conjuction with IE8.  For More information see: URL -- http://reference.sitepoint.com/css/haslayout.html */
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align:center; /* This allows for the centering of the container and overcomes a bug inherent in IE 5 */
        color: #000000;
        list-style-image: none;
        background-color: #FCFCFC;
    h1,h2,h3,h4,h5,h6 {
    color:#000066;
    a:link {
        color: #151A96;
        text-decoration: underline;
    a:visited {
        text-decoration: underline;
        color: #1B8DCD;
    a:hover {
        text-decoration: none;
        color: #F30A0A;
    a:active {
        text-decoration: underline;
        color: #151A96;
    #container {
        width: 960px;   
        margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
        text-align: left; /* this overrides the text-align: center on the body element. */
        background-image:
        url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Midsection%20_960.png);
        background-repeat: repeat-y;
    #header {
            padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
            width:960px;
            height:332px;
            background-image:
            url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960.png);
            background-repeat:no-repeat;
    #header h1 {
        margin-right: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
        padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
        display:none;
    #header img {
        display: none;
    #Main_nav_contents {
        padding: 0;
        margin-top: 0px;
        height: 39px;
        width: 950px;       
        padding-top: 275px; 
        padding-left: 39px;
        z-index: 3; 
    #MenuBarVertical {
        margin-bottom: 50px;
        padding-top: 50px;
        padding-bottom:200px;
        padding-left: 15px;
        padding-right: 15px;
    .mainContent_left {
        margin: 0;/* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
        padding-left:30px;
        padding-right:20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
        width: 600px;
        float: left;
    .sidebar_right {
        float: right; /* since this element is floated, a width must be given */
        width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
        margin-top: 30px;
        margin-left:0;
        margin-right:10px;
        font-size:90%;
    .mainContent_right {
        margin-left: 10px;
        padding-left:30px;
        padding-right:20px;
        width: 600px;
        float: right;
    .sidebar_left {
        float: left; /* since this element is floated, a width must be given */
        width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
        margin-top: 30px;
        margin-left:30px;
        margin-right:0;
        overflow: hidden;
        font-size:90%;
    .main_content_centered {
        width: 650px;
        margin-left: 155px;
    .main_content_centered_header {
        margin-left: 75px;
    .sidebar_textbox {
        margin: 0px;   
        width: 260px;
        padding: 2px;
    .sidebar_textbox_header {
        width:255px;
        height:58px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20He ader.png);
    .sidebar_textbox_background_middle {
         width: 255px;   
        padding-top: 12px;   
        padding-bottom: 10px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20Mi ddle.png);
        background-repeat: repeat-y;
    .sidebar_textbox_content {
        /* The width and padding are set as follows to accomodate quirks in browser rendering and to ensure that text is contained within the background of the text box */
        width: 230px;
        padding-left: 20px;
        padding-right: 40px;
    .sidebar_textbox_footer {
        width:255px;
        height:64px;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20Foo ter.png);
    #issues_menu a:link {
        color: #151A96;
        text-decoration: none;
        font-weight:bold;
    #issues_menu a:visited {
        color: #151A96;
        font-weight:bold;
        text-decoration: none;
    #issues_menu a:hover {   
        color: #F30A0A;
        font-weight:bold;
        font-style: oblique;
        text-decoration: none;
    #issues_menu a:active {
        color: #151A96;
        font-weight:bold;
        text-decoration: none;
    #archives {
        padding-top: 15px;
        padding-right: 15px;
        padding-bottom: 20px;
        padding-left: 0px;
    .landscape_textbox {
        width: 500px;
        margin-right: 0px;
        margin-left: 30px;
        padding-top:35px;
        padding-bottom: 25px;
        font-style: normal;
        font-weight: normal;
    .landscape_textbox_hdr {
        width:500px;
        height:38px;
        margin:auto;
        padding:0;
        background-image:
    url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20Header.png);
    .landscape_textbox_middle {
        width:auto;
        margin:auto;
        padding-top: 12px;
        padding-bottom: 12px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/landscapte%20Textbox%20 Middle.png);
        background-repeat:repeat-y;
    .landscape_textbox_content {
        width:450px;
        padding:25px;
    .landscape_textbox_ftr {
        width:500px;
        height:44px;
        margin:auto;
        padding:0;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20F ooter.png);
    #footer {
        padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
        width: 960px;
        height: 222px;
        background-image:
        url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_960.png);
        background-repeat:no-repeat;
    #footer p {
        margin: 0px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
        padding:0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
        text-align:center;
        margin-left: 50px;
        margin-right: 50px;
        padding: 10px;
        font-size: small;
    #footer h5 {
    text-align:center;
    .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 */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .dropcap {
        display: block;
        float: left;
        line-height: 80%;
        font-size: 250%;
        font-weight: bolder;
        color: #000066;   
        padding: .03em .1em 0 0;
    .red_arrows {
        list-style-position: outside;
        list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Arrow%20Large.png);   
    .blue_bullets {
        list-style-position: outside;
        list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Bullet%20Medium%20Full.png);   
    .attention {
        color: #F30A0A;
        font-size:x-large;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight:900;
    .attention_small {
        color: #F30A0A;
        font-size:large;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight:900;
    .table {
        table-layout:fixed;
    .blue {
        color: #00F;
    #container .mainContent_left p .blue {
        color: #0303A0;

    Hello Martin:
    Thanks for your input.  However I am not certain we have resolved this issue adequately, or understand the principles governing the css as regards this spry menu framework 2.0 (1.0).
    For example, the menu only works in IE 6.0 if the css remains in the head.  I agree with your original post that it shouldn't make any difference whether the css is posted in the head or in a separate style sheet (so long as specificity issues are addressed).  Both should work -- and yet it doesn't.
    If the CSS is placed in the separate style sheet governing the total site, it doesn't work for 6.0.  If placed at the top of the style sheet, conflicts of specificity prevent the menu from rendering properly in any of the browsers causing the rules for general links to govern the menu.   This has been verified using a cross browser testing.  If the styles are placed at the bottom of the style sheet to help them take precedence, they work in all the browsers except for IE 6.
    The website I am building needs to support IE 6 for a variety of reasons, and because it is catering to the non-profit community and to low income persons, I am mindful of even small differences in page weight.
    So for me, at least, the issue remains baffling.
    I appreciate your input, but also would appreciate the input from others, and especially Adobe Community Professionals and employees.  The spry framework in this regard is not well documented.  I am not certain if this is exclusively a CSS problem, if it might also be complicated by the architecture of the spry framework, or if indeed other variables are at play.
    I would be my hope that in resolving the problem, other users of the this particular spry framework might also benefit.
    Thanks,
    Steve.

  • Problem with spry menu bar position:fixed?

    Hello technical heros,
    I'm having trouble with my website's spry menu bar... here is the site.
    As you can see, when you scroll down, the spry menu overlaps the header fixed block, which the rest of the content smoothly scrolls under. How do I tell the spry object to do the same?
    I also want the sidebar 2 (menu bar) to be a fixed block like my header and footer. I know how to do this, but when I change the css, it throws my spry menu over to the left of the page, ontop of my sidebar 1.
    Help, please!!

    Hi,
    Have a look here: http://www.w3schools.com/Css/css_positioning.asp
    I hope this helps.
    Ben

  • Safari bold text causing problem with Spry Menu Bar

    I have made a web site using a Spry Menu bar. It worked fine across all browsers, as far as I knew. I was just alerted by th esite owner that the menu bar had the last link out of position when viewed in Safari. I'm not sure when this started happening. I notice the text in Safari is more bold than firefox or IE. My guess is that's the problem. I searched on google for help and found this
    Add - text-shadow: 0 0 0 #000; to the css.
    I tried that but it doesn't seem to have any effect.
    the site is here:
    http://www.telluridegravityworks.com/
    Can anyone offer any advice on how I might fix this? Thanks!

    I'm not seeing the issue in Win 7/Safari (assume it's a Mac issue) but I do see it in Win 7/IE9.
    In the CSS file, http://www.telluridegravityworks.com/css/gravity-works-winter.css
    tweaking the width of the navbar container fixes it here
    #nav-menu {
    width: 455px; /* adjusted from 445px */
    padding: 0px;
    overflow: hidden;
    float: left;
    margin-left: 515px;

  • Having Trouble with Spry Menu Bar Hover Image

    I added a hover image to the spry menu bar, however, whenever I roll my mouse over the buttons all, but one of the buttons' fonts grow in size, also increase the size of the button. Can someone please help me with this?

    Hello,
    the culprit must be in your (horizontal or vertical) "SpryMenuBar.........al.css". Please send us a link to your website in question, so we can better analyze.
    BUT, and I quote from different contributions of the forum:
    "Spry has been deprecated and is no longer officially supported by Adobe", “Adobe abandoned Spry late last year after CS6 came out. Future products will probably not contain any Spry so learning to use jQuery is a valuable skill to have for the future.” “The news was released in August last year: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l”.
    I'd recommend you switch to a jQuery library for your further requirements.
    If you have a budget to work with, look at PVII's Pop-Menu Magic3:
    http://www.projectseven.com/products/menusystems/pmm3/index.htm
    jQuery Superfish (free): http://users.tpg.com.au/j_birch/plugins/superfish/ aso.
    Hans-Günter

  • Problem with spry menu bar

    i'm using dreamweaver CS3 to create a website using php
    scripting. for some reason, my spry menu bar has become messed up.
    it is now in bulleted form and the font and font color are all
    wrong. i checked but the styles are turned on.. so how can i solve
    this?

    Find that some reason that the spry menu bar became messed up
    and revert to how it was before that some reason occurred.
    Hope that helps!

  • Problems with Vertical Spry menu bar in Internet Explora

    Hi I'm new to Dreamweaver,
    I having trouble with a new site I'm making in CS4. A problem with a vertical menu bar, in IE. Can anyone help?
    1. The text is left aligned and should be centered.
    2. The menu bar has moved left
    3. My paragraph text has moved up the page and aligned itself to the to the menu bar.
    Website address: http://www.greenwyse.co.uk/
    I'm finding dreamweaver a bit clunky, reading the 'Missing Manual' but still very frustrating. Any one have any idea's/
    cheers
    myquirk

    Sorry, but your CSS is has been mangled beyound recognition.
    The solution is to start with an untouched style sheet. Then add or modify the CSS testing in your browsers as you make the changes.
    Have a look at the following where I have positioned the menu. All that is now required is the styling for font and the hover event.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet">
    <style>
    body {width: 960px;    margin: auto;}
    .article {clear: both; margin: 20px;}
    /* SPRY MENUBAR */
    ul.MenuBarVertical {width: 29em; margin: auto; border: none;}
    ul.MenuBarVertical li {width: 29em; text-align: center;}
    ul.MenuBarVertical a {background-color: transparent;}
    </style>
    </head>
    <body>
    <h1><img src="http://www.greenwyse.co.uk/greenwyse natural products/green_wyse_logo.png" width="200" height="136" alt="Green Wyse Natural Body Care Products" longdesc="greenwyse natural products/green_wyse_natural_body_care_products.png" /></h1>
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="index.html">100% Natural</a></li>
      <li><a href="greenwyse natural products/about dawn Ireland.html">Handmade</a></li>
      <li><a href="greenwyse natural products/Hand-Made-Natural-Bodycare.html">Eco Friendly</a>      </li>
      <li><a href="greenwyse natural products/green wyse body care products.html">Luxurious Body Care</a>    </li>
    </ul>
    <div class="article">
      <p>Working through a top-down, bottom-up approach, the vitality of conceptual synergies is of supreme importance to focus on improvement, not cost. Motivating participants and capturing their expectations, through the  adoption of a proactive stance, the astute manager can adopt a position at the vanguard. Building flexibility through spreading knowledge and self-organization, by moving executive focus from lag financial indicators to more actionable lead indicators, the new golden rule gives enormous power to those individuals and units.</p>
      <p>Organizations capable of double-loop learning, empowerment of all personnel, not just key operatives, measure the process, not the people. In a collaborative, forward-thinking venture brought together through the merging of like minds. The balanced scorecard, like the executive dashboard, is an essential tool in order to build a shared view of what can be improved, the vitality of conceptual synergies is of supreme importance. While those at the coal face don't have sufficient view of the overall goals.</p>
    </div>
    <!-- I prefer to keep the JS at the bottom of my document -->
    <script src="SpryAssets/SpryMenuBar.js"></script>
    <script>
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    Gramps

  • Problems with spry menu bar in IE

    Hi.... I'm sorry if this has been covered somewhere, I promise I looked and couldn't find anything.  I've been working with Dw for a little over a month now and have generally been able to find whatever I needed.  But I've hit a wall:  My pages display just fine in Opera, Safari, Firefox.... but in Mac's IE, none of the spry works (loaded from the server) and in Windows IE 7 & 8 the collapsible panels work but for the menu bar, the children menus come down from the top of the page (instead of below the parent).  I've tried putting the menu in its own header container and the problem still happens.  Nothing I do or can find as patches have helped make the Mac IE work (but from what I hear that's typical....).  I am absolutely desperate for help!
    The original page is: http://www.tumorvirology.pitt.edu
    and a testing with the separate header can be seen at:  http://www.tumorvirology.pitt.edu/dev/testsite/test1.html
    The css files for the menu bar and panel for the first site is attached below.
    Thank you so much for your time and help!
    Susan

    I have this exact same problem. My submenus are dropping down from the top of the screen in IE. I did what you suggested here and it did not work for me. Help! Here is my CSS:
    @charset "UTF-8";
    /* 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
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    position: inherit;
    left: 98px;
    top: 234px;
    /* 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
    /* 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: 7.5em;
    float: left;
    background-color: #D35D35;
    /* 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-size: 100%;
    cursor: default;
    width: 8.2em;
    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;
    position: absolute;
    z-index: inherit;
    top: auto;
    #leftnav {
    padding: 7px 5px 5px;
    width: 158px;
    float: left;
    height: auto;
    position: absolute;
    z-index: 20;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 8.2em;
    /* 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: #D35D35;
    padding: 0.5em 0.75em;
    color: #FFFFFF;
    text-decoration: none;
    /* 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: #D35D35;
    color: #333333;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #D35D35;
    color: #333333;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    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: inherit;
    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;

  • Having Problem with Spry Menu - Help appreciated

    Hello there
    I am currently developing my website but I am having terrible problems with the spry menu. I have tried lots of things but not yet resolved the issue. I will try to give as much info as possible. My website is www.huntfilms.ie
    When I am in dreamweaver the site looks fine and when I preview in browser also looks fine but when I have uploaded to server there is the problem as you can see.
    I uploaded all the files that are required I think . I have attached a screen grab of my server view below. : I have six spry files : js,css and four giff files : I have included the code below. I would apprecaite help as been at this for best part of day with no luck ; going mad here
    thanks
    Barry
    <script src="file:///Macintosh HD/Users/barryhunt/Desktop/huntfilms1/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="file:///Macintosh HD/Users/barryhunt/Desktop/huntfilms1/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="oneColElsCtrHdr">
    <div id="container">
      <div id="header">
        <h1>Hunt Films</h1>
      <!-- end #header --></div>
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="file:///Macintosh HD/Users/barryhunt/Desktop/huntfilms1/home.html">home</a>    </li>
        <li><a href="file:///Macintosh HD/Users/barryhunt/Desktop/huntfilms1/sample.html">Sample work</a></li>
        <li><a href="file:///Macintosh HD/Users/barryhunt/Desktop/huntfilms1/Contact.html">Contact Us</a>    </li>
    </ul>
    <div id="mainContent">
        <p><iframe src="http://player.vimeo.com/video/17962693?title=0&byline=0&portrait=0" width="400" height="320" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe> </p>
        <p> </p>
        <p>Welcome! </p>
        <p>Hunt Films was set up in January 2011 by documentary maker Barry Hunt.</p>
        <p>Barry received training in TV and Video Production with FÁS in Tralee, Co Kerry. During this training Barry produced a series of short films about local artists. In 2006 he worked as assistant editor on the successful RTÉ drama series, ‘Love is the Dfile:///Users/barryhunt/Desktop/Picture%201.pngrug’.</p>
        <p>Since 2010 Barry has embarked on solo projects producing two entertaining half hour documentaries. 'Liberation', explores the world of pigeon racing in Dublin. This film was very well received at the Galway Film Festival 2011. More recently Barry produced 'The Gregory Seat', a documentary which follows Maureen O'Sullivan’s campaign to be elected in the 2011 General Election.</p>
        <p>Barry looks forward to producing more documentaries. He is interested in human stories and hopes that this will form the basis of his future work. At present, Barry is developing projects for film festivals and general broadcast    </p>
        <p> </p>
      <!-- end #mainContent --></div>
      <div id="footer">
        <p>Footer</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>
    server view  of files uploaded file:///Users/barryhunt/Desktop/Picture%201.png

    here is the code still not working can anyone tell me why
    <!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% Verdana, Arial, Helvetica, sans-serif;
              background: #666666;
              margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
              padding: 0;
              text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
              color: #000000;
    /* Tips for Elastic layouts
    1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
    2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
    3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
    .oneColElsCtrHdr #container {
              width: 46em;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
              background: #FFFFFF;
              margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
              border: 1px solid #000000;
              text-align: left; /* this overrides the text-align: center on the body element. */
    .oneColElsCtrHdr #header {
              background: #DDDDDD;
              padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    .oneColElsCtrHdr #header h1 {
              margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
              padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    .oneColElsCtrHdr #mainContent {
              padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
              background: #FFFFFF;
    .oneColElsCtrHdr #footer {
              padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
              background:#DDDDDD;
    .oneColElsCtrHdr #footer p {
              margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
              padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="oneColElsCtrHdr">
    <div id="container">
      <div id="header">
        <h1>Header</h1>
      <!-- end #header --></div>
      <div id="mainContent">
        <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>
        <h1> </h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
        <h2>H2 level heading </h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
      <!-- end #mainContent --></div>
      <div id="footer">
        <p>Footer</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>

  • Please can someone provide me with Spry Menu Bar Horizontal code for Dreamweaver CS5.5?

    Please can someone provide me with Spry Menu Bar Horizontal code for Dreamweaver CS5.5?

    Log-in to the Adobe Exchange with your Widget Browser and grab "Spry Menu 2.0."
    http://labs.adobe.com/technologies/widgetbrowser/
    In Widget browser, style the menu as desired and Save files to your DW Local Site folder.
    Nancy O.

  • HAVING A HARD TIME WITH SPRY MENU BAR

    Could someone pls help!?? I'm constructing a site using the spry menu bar, but it simply does not seem to work. I've created the menu bar on my index page, and then copied it to all the following pages. The problem is, that when I click on the 1st item the link works fine, and a new page opens - when I click on the 2nd item (on the recently opened page), the link does not work and an error page displays. As far as I can see the problem is: the files are kept in a folder, the 1st page opens /folder/file - but the 2nd page opens /folder/folder/file (the folder occurs twice in the path, as if the site does not "reset" the first link, before opening the second). I've checked the links, and everything I can think of, without finding a solution. I've uploaded the relevant pages to my site: www.kiriwdclient1.com (trying to find the error, I inadvertenly errased all my changes to the spry-css, thats why its the basic version on the pages).
    Thanks for any help.

    You have your links like this:
    <li><a href="#" class="MenuBarItemSubmenu">Casablanca Valley</a>
                    <ul>
                      <li><a href="casablanca/cb_valley.html">The Valley</a></li>
                      <li><a href="casablanca/cb_vineyards.html">Vineyards</a></li>
                      <li><a href="casablanca/cb_cepes.html">Cepes</a></li>
                      <li><a href="casablanca/cb_vineyard_types.html">Vineyard Types</a></li>
                      <li><a href="casablanca/cb_festivals.html">Wine Festivals</a></li>
                    </ul>
                </li>
    but change them to a absolute url like this:
    <li><a href="#" class="MenuBarItemSubmenu">Casablanca Valley</a>
                    <ul>
                      <li><a href="/casablanca/cb_valley.html">The Valley</a></li>
                      <li><a href="/casablanca/cb_vineyards.html">Vineyards</a></li>
                      <li><a href="/casablanca/cb_cepes.html">Cepes</a></li>
                      <li><a href="/casablanca/cb_vineyard_types.html">Vineyard Types</a></li>
                      <li><a href="/casablanca/cb_festivals.html">Wine Festivals</a></li>
                    </ul>
                </li>
    And it should fix your issue

  • Need help with Spry Menu Bar

    Hello,  I have two templates that I am using.  Both have a horizontal menu bar across the top of the page and then two Vertical Spry Menu Bars down the left hand side of the page - one above the other.  On one template, all menu bars are working correctly.  On the other template, 2 out of three are working correctly.  Not sure what's happening here.  The spry menu bar that is not working correctly is under "Books & Materials" heading.  The menu bar is supposed to turn green when you mouse over it, but instead everything turns white and looks like it "disappears".  I have no idea why it would work on one template and not the other.  Or for that matter, why it is working on one vertical spry menu bar, but not the other on the same page.  Can anyone help me?   www.springerlejoy.com/proanimals4.html  This is a page that shows where it is not working.  Basically, all of the products pages are having this problem.  If you go to the home page:  www.springerlejoy.com you will see that this page is working - using a different template.  Can anyone help me?  I'm at a loss!  Thanks!
    Debbie
    Here is the code for the template that is NOT working:
    <!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>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <link href="../thrColFixHdr.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    .thrColFixHdr #sidebar1 { width: 180px; }
    .thrColFixHdr #sidebar2 { width: 190px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
    .thrColFixHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <!--[if IE]>
    <style type="text/css">
    .thrColFixHdr #container { zoom: 1; }
    </style>
    <![endif]-->
    <style type="text/css">
    <!--
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    document.write(unescape("%3Cscript
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-11559638-1");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    body {
    background-color: #CCEA86;
    .maincontenthdr {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    font-style: italic;
    font-weight: bold;
    color: #530000;
    text-align: center;
    height: 29px;
    .maincontenthdr1 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    color: #600;
    .maincontenttxt {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: #000;
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    .thumbnail{
    position: relative;
    z-index: 0;
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -800px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */
    -->
    </style>
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    //-->
    </script>
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    background-color: #CCEA86;
    -->
    </style>
    <link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="thrColFixHdr" onload="MM_preloadImages('../history2.gif')">
    <div id="container">
      <div id="header">
    <table width="810" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td><div class="hdrtxt">
          <p>2104 Clairmont Drive<br />
            Pittsburgh, PA 15241<br />
            T 412-616-9066<br />
            F 412-220-2074 </p>
          </div></td>
        <td align="center"><a href="../index.html"><img src="../logo3.jpg" width="313" height="149" border="0" /></a></td>
        <td><div class="rthdrtxt">Cookie Molds from <br />
          the Old World for <br />
          Baking and Crafts</div>
           </td>
      </tr>
      <tr>
        <td width="189" background="../lines.gif"></td>
        <td width="409" align="center" background="../lines.gif"> </td>
        <td width="182" background="../lines.gif"></td>
        </tr>
      <tr bgcolor="#BB7C4E">
        <td colspan="3" align="left"><ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="../index.html">Home</a></li>
    <li><a href="../aboutus4.html">About Us</a></li>
    <li><a href="../howtoorder4.html">How To Order</a>          </li>
          <li><a href="../information4.html">Information</a></li>
          <li><a href="../contactus4.html">Contact Us</a></li>
          <li><a href="../recipeshome.html">Recipes</a></li>
          <li><a href="../events4.htm">Events</a></li>
          <li><a href="../gallery4.html">Photo Gallery</a></li>
        </ul></td>
        </tr>
    </table>
    <div class="divmenubar"> </div>
    </div>
      <div id="sidebar1">
        <div class="FeatureItem">
    <div align="center"><span class="FeatureItemHead"> </span>
      <div>
        <div class="Products">Products
          <br />
          <br />
        </div>
    <div class="proHeaders">Molds</div>
      </div>
    </div>
    <ul id="MenuBar2" class="MenuBarVertical">
      <li><a href="../proangels4.html">Angels</a>      </li>
        <li><a href="../proanimals4.html">Animals</a></li>
        <li><a href="../probaby4.html">Baby</a>      </li>
        <li><a href="../probiblical4.html">Biblical</a></li>
        <li><a href="../probirds41.html">Birds</a></li>
    <li><a href="../prochildren4.html">Children</a></li>
        <li><a href="../prochristgen4.html">Christmas, General</a></li>
        <li><a href="../prochristrel41.html">Christmas, Religious</a></li>
        <li><a href="../procornucopia4.html">Cornucopia</a></li>
        <li><a href="../procultfig4.html">Cultural Figures</a></li>
        <li><a href="../profishing4.html">Fish</a></li>
        <li><a href="../proflowers4.html">Flowers &amp; Plants</a></li>
        <li><a href="../profruits4.html">Fruit</a></li>
        <li><a href="../progeometric4.html">Geometric</a></li>
        <li><a href="../progermany4.html">Germany</a></li>
        <li><a href="../prohearts4.html">Hearts</a></li>
        <li><a href="../proinsects4.html">Insects</a></li>
        <li><a href="../proluck4.html">Luck</a></li>
        <li><a href="../promarriage4.html">Marriage</a></li>
        <li><a href="../promultiple4.html">Multiple Images</a></li>
        <li><a href="../promusic4.html">Music</a></li>
        <li><a href="../pronautical4.html">Nautical</a></li>
        <li><a href="../proscenes4.html">Old Time Scenes</a></li>
        <li><a href="../propeople4.html">People in Old Times</a></li>
        <li><a href="../prosayings4.html">Sayings</a></li>
        <li><a href="../proschool4.html">School</a></li>
        <li><a href="../proseasons4.html">Seasons</a></li>
        <li><a href="../prostar4.html">Star</a></li>
        <li><a href="../prostory4.html">Story / Legend Characters</a></li>
        <li><a href="../prosunmoon4.html">Sun &amp; Moon</a></li>
        <li><a href="../proswitzerland4.html">Switzerland</a></li>
        <li><a href="../prosymbols4.html">Symbols</a></li>
        <li><a href="../protransportation4.html">Transportation</a></li>
        <li><a href="../prozodiac4.html">Zodiac</a>    </li>
    </ul>
    <div class="proHeaders"><br />
      Books &amp; Materials</div>
    <ul id="MenuBar3" class="MenuBarVertical">
      <li><a href="../probooks4.html">Books</a>    </li>
      <li><a href="../procookies4.html">Cookies</a></li>
      <li><a href="../procutters4.html">Cutters</a>    </li>
      <li><a href="../proflavoring4.html">Flavoring</a></li>
      <li><a href="../profoodcolor4.html">Food Coloring</a></li>
      <li><a href="../promaterials4.html">Materials</a></li>
      <li><a href="../protools4.html">Tools</a><br /></li>
    </ul>
    </div>
    </div>
      <div></div>
      <div id="sidebar2">
        <div class="nxtevents">
          <div class="MenuBarActive">
            <div><a href="http://order.store.yahoo.net/cgi-bin/wg-order?yhst-40727766898036 "><img src="../cart1.gif" name="imgfloatright" width="87" height="26" border="0" id="imgfloatright" /></a></div>
            <p><br />
              <br />
            </p>
          </div>
          <div class="nxtevents">
            <div class="maincontenttxt">
              <div class="moldscenter"><span class="maincontenthdr1">Featured Item<br />
                </span>
    <p class="thumbnail"><a class="thumbnail" href="#thumb"><span><img src="1142.jpg" /></span></a> <a class="thumbnail" href="#thumb"><a class="thumbnail" href="#thumb"><img src="1142-1.jpg" width="93px" height="100px" border="0" /></a></p>
                <br />
                <table width="130" cellpadding="0" cellspacing="0">
        <tr>
          <td width="61" align="right" class="maincontenttxt">1142</td>
          <td width="67" align="right" class="maincontenttxt"><div align="right">$31.00</div></td>
        </tr>
      </table>
                <br />
                <a href="../proanimals4.html">The Three Rabbits springerle mold, dia. 3.5&quot; (90mm)</a><br />
                <br />
                <form method="post" action="<!--#ystore_order id=1142 -->">
              <p align="left" class="buttoncenter">
                <input type="submit" value="Order Now" />
              </p>
            </form><br />
              </div>
              <p class="nxteventshdr">News...        </p>
            </div>
            <p>2/8: Just Arrived from Switzerland today<br />
              <strong><U><br />
              <a href="../prohearts4.html">11 New Heart   Molds</a></U></strong><a href="../prohearts4.html"><U>!</U></a><U><br />
            </U></p>
          </div>
          <div id="moreevents">
            <p>2/7: See our new photos in the <a href="../gallery4.html">Photo Gallery</a>!</p>
          </div>
        </div>
        <div>
          <p class="nxteventshdr">Newsletter</p>
          <p class="nxtevents">To automatically receive our e-mail newsletter with new mold information, tips and tricks, photos of cookies and art, and historical profiles of featured molds, please fill in the form below and press &lt;Submit&gt;</p>
          <form method=post action="http://us.1.p6.webhosting.yahoo.com/forms?login=springerlejoy" id="form1" name="form1">
            <p class="maincontenttxt">First Name
      <input name="formFirstName" type="text" class="maincontenttxt" id="formFirstName" />
            </p>
            <p class="maincontenttxt">Last Name
              <input name="FormLast" type="text" class="maincontenttxt" id="FormLast" />
            </p>
            <p><span class="maincontenttxt">Email Address
                <input name="FormEmail" type="text" class="maincontenttxt" id="FormEmail" />
            </span></p>
            <div id="button">
              <input type="submit" name="SubmitButton" id="SubmitButton" value="Submit" />
            </div>
            <p> </p>
          </form>
          <p> </p>
          <p><a href="http://smallbusiness.yahoo.com/ecommerce/" target="_blank"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/smallbiz/gr/ecomby_128bit.gif" alt="ecommerce provided by Yahoo! Small Business" width="118" height="55" border="0" align="middle"/></a> <br />
            <br />
          <a href="http://www.facebook.com/pages/Springerle-Joy/243604195833?ref=search&amp;sid=1000000928365 99.173275996..1&amp;v=wall#!/pages/Springerle-Joy/243604195833?v=wall&amp;ref=search"><img src="../5u84f48n.gif" width="144" height="44" /></a> </p>
        </div>
        <!-- end #sidebar2 -->
      </div>
      <div id="mainContent">
      <div class="maincontenthdr"> <!-- TemplateBeginEditable name="EditMainContHdr" -->   
        <p class="maincontenthdr">Products</p><div class="leafpic"><img src="../leaves3.jpg" width="420" height="32" /></div>
      <!-- TemplateEndEditable --></div>
    <div> 
      <div class="maincontenthdr1">
        <table width="418" border="0" cellspacing="0" cellpadding="0">
          <!-- TemplateBeginRepeat name="RepeatRegion1" -->
            <tr>
              <td width="87" rowspan="2" valign="top"><!-- TemplateBeginEditable name="EditRegion6" --> <!-- TemplateEndEditable --></td>
              <td width="255" valign="bottom" class="itemno"><!-- TemplateBeginEditable name="EditRegion7" --> <!-- TemplateEndEditable --></td>
              <td width="76" valign="bottom" class="price"><!-- TemplateBeginEditable name="EditRegion8" --> <!-- TemplateEndEditable --></td>
            </tr>
            <tr>
              <td valign="top" class="maincontenttxt"><!-- TemplateBeginEditable name="EditRegion10" --> <!-- TemplateEndEditable --></td>
              <td class="orderbutton"><!-- TemplateBeginEditable name="EditRegion11" --> <!-- TemplateEndEditable --></td>
            </tr>
            <!-- TemplateEndRepeat -->
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
        </table>
        <p> </p>
        <div class="maincontenttxt"></div>
        <p> </p>
    <div class="maincontenttxt"></div>
      </div>
    </div>
      </div>
    <p>
       <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
      </p>
    <p><br class="clearfloat" />
      </p>
      <div id="footer">
      <div id="copyrighttxt">
      <p>Copyright© by Springerle Joy, LLC 2010</p>
    </div>
    <!-- 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"});
    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    File cannot be found. Try
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    File cannot be found. Try
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="file:///Macintosh HD/Users/julesmazur/Desktop/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    This link points to a local file on your local harddrive and can therefore not be found. However, this file is not needed because the file will be linked as above.
    Gramps

  • Alignment Issues with Spry Menu Bar in Safari

    www.laurentambard.com    
    I am new to CS5 and currently building a site for a friend.  Having issues with aligning then far right spry menu bar so that it is flush with the page.  It only shows a problem on Safari (as far as I know).  Also the second tab (About) is dropping down slightly when the drop down menu is selected and not sure how to fix it.

    If you place the menubar in a container with an ID of nav or similar and a background color of #EEE so that it blends in with the background colour of the menu items, the centralise the menubar and menu items as per http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml, it should go a long way to meeting your requirements.
    Gramps

  • Help with spry menu bar in liquid layout

    I need help getting a spry menu bar with a 6-item list to stay in place in a liquid layout.  Trying to get it horizontally under the header image.  I am new to web design (new to html and code: reading books, searching web, and doing tutorials for many hours now), using CS4, working on a mac.  You can view my trial page on cc-tn.com.  I would appreciate any help offered!

    Problem stems from the fact that your page is looking for files contained on your local hard drive instead of the web site.
    <script src="file:///Macintosh HD/Users/Allison/CC Web/Templates/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="file:///Macintosh HD/Users/Allison/CC Web/Templates/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    In addition, the links to PDF files are pointing to your local hard drive.
    p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Foundations_one-page_green.pdf">Foundations</a> is a grammar-stage program for students K4 through sixth grade. Parents attend morning classes with their children as trained tutors model the tools of learning facts from a variety of interesting subjects. Students also participate in  science and fine arts projects and practice public speaking each week.</p>
        <p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Essentials-One-page.pdf">Essentials</a> is a dialectic-stage program for students in third through sixth grade. Trained tutors model the dialectic tools of learning in English grammar, writing, and math drills. Emphasis is placed on the development of writing skills that will enable students to become effective communicators through the written word. Classes meet in the afternoon following lunch.</p>
        <p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Challenge_one-page.pdf">Challenge A &amp; B</a> are dialectic-stage programs for seventh and eighth graders. Emphasis is placed on group discussion as students become more independent learners. Students focus on logic and debate.</p>
    Did you define a local site folder in DW before you began this project?  Without this critical first step, DW cannot correctly manage assets for you.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

Maybe you are looking for

  • Adobe cs6 apps not working with OS X Yosemite

    Illustrator and After Effects are not working with OS 10.10.1  After Effects opens into and is stuck in Render Queue. Illustrator says it need a previous version of java. Im a little nervous about going with a older version of java on my new machine

  • Apple tv remote doesn't work so I programmed my time warner remote but can't unpair old remote

    I haven't used my apple tv in months and today when I tried using it the remote would not work.  I then tried to program my time warner remote to the apple tv and after I did this whenever I pressed a button on the remote a light flashes three times

  • Can iTunes sync multiple songs with the same name?

    My iTunes library has multiple songs with the same name (but they point to different files on the filesystem). Curiously when iTunes syncs to my iPhone it will only ever sync two of the files, even if more exists. I suspect what is happening is descr

  • DTD reference not avaiable

    Hi, Since yesterday we observe that http://java.sun.com/dtd/ URL is responding very badly. Most of the time connection times out or reset. I tried from different different network and same issue observed. Because of this application build fails. Is t

  • ITunes 8.2.1 won't reload, keep getting an error message

    Earlier today I tried to upgrade to a newer version of iTunes. That failed. So now my iTunes won't open. I've tried to reinstall 8.2.1 and each time I receive a message that states there was an error while trying to install, please try again. Any sug