Spry Help

Hi there,
I have created a spry tabbed panel that has an upload form
within one of the tabs, However when i submit the form i wish for
it to stay on the tab that is selected, at the moment it refreshes
the whole page and reverts back to the default tab.
All my code is in php, is it somthing that needs to be done
in java?
Any solutions would be great.

torrtoise wrote:
> I have created a spry tabbed panel that has an upload
form within one of the
> tabs, However when i submit the form i wish for it to
stay on the tab that is
> selected, at the moment it refreshes the whole page and
reverts back to the
> default tab.
> All my code is in php, is it somthing that needs to be
done in java?
Nothing needs to be done in Java, because there is no Java
involved.
Spry is JavaScript, which is completely different from Java.
The
languages are totally unrelated.
To redisplay the same tab when the form is submitted, you
need to add a
query string to the URL in the action attribute of your form
to indicate
which tab you want to be displayed when the form is
submitted. You can
then use SpryURLUtils.js to extract the value from the query
string and
open the correct tab. Take a look at the following tutorial
on my site:
http://foundationphp.com/tutorials/spry_url_utils.php
It shows how to open a specific tab or panel from a link on
another
page, but you should be able to adapt it to work with a form.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Similar Messages

  • Urgent Spry help!

    I work on a secondary school website and i am having trouble
    with the spry menu bar.
    I have created a horizontal menu bar, and i was wondering if
    anyone could help me with 2 problems i am having?
    1. Can you change the speed in which the sub menus are
    displayed? If so is it somewhere in the .js file or the css?
    2. The sub menus on the horizontal bar i have made are not
    postioned correctly. I would like them to appear under the parent
    alligned perfectly. At the moment it is appearing under the parent
    which i want it to, but its off to the right slightly. How would i
    go about changing this so they appear under the parent? I have
    heard u change the default code which is:
    /* Submenus should appear slightly overlapping to the right
    (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    background-color: #FFFFBF;
    I have tried chaning this margins several times and it still
    remains the same when i preview it.
    Could anyone help me out with these problems?
    Here is the link to a draft page i am creating.
    C:\Documents and Settings\dpe\My
    Documents\darrickwood\draft.html
    Thanks

    Changing these margin: -5% 0 0 95%; to margin: 0 0 0 100%;
    will help align the pop-out part of the menu.
    This bit of code:
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
    will be (or should be) where you remove the border and the
    background to the whole thing.
    It's an absolute mine field of css, but, it is a really good
    place to pick to pieces real examples of what is beyond beginner
    css, and learn from it.
    A good tip is to read the bits between the /* and */ as these
    are comments about what the following code is taking effect on.
    Mat

  • Accordian Spry Help

    First, thank you to anyone that can help. I am nearing my
    wits end. I have been working with a spry accordian. When I was in
    Dreamweaver, browser tested and after a few tries, got it working
    just fine. Saved, closed DW, and uploaded through FileZilla, and
    poof - problem city! When I opened the file again in Dreamweaver it
    was showing the same error - the first panel seems to be working
    properly, but the second two do not open. Any help that anyone can
    give me would be soooooooo welcome. Thank you thank you thank you!
    If you need any code or anything, please let me know!
    Here is my example:
    http://www.visualthumbprint.com/portfolio.html

    First we need to get you to the latest version of Spry to
    ensure that this is not something that has been fixed:
    http://labs.adobe.com/technologies/spry/home.html
    - That is the Spry home page. On there you will see a link to
    download the Spry updater. Once you open the package you will find
    a ton of samples, and then an extension. Install the extension and
    start up DW. There will be a new option under the Sites menu to
    Update your Spry. Let that update and re-upload the SpryAssets
    folder to your server.
    Post back with what happens and we can go from there.

  • Unobtrusive spry help

    Trying to make some spry unobtrusive to w3c validation. Very
    little experience in java programming and can't figure out how to
    fix it.
    I got some testimonials displaying on our homepage, rotating
    randomly. The spry:region and spry:repeat both don't validate and
    can't 'extend' document type to include cause of the text appearing
    at the top of the page.
    Here is the <div> giving me problems. I just don't know
    how to break it out into a seperate .js
    <div spry:region="dsquotes" spry:repeat="dsquotes"
    id="QOTDRegion">
    <div class="quote">
    <div id="quotebox">
    <div
    id="testimonial"><em>{testimonial}</em></div><br
    />
    <div id="from"> - {from}</div></div>
    <a href="testimonials.php" title="Testimonial Page Link"
    target="_self" class="style18">To see all the testimonials click
    here</a><br /><br />
    <br />
    <h1 class="style11"> <!--#exec
    cmd="date"--></h1>
    <br />
    </div>
    </div>
    Any help would be appreciated. Thanks in advance.

    Yea. I have seen that and have tried several ways to piece it
    all together, but I am using borrowed code that I don't completely
    understand to start with and although I think I understand what is
    being done, it doesn't want to work when I try it.
    This is within the main page of the document which rotates
    the testimonials:
    <script language="javascript" type="text/javascript">
    <!--
    var dsquotes = new
    Spry.Data.XMLDataSet("/comments/comments.xml","/Quote_List/quote");
    rotateInterval = 7500;
    function rotateQOTD(){
    //don't go any further is there aren't any quotes
    if (!quotes|| quotes.length<1)
    return;
    //create a variable that will point to the current quote
    element
    var curEle;
    /*we are add a current index property to our quotes only
    once since the next time
    the function is called it will exist*/
    if (typeof quotes.curIndex == "undefined")
    quotes.curIndex = quotes.length - 1;
    else
    curEle = quotes[quotes.curIndex];
    //here we increment the current index by one using mod
    quotes.curIndex = (quotes.curIndex+1)%quotes.length;
    var nextEle = quotes[quotes.curIndex];
    //run the fade effect on the current and next element and
    prepare the timer to run on the next element.
    if (curEle)
    Spry.Effect.DoFade(curEle, { from: 100, to: 0 });
    Spry.Effect.DoFade(nextEle, { from:0, to: 100, finish:
    function(){ setTimeout(function(){ rotateQOTD(); },
    rotateInterval); } });
    function dateLoadedCallback(notificationType, notifier, data)
    //this observer function is called for every type of
    notification but we are only interested in the onPostUpdate
    if (notificationType =="onPostUpdate"){
    //we grab the number of quote div's (this is only available
    after the data is finished loading)
    quotes = Spry.$$(".quote");
    //call our rotate function
    quotes.curIndex = Math.floor(Math.random()*quotes.length);
    rotateQOTD();
    //set up an observer to run on the databound region
    Spry.Data.Region.addObserver("QOTDRegion",dateLoadedCallback);
    -->
    </script>
    And this is where its displayed on the page :
    <div spry:region="dsquotes" spry:repeat="dsquotes"
    id="QOTDRegion">
    <div class="quote">
    <div id="quotebox">
    <div
    id="testimonial"><em>{testimonial}</em></div><br
    />
    <div id="from"> - {from}</div></div>
    <a href="testimonials.php" title="Testimonial Page Link"
    target="_self" class="style18">To see all the testimonials click
    here</a><br /><br />
    <br />
    <h1 class="style11"> <!--#exec
    cmd="date"--></h1>
    <br />
    </div>
    What would seem obvious would be to remove :
    <div spry:region="dsquotes" spry:repeat="dsquotes"
    id="QOTDRegion">
    and replace with <div id="QOTDregion">
    and then put this inside .js file being loaded :
    Spry.Utils.addLoadListener(function()
    // Attach the spry namespaced attributes unobtrusively.
    Spry.$$("#QOTDregion").setAttribute("spry:region",
    "dsquotes");
    Spry.$$("#QOTDregion").setAttribute("spry:repeat",
    "dsquotes");
    Spry.Data.initRegions();
    However this does not work and I don't know why.
    I have also tried moveing all load of the data and all the
    functions for rotating it into the .js file as well, but this
    didn't work either, again, not sure why.
    </div>

  • Spry TabbedPanels: set default state

    After inserting 3 Collapsible Panels on my web page, I want to set the default state of the panels so that when the page loads, panel 1 is open and panels 2 and 3 are closed. I used this code from "Set the default state of the panel" Spry Help page:
    <script type="text/javascript">
        var cp1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen: true});
        var cp2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", { contentIsOpen: false });
        var cp3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", { contentIsOpen: false });
    </script>
    But all panels remain open on page load.
    Then I tried editing the default code that is inserted by Dreamweaver Insert > Spru > Spry Tabbed Panels :
    <script type="text/javascript">
    <!--
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
    var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", contentIsOpen: false);
    var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", contentIsOpen: false);
    //-->
    </script>
    That didn't work either. Any advice on what is wrong here? Other than the wrong default state, the panels are working correctly.

    Thank you. I figured out the problem, and the default panel states are working correctly now.
    Next step: I want to use the open and close functions to toggle the state of the other panels so when the user clicks one tab to open a panel, the other two close. I'll try to get this working, but may be back to this forum in case I need help!

  • Where is Spry ZIP???

    Working from the spry help area, and following the steps...
    1. Download and unzip the
    Spry ZIP file from the
    Adobe Labs website to your hard drive.
    ... so I go the the adobe labs site and search for
    Spry ZIP, because it isn't where you'd expect to find it, in
    the "downloads"...
    I just purchased the CS4 package, and you'd expect that sort
    of code would be in the DW folder ready to use. Is it somewhere
    that I'm not thinking of, and readily available?
    Can anyone help me here?
    Many thanks,
    --Rob

    Rob,
    Yes, Spry is already built into DW CS4. Use: Insert > Spry
    HTH,
    Randy
    > I just purchased the CS4 package, and you'd expect that
    sort of code would be
    > in the DW folder ready to use. Is it somewhere that I'm
    not thinking of, and
    > readily available?

  • SPRY Vertical Menu Problem (IE Hack?)

    I'm having a problem with the Spry vertical menu bar. The one
    I created works fine in Firefox and in Safari, but not in Internet
    Explorer. In IE the sub-menu containers open AT THE TOP of the menu
    bar, and not next to the selected menu item. I'm not sure how to
    fix it. Any help is appreciated.
    You can see the problem here (view in IE and roll over any of
    the menu items in the middle or lower part of the menu bar):
    http://southerncharmgifts.net/thesouthernsportsman/html/ssarchery.html

    I downloaded the Spry update but it didn't fix the problem.
    It changed my menu box to white, when it should have remained
    black. Hopefully I can fix it. But still the same problem with IE.
    This is really bad! Any way to reverse the update?
    quote:
    Originally posted by:
    SnakEyez02
    First your Spry is out of date. Please click on the following
    link below to get the Spry Updater. It will be inside the package
    as an Extension. Then next time you start up DW click on Sites and
    then you will see an option at the bottom to update Spry in your
    site.
    http://labs.adobe.com/technologies/spry/home.html
    Looking at your page it appears to validate except for one
    thing. All images need alt tags assigned to them.
    See if updating the Spry helps.
    Also there is a Spry forum that Adobe does check in case
    there are bugs. The link to the forum is on that page and I will
    also link it below:
    http://www.adobe.com/go/labs_spry_pr1_forum
    With regards to Pitmaster you can check the above links but
    depending on the issue it could be something else. So if you need
    further assistance post a link to your page.

  • Re-sizing, align right while keeping the menu fixed using flash AS2

    contact
    khuon
    mau
    My problem is recreating the align right effect while keeping
    the menu fixed using flash AS2 mostly for re sizing as well as
    different screen sizes.
    While i can do one or the other but both is just not
    happening.
    I have tried all sorts of weird and wonderful things but as
    yet, alas no easy/simple solution :(
    I must admit it has been a long time since i have been here
    but.. I thought if someone could have a quick look and maybe please
    give me a few pointers ??
    Anything at all would be better than what i have now ...
    Thanks for your time

    The link again is I forgot to add http to the link before, but it should have worked.
    http://www.lipowiec.org/test/index.php
    a) used Dreamweaver to create new site selected 1 column, elastic, centered, header, and footer
    b) used spry to add horizontal menu to header
    c) followed instructions from Spry Help
    http://livedocs.adobe.com/en_US/Spry/SDG/index.html?lang=en_US ->
    working with spry widgets -> working with the menu bar widget -> Customize the dimension of menu items as indicated
    To change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.
    Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
    Change the width property to a desired width, or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule.
    Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
    Change the width property to a desired width (or change the property to auto to remove a fixed width).
    Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule.
    Add the following properties to the rule: float: none; and background-color: transparent;.
    Delete the width: 8.2em; property and value.
    Under IE it's broken, under the other browsers it works.
    There need to be more IE HACKS added.

  • Dashed rule between menu items nested inside an accordion panel widget in Muse?

    I have a vertical menu widget nested inside an accordion panel widget and I want a dashed rule under each menu item. I already know I can have a solid rule by assigning a stroke to just the bottom of each menu item container. 
    I manually created dashed rules by "step and repeating" a 1px black square followed by 2px of space to a 380px width. I positioned these dashed rules under each menu item and grouped them with the menu. Then I placed the menu widget with the dashed rules into the content container for the accordion panel.  The menu expands and collapses in the Preview mode but the dashed rules don't show up.
    Muse CC 2014, iMac OS10.9

    The link again is I forgot to add http to the link before, but it should have worked.
    http://www.lipowiec.org/test/index.php
    a) used Dreamweaver to create new site selected 1 column, elastic, centered, header, and footer
    b) used spry to add horizontal menu to header
    c) followed instructions from Spry Help
    http://livedocs.adobe.com/en_US/Spry/SDG/index.html?lang=en_US ->
    working with spry widgets -> working with the menu bar widget -> Customize the dimension of menu items as indicated
    To change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.
    Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
    Change the width property to a desired width, or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule.
    Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
    Change the width property to a desired width (or change the property to auto to remove a fixed width).
    Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule.
    Add the following properties to the rule: float: none; and background-color: transparent;.
    Delete the width: 8.2em; property and value.
    Under IE it's broken, under the other browsers it works.
    There need to be more IE HACKS added.

  • Need help with spry collapsible panel (menu)

    I learn as I go when I created my website http://www.invitation-fascination.com/shapes.html and so far I've created a page with 13 spry collapsible panels- I think it came out pretty well.  Now this is what I want to add to the page: 
    I want to create a selector (drop down) menu above the panels with the option to select any one of the 13 panels.
    Once selected it will move directly to that panel and open it. 
    I've tried the piselect thing and with the "open" and "close" button that will programatically open the panels, but what I want is for the panel to be selected from the menu and then the page goes directly to that panel and it then opens.
    Is there a way this can be done?  Please help
    I'm really not that good at this stuff- please be easy with your response- thank you

    Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
    Gramps

  • Spry Menu Bar issue, NEED HELP...???

    Here is the coding for a menu bar that i created with CS3, for some reason i am having an issue when i open the web page in IE, on firefox and safari it looks fine, the menu drops down to sub menu's fine, but for some reason when i open it in IE, the submenu's show on the very top of the page rather than right below the menu itself, please check my coding and see if there is an issue???
    i ran compatability and there are no issues shown.
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* 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: 10.4em;
        float: left;
        background-image: url(tab2.png);
    /* 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: 8.2em;
        position: absolute;
        left: -1000em;
        text-decoration: underline;
    /* 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;
        background-image: url(../tab1.png);
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: default;
        padding: 0.5em 0.75em;
        color: #FFFFFF;
        text-decoration: none;
        border-left-color: #0063bd;
        border-right-color: #0063bd;
        border-right-width: 3px;
        border-left-width: thin;
        font-family: Calibri;
        font-weight: bold;
        font-size: 19px;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        color: #000000;
    /* 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
        color: #000000;
    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;
    /* 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-block;
        f\loat: left;
        position: relative;

    Hey gramps, thanks for the info, i have updated my spry framework to 1.6.1 but the problem is still the same, i recreated my menu with the new 1.6 and it still doing the same thing, the submenu's are like vertically reversed... ugh need help.
    here the new 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;
        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: 10.4em;
        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: 8.2em;
        position: absolute;
        left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
        left: auto;
        background-image: url(../tab1.png);
        line-height: 18px;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        color: #FFFFFF;
        text-decoration: none;
        font-size: 19px;
        font-family: Calibri;
        font-weight: bolder;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        color: #000000;
    /* 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
        color: #000000;
    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-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-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-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-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;
    /* 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;

  • Spry menu bar changed since I tried to split cells in a table! Help!

    I am VERY new to web design, so I apologize in advance for being ignorant.  I am trying to learn!
    I had inserted a spry menu bar that looked fine and even tested fine!
    I subsequently tried to split a section of my table in the web page in order to have 3 columns of centered text.  The first time I did this, the spry menu bar became vertical even though it is listed as horizontal.  I looked up a forum answer, copied the code from the suggestion, and that seemed to fix the problem (although I still don't know what EXACTLY happened)
    I tried to split the table again (I had undone everything prior to this), only this time, the spry menu bar is located outside the page in the left hand corner where my background (I have a wrapper) is.  I tried opening another page where I already had a nice spry menu bar, and it did the same thing!! This makes me think it is the CSS sheet for the menu bar that was modified somehow when I split the table.  I'm pasting the CSS here below, so if anyone sees any issues that might cause this problem, please let me know!! I have been working for the most part in design view, and haven't really modified the code other than to put a wrapper in and a facebook like button, which I've now lost in the slitting cells catastrophe.  Thanks in advance!!!
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* 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-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding: 0;
    list-style-type: none;
    font-size: 12pt;
    cursor: default;
    width: 60%;
    float: left;
    /* 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: 12pt;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    background-color: #99CC66;
    /* 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;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: auto;
    /* 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: #99CC66;
    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: #336600;
    color: #FFF;
    /* 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: #33C;
    color: #FFF;
    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;
    /* 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;

    Well, I took a picture of my dreamweaver screen, so you can see what I am looking at...
    You can see that the spry menu bar shows up in the top left corner in my design view, but on the website, it is located in the correct place! Maybe it is a Dreamweaver problem??? This happened when I tried to split the cell underneath the section that says "Let NOLA Scribes help you!" into 5 cells so that I could insert 5 differnet pictures and captions. Now, when I open the other linked pages in Dreamweaver, it does the same thing! I'm using an older version of Dreamweaver, but from what I read, that shouldn't be an issue.  Thanks in advance for your help!

  • Spry Menu Bar - Help Request

    Hello!
    I'm using a horizontal spry menu bar with horizontal sub menu
    and have almost gotten the navigation exactly how I need it. I'm
    stuck, however, and don't know how to fix the following:
    1. I have absolute positioning set for my sub menu so that
    the items appear under the left-most main menu item instead of
    their parent item. When I change screen sizes, the sub menu stays
    put (as it should) and everything else moves with the re-size. I
    can't figure out where the sub menu positioning is originally set
    to change it or how to get it to appear where it currently is
    without using absolute positioning.
    2. I would like to center the contents of the sub menu and I
    think I've tried text-align:center everywhere possible but to no
    avail. Any suggestions would be greatly appreciated!
    3. Is there any way that the menu can recongnize the page
    that it's on and display the appropriate link high-lighted. For
    example, when you open the home page the active/focus state for the
    "Home" button shows (for this menu it would be a different color
    background image) and it's corresponding sub menu would be
    displayed automatically. Would a script do it? Is there anything
    like this available?
    The following is the page code and accompanying css. I have
    not altered the js file. I apologize for not being able to provide
    a link, but may be able to do so this evening.
    Thanks in advance for your help!
    Stephi
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
    <title>ContraCostaTest</title>
    <script src="SpryAssets/SpryMenuBar.js"
    type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css"
    rel="stylesheet" type="text/css" />
    <link href="Style/style.css" rel="stylesheet"
    type="text/css" />
    <style>
    #container{width:800px; margin:0 auto 0 auto;}
    #content{width:714px; background-color:white;margin:22px 0 0
    0;color:#CCCCCC; font-size:10px}
    #navbar{padding:0 0 32px 0; *margin:0 0 -32px 0; }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="navbar">
    <ul id="MainMenu" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu"
    href="#">Home<br /> </a>
    <ul>
    <li><a href="#">About Us <span> |
    </span></a></li>
    <li><a href="#"> Contact Us <span> |
    </span></a></li>
    <li><a href="#"> ATM Locator <span> |
    </span></a></li>
    <li><a href="#"> News <span> |
    </span></a></li>
    <li><a href="#"> Links <span> |
    </span></a></li>
    <li><a href="#"> Join <span> |
    </span></a></li>
    <li><a href="#"> Employment</a></li>
    </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Loans
    &amp;Rates</a>
    <ul>
    <li><a href="#">Consumer Loans <span> |
    </span></a></li>
    <li><a href="#"> VISA <span> |
    </span></a></li>
    <li><a href="#"> Mortgage Loans <span> |
    </span></a></li>
    <li><a href="#"> Auto Buying
    Center</a></li>
    </ul>
    </li>
    <li><a class="MenuBarItemSubmenu"
    href="#">Checking &amp; Savings</a>
    <ul>
    <li><a href="#">Regular Savings <span> |
    </span></a> </li>
    <li><a href="#"> Checking <span> |
    </span></a></li>
    <li><a href="#"> IRA <span> |
    </span></a></li>
    <li><a href="#"> Share Certificates <span>
    | </span></a></li>
    <li><a href="#"> Club Accounts <span> |
    </span></a></li>
    <li><a href="#"> Rates</a></li>
    </ul>
    </li>
    <li><a href="#"
    class="MenuBarItemSubmenu">Electronic Services</a>
    <ul>
    <li><a href="#">@ccessOnline <span> |
    </span></a></li>
    <li><a href="#"> BillPay <span> |
    </span></a></li>
    <li><a href="#"> Direct Deposit &amp;
    Payroll Deduction <span> | </span></a></li>
    <li><a href="#"> Automatic Bill Payments
    <span> | </span></a></li>
    <li><a href="#"> ATM or MasterMoney <span>
    | </span></a></li>
    <li><a href="#"> Access
    Line</a></li>
    </ul>
    </li>
    <li><a href="#"
    class="MenuBarItemSubmenu">Locations<br />
     </a>
    <ul>
    <li><a href="#"> </a></li>
    </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Forms
    &amp; Applications</a>
    <ul>
    <li><a href="#"> </a></li>
    </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Auto
    Buying Center</a>
    <ul>
    <li><a href="#"> </a></li>
    </ul>
    </li>
    </ul>
    </div>
    <div id="content">This is a test. This is a test. This
    is a test. This is a test. This is a test. This is a test. This is
    a test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test.
    </div>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MainMenu",
    {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
    imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    @charset "UTF-8";
    ul.MenuBarHorizontal
    margin: 0 auto 0 auto;
    padding: 0; /*NOTE: removing this item causes menu bar to
    shift right in FF. wierd...*/
    list-style-type: none;
    font-size: .7em;
    cursor: default;
    ul.MenuBarActive
    z-index: 1000;
    ul.MenuBarHorizontal li
    list-style-type: none;
    font-size: 100%;
    text-align: center;
    cursor: pointer;
    width: 9.1em;
    float: left;
    ul.MenuBarHorizontal ul
    margin: 0 auto 0 auto;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    position: absolute;
    left: 112px;
    *left: 101px;
    border:#CC0033 1px solid;
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: 112px;
    *left: 101px;
    z-index: 1030;
    /*NOTE: submenu set at higher z-index than for
    ul.MenuBarHorizontal ul above at 1020 to display*/
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-image:url(../Images/BGup_03.gif);
    color: #333;
    text-decoration: none;
    height:30px;
    padding-top:2px;
    text-align:center;
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    background-image:url(../Images/BGover_03.gif);
    ul.MenuBarHorizontal iframe{
    position: absolute;
    left: 112px;
    *left: 101px;
    ul.MenuBarHorizontal ul{
    background-color:#999999;
    width:714px; /*NOTE:setting a width keeps submenu
    horizontal*/
    ul.MenuBarHorizontal li li{
    width:auto;
    ul.MenuBarHorizontal li li a{
    background-color:#999999;
    height:20px;
    background-image:none;
    margin-left:5px;
    ul.MenuBarHorizontal li li a span{
    color:black;
    ul.MenuBarHorizontal li li a:hover, ul.MenuBarHorizontal li
    ul li a:focus{
    color:white;
    height:20px;
    background-image:none;
    Text

    Hello!
    I'm using a horizontal spry menu bar with horizontal sub menu
    and have almost gotten the navigation exactly how I need it. I'm
    stuck, however, and don't know how to fix the following:
    1. I have absolute positioning set for my sub menu so that
    the items appear under the left-most main menu item instead of
    their parent item. When I change screen sizes, the sub menu stays
    put (as it should) and everything else moves with the re-size. I
    can't figure out where the sub menu positioning is originally set
    to change it or how to get it to appear where it currently is
    without using absolute positioning.
    2. I would like to center the contents of the sub menu and I
    think I've tried text-align:center everywhere possible but to no
    avail. Any suggestions would be greatly appreciated!
    3. Is there any way that the menu can recongnize the page
    that it's on and display the appropriate link high-lighted. For
    example, when you open the home page the active/focus state for the
    "Home" button shows (for this menu it would be a different color
    background image) and it's corresponding sub menu would be
    displayed automatically. Would a script do it? Is there anything
    like this available?
    The following is the page code and accompanying css. I have
    not altered the js file. I apologize for not being able to provide
    a link, but may be able to do so this evening.
    Thanks in advance for your help!
    Stephi
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
    <title>ContraCostaTest</title>
    <script src="SpryAssets/SpryMenuBar.js"
    type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css"
    rel="stylesheet" type="text/css" />
    <link href="Style/style.css" rel="stylesheet"
    type="text/css" />
    <style>
    #container{width:800px; margin:0 auto 0 auto;}
    #content{width:714px; background-color:white;margin:22px 0 0
    0;color:#CCCCCC; font-size:10px}
    #navbar{padding:0 0 32px 0; *margin:0 0 -32px 0; }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="navbar">
    <ul id="MainMenu" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu"
    href="#">Home<br /> </a>
    <ul>
    <li><a href="#">About Us <span> |
    </span></a></li>
    <li><a href="#"> Contact Us <span> |
    </span></a></li>
    <li><a href="#"> ATM Locator <span> |
    </span></a></li>
    <li><a href="#"> News <span> |
    </span></a></li>
    <li><a href="#"> Links <span> |
    </span></a></li>
    <li><a href="#"> Join <span> |
    </span></a></li>
    <li><a href="#"> Employment</a></li>
    </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Loans
    &amp;Rates</a>
    <ul>
    <li><a href="#">Consumer Loans <span> |
    </span></a></li>
    <li><a href="#"> VISA <span> |
    </span></a></li>
    <li><a href="#"> Mortgage Loans <span> |
    </span></a></li>
    <li><a href="#"> Auto Buying
    Center</a></li>
    </ul>
    </li>
    <li><a class="MenuBarItemSubmenu"
    href="#">Checking &amp; Savings</a>
    <ul>
    <li><a href="#">Regular Savings <span> |
    </span></a> </li>
    <li><a href="#"> Checking <span> |
    </span></a></li>
    <li><a href="#"> IRA <span> |
    </span></a></li>
    <li><a href="#"> Share Certificates <span>
    | </span></a></li>
    <li><a href="#"> Club Accounts <span> |
    </span></a></li>
    <li><a href="#"> Rates</a></li>
    </ul>
    </li>
    <li><a href="#"
    class="MenuBarItemSubmenu">Electronic Services</a>
    <ul>
    <li><a href="#">@ccessOnline <span> |
    </span></a></li>
    <li><a href="#"> BillPay <span> |
    </span></a></li>
    <li><a href="#"> Direct Deposit &amp;
    Payroll Deduction <span> | </span></a></li>
    <li><a href="#"> Automatic Bill Payments
    <span> | </span></a></li>
    <li><a href="#"> ATM or MasterMoney <span>
    | </span></a></li>
    <li><a href="#"> Access
    Line</a></li>
    </ul>
    </li>
    <li><a href="#"
    class="MenuBarItemSubmenu">Locations<br />
     </a>
    <ul>
    <li><a href="#"> </a></li>
    </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Forms
    &amp; Applications</a>
    <ul>
    <li><a href="#"> </a></li>
    </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Auto
    Buying Center</a>
    <ul>
    <li><a href="#"> </a></li>
    </ul>
    </li>
    </ul>
    </div>
    <div id="content">This is a test. This is a test. This
    is a test. This is a test. This is a test. This is a test. This is
    a test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test. This is a test. This is a test. This is a
    test. This is a test.
    </div>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MainMenu",
    {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
    imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    @charset "UTF-8";
    ul.MenuBarHorizontal
    margin: 0 auto 0 auto;
    padding: 0; /*NOTE: removing this item causes menu bar to
    shift right in FF. wierd...*/
    list-style-type: none;
    font-size: .7em;
    cursor: default;
    ul.MenuBarActive
    z-index: 1000;
    ul.MenuBarHorizontal li
    list-style-type: none;
    font-size: 100%;
    text-align: center;
    cursor: pointer;
    width: 9.1em;
    float: left;
    ul.MenuBarHorizontal ul
    margin: 0 auto 0 auto;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    position: absolute;
    left: 112px;
    *left: 101px;
    border:#CC0033 1px solid;
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: 112px;
    *left: 101px;
    z-index: 1030;
    /*NOTE: submenu set at higher z-index than for
    ul.MenuBarHorizontal ul above at 1020 to display*/
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-image:url(../Images/BGup_03.gif);
    color: #333;
    text-decoration: none;
    height:30px;
    padding-top:2px;
    text-align:center;
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    background-image:url(../Images/BGover_03.gif);
    ul.MenuBarHorizontal iframe{
    position: absolute;
    left: 112px;
    *left: 101px;
    ul.MenuBarHorizontal ul{
    background-color:#999999;
    width:714px; /*NOTE:setting a width keeps submenu
    horizontal*/
    ul.MenuBarHorizontal li li{
    width:auto;
    ul.MenuBarHorizontal li li a{
    background-color:#999999;
    height:20px;
    background-image:none;
    margin-left:5px;
    ul.MenuBarHorizontal li li a span{
    color:black;
    ul.MenuBarHorizontal li li a:hover, ul.MenuBarHorizontal li
    ul li a:focus{
    color:white;
    height:20px;
    background-image:none;
    Text

  • Added a spry menu bar and site works in firefox but not in chrome or IE.  Please help

    Hello,
    I'm a photographer by trade and have only picked up enough web design knowledge  in order to build a website that isn't distracting to my photographs and is simple to update and mantain.  Please breakdown any answers to my questions in very simple terms.
    To start off here is a link to my site for reference.  www.cechternach.com
    1.  My Biggest problem right now is that my site works in firefox but appears as a blank white page in chrome and in IE it only shows my background color.
         I'm assuming that this has something to do with the spry menu bar I added.  The galleries, banner, and footer were all part of a previous version of this website that didn't use the menu bar.  I actually used png's exported from an illustrator as buttons.  I've been wrestling with this menu bar for a few days now.  I had an issue with the menubar forcing down the gallery below it.  that was fixed by changing a position value from relative  to absolute in the menubar css.  Then I couldn't see the submenu over the galleries.  I think I fixed that with a wmode change but I"m not sure if I did that right.  I believe i needed to change that in the object and embed part of the code.  One spot for certain browsers and the other spot for other browsers.  I was a little confused on this because i also read that i needed to change the wmode in the javascript file in dreamweaver cs4 which is what i'm using.  Whatever wmode I changed it seemed to work in firefox.  The submenu background was showing up transparent but i fixed that in the menubar css.
    2.  I would like the submenu's to have a semi transparent blurred background effect.  Is this possible with a spry menu bar?
    3.  How do I center my text in the submenu?
    4.  My menu bar buttons should be the same font as my name in my banner.  It looks fine on my computer that has that font loaded but on other computers I was testing the site on the menubar buttons show up as a default font.  How can i fix this?
    5.  Is there any way to get rid of the grey lines that show up around my slideshow pro galleries and menu bar buttons when they are clicked?
    The last four questions aren't as important as the first one.  I may be upsetting the flow of the forum as well.  Please let me know if I'm not following procedure with any of my questions.  Feel free to point out any other problems you see with my page.  I'm trying to learn this as I go.  Thanks in advance.

    Spry widgets, which includes the SpryMenuBar, in their original state do not pose any problem in any browser!
    Widgets contain two parts
    JavaScript which drives the widget
    CSS which styles the widget to individual tastes
    The most common reason for a widget to misbehave especially in IE is because the inexperienced web developer has upset the delicate balance of the CSS. I say delicate, because in the original, great care has been taken by the Spry team to ensure cross browser compatibility.
    There are other reasons why a whole page can misbehave. In these cases, the culprit should be sought outside of the Spry framework.
    When trouble shooting, I would first of all comment out all of the Spry Spry parts and test the page in IE. If it does work after that, then yes come back here and we will have a look at the SpryMenuBarHorizontal.css for you.
    If it doesn't work after disabling Spry, then have a look at the coding and the CSS for your page and fix that.
    I hope this helps.
    Ben

  • Spry Menu rendering improperly in Firefox - PLEASE HELP

    Hello:
    I have searched the forums and the web and can't find the
    solution to the following problem.
    I have a vertical spray menu with flyouts (CS3). Works great
    in IE, in Firefox, the flyouts go to the far right of the page.
    They used to be OFF the page, but I fixed that, I just can't figure
    out the final fix.
    Can someone please help? TIA!
    URL:
    http://www.yourhonor.com
    Code for Menu bar:
    @charset "UTF-8";
    /* SpryMenuBarVertical.css - Revision: Spry Preview Release
    1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights
    reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, a fixed width box
    with no margin or padding */
    ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 85%;
    cursor: default;
    width: 130px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    font-weight: bold;
    /* 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;
    background-image: url(../images/Images/ButtonMaroon.png);
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
    width: 130px;
    /* Submenus should appear slightly overlapping to the right
    (95%) and up (-5%) with a higher z-index, but they are initially
    off the left side of the screen (-1000em) */
    ul.MenuBarVertical ul
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 85%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 130px;
    font-family: Arial, Helvetica, sans-serif;
    left: -1000em;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
    border: 1px solid #CCC;
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text
    decoration */
    ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.5em;
    color: #000000;
    text-decoration: none;
    background-image: url(../images/ButtonGold.png);
    /* Menu items that have mouse over or focus have a blue
    background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    color: #663300;
    background-image: url(../images/ButtonBronze.png);
    /* Menu items that are open with submenus are set to
    MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
    a.MenuBarItemSubmenuHover, ul.MenuBarVertical
    a.MenuBarSubmenuVisible
    color: #660000;
    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.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(../images/ButtonGold.png);
    background-repeat: repeat-y;
    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.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(../images/ButtonBronze.png);
    background-repeat: repeat-y;
    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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
    f\loat: left;
    display: inline;
    width: 130px;

    Hi,
    You have made too many changes to the original stylesheet.
    Please have a look at my remarks here.
    I hope this helps.
    Ben

Maybe you are looking for