Spry Menu Bar display problem on the MAC

Hello!
I'm having issues with spry menu bar not displaying properly
on the mac browser.
i474.photobucket.com/albums/rr104/nastasia_20/DSC02618.jpg
it should look like this
s3.amazonaws.com/sitevista/c356ba1e-7f66-4cec-9b41-bc90b86455ee1773886_IE7.png
You can find the page here : www.
siia-design.com/eco_totes/modern_mums.html
Any ideas what is wrong?
Thank you

Not an issue any more. I re-loaded the site w/o the menu bar
after I made the original post (as you saw) because of the
incompatibility issue I was having between Spry and IE6 & 7.
Before that, I first updated Spry, re-loaded the page with Spry
menu and still had the same IE 6 & 7 issue. Frankly, I simply
gave up on Spry, due to time constraints in getting a new site
layout operational (today was my deadline). From what I've read on
these and and other forums, Spry does not play well with IE,
especially IE7. Unfortunately for me, I don't use IE at all, so
rely on Dreamweaver's compatibility check to tell me if all is
well. Why Spry works so well on Safari, Firefox and Netscape, and
not on IE, is beyond me. Thanks, anyway for your comment. Much
appreciated.

Similar Messages

Spry Menu Bar Positioning Problem in IE

I have a Dreamweaver-created Spry Menu Bar drop down menu which works perfectly in every browser on my Mac and on my PC . . . EXCEPT Internet Explorer (who woulda thunk it?!!)
In all browsers except for IE, the 3 submenu items under "Door Systems" and "Gallery" appear exactly as they should in a vertical row, positioned just below the brown line below the navigation links and all the same width. But in IE they appear higher up and with different widths. IE is ignoring the rules for width and position.
<ul id="MenuBar2" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="closet_doors_gallery.html">DOOR SYSTEMS</a>
      <ul>
        <li><a href="sliding_doors_nyc_nj.html">DOOR PROFILES</a></li>
        <li><a href="bifold_doors_nyc_nj.html">PANELS COLORS</a></li>
        <li><a href="room_dividers_nyc_nj.html">DOOR SYSTEM TYPES</a></li>
      </ul>
    </li>
</ul>
<ul id="MenuBar3" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">GALLERY </a>
      <ul>
        <li><a href="#">SLIDING DOORS</a></li>
        <li><a href="#">BI-FOLD DOORS</a></li>
        <li><a href="#">ROOM DIVIDERS</a></li>
      </ul>
    </li>
</ul>
Here is the page where you can see the problem if you view it with IE, and see that it's fine in Safari, and Firefox,    Chrome and Opera, Mac or PC:
http://2113web.com/indeco/index.html
I have a feeling it's a simple fix of the css, but I can't figure it out - I would really appreciate anyone's help with it - thank you!
Below is the 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%;
    font-weight:bold;
    cursor: default;
    width: 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: auto;
    float: left;
    white-space: nowrap;
/* 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: auto;
    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;
    top: 63px; /*THIS POSITIONS THE SUBMENU BELOW THE TOP MENU*/
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    float: none;
    background-color:#f5f5e8;
    height:25px; /*THIS POSITIONS THE SUBMENUS HEIGHT*/
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 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:none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: transparent;
    padding: 0.5em 0.75em;
    color: #59330d;
    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: transparent;
    color: #afa06f;
/* 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: transparent;
    color: #afa06f;
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: 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;
Perry

Hi and thank you very much. It was a little confusing as to whether you meant to add the rules you suggested or to replace them, or a combination of both, but I puzzled it out. I created a new MenuBarHorizontal.css file in a blank page and then made the changes you suggested and it works! Yay! I had to do a bit of tweaking to get it to look just the way I wanted, but it now works correctly in ie 7 and 8 and still works fine in everything else.
Interestingly enough, I had to change the margin-top: 63px; rule in "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible" to 40px to get it positioned properly vertically, and I had to get rid of the "border-bottom: solid 1px #EEE;" in "ul.MenuBarHorizontal ul li", which caused the submenu items to have quite a lot of vertical space between them - I'm not sure why!
I also had to get rid of all the syling rules in the "SUBMENU INDICATION: styles if there is a submenu under a given menu item" section, as well as the one you added: "ul.MenuBarHorizontal a.MenuBarItemSubmenu {
    padding: 0.5em 2em 0.5em 0.75em;"
With that done, it works great in both ie7 and ie8, so thank you for the help. Below is the new css that works, in total.
Not being as familiar with the subtleties of CSS as you and many others obviously are, I'm REALLY curious as to exactly what is different that causes this to work now, and would be happy to hear your expanation, if you feel like taking the time to explain. If not, no problem - it works and that is the most important thing! So, thank you again -
Perry
@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;
/* 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: auto;
    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: auto;
    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;
    margin-top: 40px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
/* 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: #f5f5e8;
    padding: 0.5em 0.75em;
    color: #333;
    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: #f5f5e8;
    color: #afa06f;
/* 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: #f5f5e8;
    color: #afa06f;
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
/* 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
/* 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
/* 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
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);
    background: transparent;
/* 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;

Spry Menu Bar Horizontal Problem in Internet Explorer

I'm having a problem with a spry menu bar. It works fine in Firefox and Google Chrome, but in Internet Explorer the submenus shift to the right.
And here's the 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: 0 auto;     padding: 0;     list-style-type: none;     font-size: 100%;     cursor: default;     width: 54em;     border-top-width: thick;     border-right-width: thick;     border-bottom-width: thick;     border-left-width: thick;     border-top-color: #00F;     border-right-color: #099;     border-bottom-color: #093;     border-left-color: #0F9;     top: 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: center;     cursor: pointer;     width: 18em;     float: left;     color: #F00;     background-color: #0000FF;}/* 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;     border: black;}/* 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;     text-align: center;}/* 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%;     text-align: center;     font-family: "Lucida Console", Monaco, monospace;     font-weight: bold;     color: #FF0;     border: 3px solid #039;}/* 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: fixed;     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;               }}
WHAT DO I DO? HELP ME, THANKS.
Ummmmmmm HELLOO.
SOMEONE HELP ME.
....boy you guys are reallllly helping

Ohhhh noooo now it looks like this.
I don't know what to do!!!!
Here, let me give you the css code and the html code.
<style type="text/css">

</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>
<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;         [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>
<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>
@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;
DON'T GIVE UP ON ME. PLEASE.

Spry Menu Bar transparency problem - one solution

Like many other people I have spent several frustrating days trying to solve the problem of Spry Menu Bar sub-menus appearing to be transparent (text, etc. underneath the sub-menus shows above/through the sub-menu items). This problem manifested itself in IE7, but not in Netscape, Safari or Firefox.
I thought it must be the dreaded IE z-index problem.
I have been through most other people's questions and replies on the Adobe forums, tried all kinds of z-index changes and various other mods to my own CSS and/or the Spry CSS's - all to no avail.
My situation:
I have a Spry Menu Bar above a clicktrail and a text block. Both the clicktrail and the text block showed through the sub-menu items, which drop-down over them.
All three items are located in relative-positioned divs, necessary because the whole page design is contained in a self-centralizing container div and absolute-positioned divs screw up the whole page layout when the screen size or browser window size changes.
(Sorry, I can't upload the files to a website at the moment.)
The solution that works for me in Dreamweaver CS4:
I selected the divs for the clicktrail and the text block, one at a time, and selected Modify > Arrange > Send to Back in Dreamweaver CS4.
I then selected these two items again and selected Modify > Arrange > Bring to Front.
Finally I selected the div containing the Spry Menu Bar and selected Modify > Arrange > Bring to Front. The thought behind this was that this would put the Spry Menu Bar on top of everything else - and it works!
This solution works in all four browsers, but don't ask me how! I can't see any change in any CSS, nor in my template code. All I can see is a strange, flashing vertical line (like an enormous cursor - about 10 cm [3"] high) in the middle of the template page only (and only in Dreamweaver) if I click on the page background. I can neither find an explanation for this nor anything in the coding which might cause it. By the way; the z-index for the menu div =2, the z-index for the clicktrail div is not defined and the z-index for the div for the text block is set to auto. I haven't tried other values and to be honest I'm not sure what they were set to before I applied the above 'solution'.
But hey - who the hell cares - my site works!
I hope this helps someone else out of an absolute hell-hole...if someone out there can explain where to find the code that had been changed or added by doing this I'd like to know. I don't like things I can't explain - even if they do work!

This is where the browser is told to supply a white background
ul.MenuBarHorizontal a
     display: block;
     cursor: pointer;
     background-color: #fff;
     padding: 0.5em 0.75em;
     color: #333;
     text-decoration: none;
Vhange the value to transparent.
Also the last line int the CSS should be removed as in
filter: "alpha(opacity=60)";
Gramps

How to fix Spry Menu bar and Firefox with a Mac

The spry menu bar does not properly display in Firefox (Version11&12) on a mac. Have looked at a number of different ways to fix this. Included is a copy of css for menu bar. Would appreciate any suggestions.
/* 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;
/* 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: 11em;
          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: 11em;
          left: -1000em;
          position: relative;
/* 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: 11em;
          float: none;
/* 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
          /* [disabled]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: #FFFFCC;
          padding: 0.5em 0.75em;
          color: #4F8627;
          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: #FFFFCC;
          color: #4F8627;
/* 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: #FFFFCC;
          color: #4F8627;
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: 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;

Change
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 11em;
          left: -1000em;
          position: relative;
to
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 11em;
          left: -1000em;
          position: absolute;
Gramps

Spry menu bar -- only one of the submenus of a drop down set works.

I created a spry drop-down menu bar for navigation within my site for a special event (on October 19). Most items have only one filie (e.g., tickets) but some of the items (e.g., Historic Homes) have up to 8 sub-items.
I renamed the spry file. I defined all my menu and sub menu items using the dialog box. I styled the bar for both basic state and "hover."
So far, so good.
I then created multiple new pages by using "Save As" (the original menu bar file)-- substituting appropriate text to to make the additional item and sub item files.
But when I link it all up and test it, only ONE of the submenus work. The menu disappears from the other sub menu pages when I navigate to them. Users can't get back to the original menu choices..
This is the first time with a Spry Menu bar.
Can you help?
Susan

Without seeing your code, I'm guessing your lists and sub-lists are not properly coded. Check your HTML & CSS with the validation tools below:
Code validation tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.

Spry Menu Bar (horizontal) - Problems with uneveness (height variance) between adjacent items

Hello:
Like many I will confess that I am new to the spry experience and attempting to catch up. I am trying to design a horizontal menu bar that employs a background image (repeating GIF gradient bar repeated along the the x-access) to create a beveled/rounded edge effect. I have another with a different hue that is used on focus and mouse over, etc. While this works well with the drop downs, there appears to be a "boxiness" between adjacent top level menu items and they appear to have slightly different height. This seems to be determined by the text forms the content of any link or menu item. In effect it creates other differences in appearance as the outer most (top and bottom edges) of the GIF appear to be cut off from one menu item to the next. This leaves a very undesirable look to the page as it juts up and then falls back as it the top level item moves across the web page.
The other point I should make is that this problem, although it exists in all browsers to some extent, is most pronounced in IE6 and below. Unfortunately many of the anticipated visitors to this site are forced by their IT department to use IE6.
My question is: can you set a variable that overrides or determines the height of the background of the menu items? Alternatively is there some other way of addressing the problem so that I can get a uniform look as the menu items transition to each other.
Thanks in advance for any help that can be offered.
Steve.

Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Your question was not asked before
Using the search functionality on forums you can easily find out if your question has been answered before. While you are in search, you can specify the search locations. The Spry forum can be found under:
Adobe Labs > Spry Framework for Ajax
Your question can not be found in the existing documentation
Spry provides you with allot of documentation this can found on different locations. In the sidebar of this forum you can find a small summary of resources that will help you on your way.
If these options do not apply to your question, please be so kind to also supply the following information in your topic together with a clear description of your issue:
What browsers does this issue occure:
example: Internet Explorer 8 on Window 7 and Firefox 3.0 on Mac OSX
What version of Spry are using:
example: Spry 1.6.1 ( the version number can be found in license header of the .css and .js files )
What is the url of your website or page in issue:
example: http://www.example.com/page/in/issue.html
Step to reproduce the issue:
example: Scroll down till you find the header "help", there you will see a Spry Accordion. When you click on it it will not open or close.
So users can provide you with a better answer, without having to ask you for further details.

Menu bar display problems

I'm not exactly sure when this happened, but I have noticed that on the top menu bar on my Mac (MacBook Pro, Early 2011 running 10.9.1) has started displaying incorrectly. Here's what it looks like
I have tried verifying/repairing permissions, looking through the community forums to try and find people with similar problems and, so far, haven't come across any.
Any ideas?

Hi
Try this: System Preferences > Language & Region > Advanced > Times > Restore Defaults

Spry menu bar display in compatability view IE

The spry horizontal menu bar on http://ww.ituna.ca works well except that if a person has their IE browser set for compatibility view the javascript is turned off and the drop downmenu does not work. Someone who is not savy to this setting will find that the menu bar does not work - Is there a way to avoid this - works fine in chrome and firefox.
Pat

Ok. Now I understand what you are getting at. In IE8 there is a compatibility button that reverts the browser to IE7 standards. This has nothing to do with JavaScript.
Testing the page in IE7, I do see the problem. There are a couple of errors in the markup.
On or about line 385 the line reads
autoHeight: "false",
Being the last property in the constructor, there should be no comma at the end, thus the line should read
autoHeight: "false"
The second problem is caused by the placement of the link to SpryMenuBar.js. Simply move this link to the top of the links as per
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryTabbedPanels2.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryFadingPanelsPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryTabbedPanelsKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2/js/jquery-ui-1.7.2.min.js" type="text/javascript"></script>
Lastly, to get rid of the comapibility button place the following line just under the opening <head> tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Gramps

Spry Menu Bar- Display content below menu

After playing around a bit in DW as I am still very new to it I have gotten a menu bar setup with the appropriate links. I have been using frames with the top frame that displays the menu bar and the bottom frame to show the content. This works but since each tab drops down 4-5 items i need to make the top frame longer so all items display but leaves a lot of white space when it is just the menu bar showing by itself.
What other method is there that I can use that will display the menu bar AND display the contents below it? Im sure this wont be possible using frames so is there an easy way to do so in dreamweaver?

Its intended to be run locally so I dont have a link but here is the html for my index file. As you can see I have set the top row at 200 so it will display all the items in the menu bar when a user hovers over one of the bars. What I am trying to do is eliminate the white space by setting the top frame to around 60 but doing so you wont be able to see the drop down items. Make sense?
<html>
<title> Testing </title>
<frameset rows="200,*">
<frame src = "menu.html"
<frame src = "Homepage.html"
name="showframe">
</frameset>
</html>

Spry menu bar vertical problem in IE

Hi,
I try to use the spry menu in my website, but results are so different between FF and IE.
It works perfectly on FF and a real mess on IE8, as you can see here :
http://www.lesdecales.com/indexJP.htm
On IE, my vertical menu placed basically on the left, is replaced by a white emplty space...and the menu is on the bottom right of the page.
You can have a look to my css file here :
http://www.lesdecales.com/SpryAssets/SpryMenuBarVertical.css
is there a way to display it properly on IE ?
thanks for your help and your time

Add/modify the following
ul.MenuBarVertical{width: 8em;}
@media screen, projection{
ul.MenuBarVertical li.MenuBarItemIE{background:transparent;}
Gramps

Spry Menu Bar display issue - please help.

Everything works accept for IE for PC. I want the backgrounds
of the menu to be transparent but they are coming up white in IE.
Please help. Thank you.
http://www.pjhaarsma.com/techmark/docs/main.html

Found it:
In the hack on the CSS sheet - change background from #FFF to
transparent:
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;
/* 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: transparent;
}

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

Is it possible to change the height of Spry Menu Bar items?

I'm new to websites and have been trying to understand the CSS of the Spry menu bar. I've managed to put a horizontal menu bar in place and with the help of some previous discussions in this forum, have changed the colours of the menu items and have even managed to centre the text - Thanks!
However, I really would like to have a smaller menu bar - height wise.
I've tried reducing the default height of the menu bar items by adding a height and by reducing the font size and padding. The results have been varied. In Firefox and in Dreamweaver's 'live view' there is still a thin line showing underneath my horizontal menu which is the background colour of the div my menu sits in. In IE there is a similar 'chunk missing' from the bottom of the items.
Is this something that can be done? I've seen lots of help on how to change the width of the items, but have not found any which suggest that the height can be changed.
Gill

Sure. You just need to be thorough. Keep in mind that in a Spry Menu Bar you are making the link-text in the list-items block elements, so you will want to change the line-height of the a element. Pick style selectors in the css stylesheet that end in a, with or without an additional class (a.classhere), and play with the line-height.
Another attribute you can consider is the difference in height between Cap and lower case and All caps. You can usually get away with a smaller line-height and a smaller font-size with all caps, because there are no descenders on the text to require more line-height. Keep in mind also that when you state a line-height, your text will center vertically in the line-height, as far as I know, so you might even get away without top and bottom padding.
Beth

Clearing Spry Menu Bars within the website

How do I clear the spry menu bar values within a website. I am trying to create a horizontal spry menu bar on one page and then another horizontal one on another page. It keeps the same values everytime I create a new page. How do I clear the values for each page?
Thanks!

heatherfar69 wrote:
I am redesigning the website in the test environment using a new page. While doing so I am redoing the spry menu bar. It changed the spry menu bar in the original website (production environment). I would like to have the spry menu's be separate. How do you create separate spry menu bars for a situation as such?
Thanks!
If you are editing locally it should not overwrite your remote file unless you have the option "Automatically upload files to server on save" checked off. If that is the case you should uncheck that box.
If you want to further separate the old version from the new version, the only other method is to just create a new site. Even if you start with a duplicate of the existing site. Then you don't risk the chance of overwriting the existing files on the server.

Spry Menu Bar display problem on the MAC

Similar Messages

Maybe you are looking for