Spry Fade/Blind combo problem

http://1g2s.arena-i.com/v2/spry-fadeBlind.html
Click Portfolio
Page I grabbed the code from : http://labs.adobe.com/technologies/spry/demos/effects/index.html
I'm having 2 issues
1 - The fadeBlind is going the full cycle--meaning it fades/blinds in then immediately out.
I want it to fadeBlind in and stop, then click Close to fadeBlind out and stop.
2 - I am only able to run the script once for some reason. Clicking portfolio again does nothing.
Script in effects.js:
Spry.Effect.FadeBlind = function(element, options)
    Spry.Effect.Cluster.call(this, options);
    this.name = 'FadeBlind';
    var duration = 1000;
    var doToggle = false;
    var from = 0;
    var to = 100;
    if (options)
        if (options.duration) duration = options.duration;
        if (options.toggle) doToggle = options.toggle;
        if (options.from) from = options.from;
        if (options.to) to = options.to;
    var options = {duration: duration, from: from, to: to, toggle: doToggle};
    var blind = new Spry.Effect.Blind(element, options);
    this.addParallelEffect(blind);
    var options = {duration: duration, from: from, to: to, toggle: doToggle};
    var fade = new Spry.Effect.Fade(element, options);
    this.addParallelEffect(fade);
Spry.Effect.FadeBlind.prototype = new Spry.Effect.Cluster();
Spry.Effect.FadeBlind.prototype.constructor = Spry.Effect.FadeBlind;
Link properties :
I've tried...
<a onclick="runEffect('FadeBlind', 'portfolio-nav-wrap', {duration:  400, from: '0', to: '100%', toggle: true});" href="#">
<a onclick="runEffect('FadeBlind', 'portfolio-nav-wrap', {duration:  400, from: '0', to: '100%', toggle: true}); return false;" href="#">
<a onclick="return runEffect('FadeBlind', 'portfolio-nav-wrap', {duration: 400, from: '0', to: '100%', toggle: true});" href="javascript:void();">
<a onclick="return runEffect('FadeBlind',  'portfolio-nav-wrap', {duration: 400, from: '0', to: '100%', toggle:  true}); return false;" href="javascript:void();">
None of the above changes anything. Any help would be appreciated.

I am using Vista, and Safari 4.0.5
I actually just figured out a workaround, by programatically setting display to 'block' for a div inside my 'container' div and it seemed to fix the problem.  However I am still curious as to why I was having this problem in the first place.  I've had several 'small' issues with the fade effect in different browsers, and luckily have figured out workarounds for both (the other issue was IE fading into the background color no matter what, which in the case of this site was brown instead of white and looked terrible....).  Thanks for looking at it!
Dan

Similar Messages

  • Image rollovers with Spry fade possible?

    Does anyone know of a way to implement the Spry Fade effect
    so that the result is an image that will fade onmouseover and fade
    out onmouseout?
    Ideally I would use .hover, but this is not available, so I
    have to use onmouseover and onmouseout.
    The problem with this is that if you roll out of the image
    before the fade is complete, when you roll in again, the image
    starts the fade again and does not fade from where it had gotten
    to.
    I could use setInterval and clearInterval, but I was hoping
    that Spry would have a good, fast work around.
    Basically I want a button image that fades seamlessly when
    you rollover it.
    Many thanks.

    quote:
    Originally posted by:
    wriggs
    Does anyone know of a way to implement the Spry Fade effect
    so that the result is an image that will fade onmouseover and fade
    out onmouseout?
    Ideally I would use .hover, but this is not available, so I
    have to use onmouseover and onmouseout.
    The problem with this is that if you roll out of the image
    before the fade is complete, when you roll in again, the image
    starts the fade again and does not fade from where it had gotten
    to.
    I could use setInterval and clearInterval, but I was hoping
    that Spry would have a good, fast work around.
    Basically I want a button image that fades seamlessly when
    you rollover it.
    Many thanks.
    Hi, I have no relevant eixperience with the Spry ajax
    framework, but it can be solved with
    mootools framework easily.
    <img src="yourbutton" id="button" onmouseover="fadein();"
    onmouseout="fadeout();"/>
    <script>
    function fadein() {
    new Fx.Style( "button", 'opacity', {duration: 1000 }
    ).start(0.5,1);}
    function fadeout() {
    new Fx.Style( "button", 'opacity', {duration: 1000 }
    ).start(1,0.5);}
    </script>
    Of course you will need to set the 0.5 opacity property via
    css.
    Regards
    Bagi Zoltán

  • Fade / Slide Cluster Problems

    Hi, I'm new to Spry so this might have been talked about
    before. I'm trying the Fade / Slide Cluster example here
    http://labs.adobe.com/technologies/spry/articles/effects_coding/index.html
    and I'm getting some errors. I tried the other examples and they
    work fine, but that one gives me these errors in firefox.
    Toggle is not defined; and myFadeSlide has no properties;
    Anyone seen this or came up with a fix?

    That is because the example seems to be missing something.
    The toggle variable is missing + the check if it exists. The
    correct code:
    <script type="text/javascript">
    FadeSlide = function(element, options)
    Spry.Effect.Cluster.call(this, options);
    var duration = 1000;
    var from = 0;
    var to = 100;
    var transition = Spry.fifthTransition;
    var toggle = false;
    if (options)
    if (options.duration != null) duration = options.duration;
    if (options.from != null) from = options.from;
    if (options.to != null) to = options.to;
    if (options.transition != null) transition =
    options.transition;
    if(options.toggle != null) toggle = options.toggle;
    var fadeEffect = new Spry.Effect.Fade(element, {duration:
    duration, from: from, to: to, transition: transition, toggle:
    toggle});
    var blindEffect = new Spry.Effect.Blind(element, {duration:
    duration, from: from, to: to, transition: transition, toggle:
    toggle});
    this.addParallelEffect(fadeEffect);
    this.addParallelEffect(blindEffect);
    FadeSlide.prototype = new Spry.Effect.Cluster();
    FadeSlide.prototype.constructor = FadeSlide;
    </script>
    also
    <script type="text/javascript">
    var myFadeSlide = new FadeSlide("content", {from: "100%", to:
    "0%", duration: 1500, toogle: true}
    </script>
    See the toogle : true, that should be toggle: true

  • Font rendering with spry fade?

    Hi,
    I am doing a simple fade in of a DIV using spry fade.
    Works perfectly fine on firefox, but on IE it fades ok but the text doesnt render correctly (blocky), in any font.
    Checked the js as best I could, tried removing CSS styles etc, no good.
    Code is below.
    Anyone had this problem?
    Thanks!
    Rich
    <!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" />
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../css/HSE.css" type="text/css">
    </head>
    <body onload="showContent.start();" leftmargin="0"  topmargin="0"  >
    <div id="text1"
        style="position:absolute; width:400px; height:214px; z-index:3; left: 37px; top: 47px; visibility: hidden;"
        class="bodytext">
      Welcome to this page!
    </div>
    <div id="fred"
        style="position:absolute; left:0px; top:0px; width:800px; height:446px; z-index:2"></div>
    <script>var showContent = new Spry.Effect.Fade("text1", {from: "0%", to: "100%"})</script>
    </body>
    </html>

    Genius! Thanks very much! All perfect now
    R

  • ALT Key combo problem + unlock + freezing+disconnect while on usb

    im having the famous alt combo problem..i tried everything i could from trying to unjam the camera button which wasnt jammed lol.. i noticed when my mob goes on standby i need to press the switch off button or standby btn for 5 secs so that screen lights up again...
    then another massive problem..i tried to erase OS and all..i get my bb connected to laptop,detected and stuffs..but as soon as i wanna manipulate it from tthe desktop manager it disconects. it still charges but absent in  the device manager..if i leave it connected it without trying to manipualte it it works all fine :/
    any idea folks? oh i cant return the phone...bought that like 12k km away lol
    oh and when i wanna take a picture with the convenience button it will only zoom but not take any pic
    been a week since i got the bb

    Hello
    try swictch system by normal way !!
    use system pref -> startup disk -> select system to startup ( win7 )
    ask restart from apple menu
    to back into OS X do exactly same thing into win7  ( startup disk icon into "configuration panel" )
    if "startup disk do not exist , install it from 2d dvd come from your mac ( part of boot camp installation process )
    Pierre

  • Spry Effect Blind ONCE

    Hello Everyone,
    The following site.
    www.austinbartour.com
    I have a blind effect so that the sponsered bars are closed
    after you navigate from the first page of results but if you click
    on any other page it will reopen the sponsered bars.
    Is there a way to only make this work once? And if you go
    back to the first page reopen it?
    Thanks,

    u could add a finish function to it that clears the var name
    of the effect
    i dont know if it works or gives errors becouse i didnt
    tested it
    var animation_stop = function(){
    var blind_func = null;
    var blind_func = new Spry.Effect.Blind('example1',
    {toggle:true, finish: animation_stop});

  • Fade Effect Flickering Problem

    I have thumbnail gallery that utilizes the fade effect on the
    mouseover event. Unfortunately, if the user mouses over the
    thumbnails too quickly, the images flicker quite horribly. I was
    wondering if there was a way to remove this problem.
    Thanks
    You can view the gallery
    here

    Hello existdissolve,
    Your problem in the gallery has 2 issues:
    1. Indeed you discovered a bug that I managed to fix in the
    internal version that will be published next week. In the code
    below that I will give I will include the work around for the
    problem too.
    2. Seems that you didn't completely understood the meaning of
    the toggle option and I will try to explain you more detailed here.
    Basically the toggle option is not controlling the direction of the
    running effect as I think you understood. The toggle will not tell
    to the effect to run in reverse direction but instead its scope is
    to tell the effect that it CAN run in reverse direction.
    When you try to animate an element using a link, when you set
    the toggle option on, the animation will go between the from and to
    values, on the first click, and will go between to and from values
    on a second click. This cycle could repeat infinitely.
    When you try to achieve this effect using 2 links you'll have
    2 implementation solutions:
    a. Use the same line of code for both links.
    <a href="#" onclick="MM_effectAppearFade('element', 500,
    0, 100, true)">Click Me First</a>
    <a href="#" onclick="MM_effectAppearFade('element', 500,
    0, 100, true)">Click Me Second</a>
    You will observe that if you'll click these links in order
    the element will appear and then will disappear back.
    b. Use 2 non toggling effects with the from and the to
    options reversed:
    <a href="#" onclick="MM_effectAppearFade('element', 500,
    0, 100, false)">Click Me First</a>
    <a href="#" onclick="MM_effectAppearFade('element', 500,
    100, 0, false)">Click Me Second</a>
    There is however a problem why I am not recommending this
    second solution in your case. If you click on the links in the
    second example fast enough in their order you'll have a weird
    result. The 2 effects are not knowing the other effect is running
    so you'll end up with 2 effects that tries to do an opposite action
    in the same time on the same element. This is somehow happening in
    your case too if you move the mouse over the images fast enough you
    can't predict anymore what the result will be.
    In this situation you'll have to change a little bit the code
    in your page. Right now you have this code:
    <img id="tn{ds_RowID}"
    src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
    width="90"
    height="90"
    alt="Sample Images from Spry Data."
    title="{ds_RowNumber}"
    style="opacity:0.3; filter:alpha(opacity=30)"
    onmouseover="MM_effectAppearFade('tn{ds_RowID}', 500, 30,
    100, false)"
    onmouseout="MM_effectAppearFade('tn{ds_RowID}', 500, 100, 30,
    true)"
    onclick="HandleThumbnailClick('{ds_RowID}');" />
    When you change the onmouseover and the onmouseout effects to
    match the first solution I explained above you'll result with this
    code:
    <img id="tn{ds_RowID}"
    src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
    width="90"
    height="90"
    alt="Sample Images from Spry Data."
    title="{ds_RowNumber}"
    style="opacity:0.3; filter:alpha(opacity=30)"
    onmouseover="MM_effectAppearFade(this, 500, 30, 100, true)"
    onmouseout="MM_effectAppearFade(this, 500, 30, 100, true)"
    onclick="HandleThumbnailClick('{ds_RowID}');" />
    You observe that I changed in both effects the target element
    from tn{ds_RowID} to the special javascript keyword 'this'. I did
    this to overcome the bug I told you about that you discovered in
    the SpryEffects.
    Let me know if you have further questions on this problem.
    Regards,
    Cristian MARIN

  • 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">
    <!--
    #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>
    <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>
    <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 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 dropdown z-index problems in IE

    Hello
    I'm having some trouble with the spry horizontal dropdown in
    IE, and it's interaction with SmoothGallery. In every browser (with
    the exception on IE 6&7 of course) the higher z-index values of
    the menu cause it to overlay the JS image gallery below it. In IE
    however it does not.
    http://www.digitalrift.co.uk/projects/woods/
    Works fine on every browser tested so I can't see how it'd be
    a fault with the z-index values used. Anyone have a suggestion as
    to a workaround for good ol' IE?
    Thanks

    All right, well I just figured out my problem, and hopefully this will help anybody else. 
    I was positioning my images using <position: absolute;>  While this is definitely the easiest way to specifically place something on a page, Internet Explorer, it seems, assigns that z-value as the highest on the page, which is why my dropdown menus wouldn't appear on top of the image, but behind it. 
    The solution I found was changing the position attribute to "static" rather than "absolute".  The "static" attribute can't use position qualities like "top", "bottom", "left", and "right", but has to use margins and float to be specifically place. 
    While this isn't as easy as absolute positioning, using the static value will allow the Spry dropdown menu to appear over top of the images instead of behind them.

  • 10.4.3 Combo problems after installing

    Hello,
    I hope someone can help me with this. I was previously using OS X 10.4.0 and went through Software Update to install various updates, including the Mac OS X Update 10.4.3 Combo, the most recent Java updates (1.4.2?), the Security Update 2005-008, and as I recall, updates for iPhoto and DVD Player. Afterwards, I discovered that the Software Update feature will crash, as will the Help feature under Finder (listed as 10.4.2). I also use Adium 0.86 for my chat program; however, whereas it will open up and remain open without a problem, whenever someone has tried to leave me an offline message, or when I try to send someone a message, it will crash. Fortunately, I also have YIM on my computer, which has never caused a conflict before, so at least I have that to rely upon. In addition, I repaired permissions a few times, both before and after the updates, rebooted the computer, etc.
    I did a little research and found some advice that said to download the OS X 10.4.3. Combo directly from the Web and to try to reinstall it, but when I clicked on the download, the disk image failed to mount because of an invalid checksum. Could someone please tell me what is creating all of these problems and what I can do to fix them? I'll uninstall the update if I have to, as I think it's been more of a problem for me than anything else, but I'd have to be told how to go about doing that.
    Thanks in advance for any helpful suggestions.
    Laura Elliott
    iMac   Mac OS X (10.4.3)  

    Laura,
    After your second plea, I will offer this course of action in an attempt to help you solve your problem.
    First of all, make sure that you have backed up your important files.
    I would recommend an Archive and Install of Tiger from your Tiger Installation disks followed by an installation of the Mac OS X 10.4.3 Update (Combo). Follow the Combo installation with Software Update.
    I do not have a specific course of action for Adium, but it appears to be compatible with Tiger. You might check their support site for help.
    The Help Viewer problem is but one small problem with your installation. If you are interested, you can read about it in Troubleshooting Help Viewer by Dr. Smoke. You can always refer to it later, if you still have problems after the steps that I have recommended.
    Good Luck.
    ;~)

  • 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

  • Spry submenu z-index problem in IE

    My sub menus in IE are going behind the page content on my wordpress blog page.
    I'm not sure if this is a spry or wordpress problem, but I had this problem on a few other (non wordpress) pages and fixed it by adding "z-index:10000;" under "#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */".
    In wordpress I have a plug in called "custom headers and footers" where I can put in html code for the menu.
    In this I've added "z-index:100000000;" under the following menus :
    #MenuBar, .nav
    and
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    The background area of the menu is also about twice the height it should be in IE, this isn't as big a problem, but I would like to fix that too.
    I think I found out a while ago that it's not possible to make the menus shiny in IE as they are in every other browser.
    Also in firefox when I'm on the blog page and I hover over the "Strawberry switchblade" menu it makes the text in all the menus go darker.

    All right, well I just figured out my problem, and hopefully this will help anybody else. 
    I was positioning my images using <position: absolute;>  While this is definitely the easiest way to specifically place something on a page, Internet Explorer, it seems, assigns that z-value as the highest on the page, which is why my dropdown menus wouldn't appear on top of the image, but behind it. 
    The solution I found was changing the position attribute to "static" rather than "absolute".  The "static" attribute can't use position qualities like "top", "bottom", "left", and "right", but has to use margins and float to be specifically place. 
    While this isn't as easy as absolute positioning, using the static value will allow the Spry dropdown menu to appear over top of the images instead of behind them.

  • Spry Alignment and Positioning Problem in Internet Explorer 6 and 7

    I am designing a website at http://atoment.007gb.com, and neither me, nor my partner can figure out why the Spry Horizontal Menu Bar is loading the way it is in Internet Explorer.  We are doing this for a school project, and eye appeal and workability is a top priority.  I changed and customized most of it, but even if i did keep it the same, it still wouldn't work. I have only the best confidence, that even given the amount i have changed, you will still be able to help me with my alignment problem.
    The Submenu Buttons Tile across the page, when they are supposed to go straight down...
    the Submenu overlaps the main menu when you hover over it
    and the darned thing wont center in any of my browsers, but thats the least of my worries.
    Here is the CSS Codes
    #MasterNavigator {
    width: 1024px;
    height: 75px;
    #Navigator {
    margin-left: auto;
    margin-right: auto;
    clear: both;
    #NavigatorButtonsLeft  {
    background-image: url(../_images/MenuButtonBackgroundLeft.png);
    width: 128px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    vertical-align:center;
    #NavigatorButtonsMiddle {
    background-image: url(../_images/MenuButtonBackground.png);
    width: 128px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    vertical-align:center;
    #NavigatorButtonsRight {
    background-image: url(../_images/MenuButtonBackgroundRight.png);
    width: 128px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    vertical-align:center;
    #NavigatorButtonsSub {
    background-image:url(../_images/SubMenuButtonBackground.png);
    width: 128px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    And here is my HTML code:
    Home
    Publishing
    Videos
    Patents
    Wallpapers
    Avatars
    Userbars
    Digital Design
    Digital Gallery
    3-D Gallery
    Sci-Fi
    Technology
    Structures
    Vehicles
    Concepts
    Web Design
    Templates
    Graphics
    About Us    
    Atom Enterprises
    Slamerz
    The images I used are 20% Transparent, and are listed below.
    http://atoment.007gb.com/_images/MenuButtonBackgroundLeft.png
    http://atoment.007gb.com/_images/MenuButtonBackground.png
    http://atoment.007gb.com/_images/MenuButtonBackgroundRight.png
    http://atoment.007gb.com/_images/SubMenuButtonBackground.png
    Please try your best to help me.

    0087adam wrote:
    ok, but how can I make it work with what I have.  All the css codes are the
    same, they just have been renamed.
    The original SpryMenuBarHorizontal.css does not have any issues in any of the browsers. If you go and modify the original, and it does not work anymore, then the logical conclusion is that you have made one or (more likely) multiple mistakes.
    In other words, you cannot make it work with what you already have.
    My advice is that you replace the original CSS and work from there; but instead of changing the original CSS, make your changes in a separate stylesheet so that you can monitor and test the code at each change. For instance if you want to change the colour of the text you make a style rule that overrides the original in your new stylesheet as follows:
    ul.MenuBarHorizontal a {
        color: #333;
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
        color: #FFF;
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
        color: #FFF;
    If you want to change the background colour to an image, then follow the same procedure, testing your code at each step.
    I hope this helps.
    Ben

  • Spry validation select widget problem

    Dreamweaver CS3
    Im using spry validation for my form but the two spry validation select widgets I am using are not working. When I test them I keep getting errors that nothing has been selected when something has in fact been selected. I've used spry validation before with no problems but this is the first time using the spry validation select widget.
    My code:
    <tr>
                <td valign="top">Page in Question*</td>
                <td valign="top"><span id="spryselect1">
                  <label>
                  <select name="select1" id="select1">
                    <option selected="selected">Home</option>
                    <option>About Us</option>
                                </select>
                  </label>
                  <span class="selectRequiredMsg">Please select an item.</span></span></td>
              </tr>
              <tr>
                <td valign="top">Which Internet Browser do you use?*</td>
                <td valign="top"><span id="spryselect2">
                  <label>
                  <select name="select2" id="select2">
                    <option selected="selected"> </option>
                    <option>Internet Explorer</option>
                    <option>Firefox</option>
                    <option>Safari</option>
                    <option>Opera</option>
                    <option>Google Chrome</option>
                    <option>Other</option>
                  </select>
                  </label>
                  <span class="selectRequiredMsg">Please select an item.</span>              </span></td>
              </tr>
    Appreciate the help.

    Hi Daniel,
    Im having the same problem, can you please tell me what you did? I understand you found the problem?
    Thank you!

Maybe you are looking for

  • Prevent creation of PO with errors.

    Hello SAPients, I'm an ABAP developer, I don't know much about MM and or PO configuration, but I have this requirement that maybe can be solved with customizing instead of programming. "While creating a PO if there are error messages, the system stil

  • UEFI / GOP Vbios request - N660 TF 2GD5/OC

    Hi, can you give me please the UEFI Bios? S/N: 602-V287-04SB1208179436 Current vbios: docs.google.com/file/d/0BwbrRkLTxStOX0JZekJXYXFrdlk/edit?usp=sharing Thank you

  • Error message whenever I try to use QuickTime

    Had older version of QT-worked fine--used only for Picture Viewer and video clips downloaded from my digital camera. Downloaded newer version--would not work--got only msg: "QuickTime has encountered a problem and has to close"--same as Celestika. Un

  • ITunes Crash, Too Much Music?

    First of all, I was listening to my iTunes with my iPod not having fully updated with iTunes, meaning, not having gotten the latest iTunes music onto the Mini iPod. Second of all, I deleted about half of my library right before the occurrence. Then I

  • Re-Install Creative Suite - Activation preserved?

    I have the Creative Suite CS4 Master Collection installed and activated on my main Hard Drive. Because I am running out of disk space, I will add a 2nd disk to the laptop and plan to uninstall the Suite and re-install on that new disk. Will the activ