Formatting problem with Vertical Spry Menubar with Frameset

I have a frameset, which includes a Top Frame, with a nested
Left Frame, and a nested bottom frame after that. I also have a
vertical spry menubar in this left frame. When I click on an item
to view it's submenu, the center frame of the page cuts of a
significant portion of the submenu. I want the page to appear, so
that when you click on an item to view it's submenu, the submenu
appears past the frame's border, without having to set it up so
that the frame width is relevant to the use of the spry menubar
within it.
I talked to a Tech Support person today over the phone, and
he told me to post here and ask for someone to post custom code for
this.
If anyone can help, it would save me so much grief, and I
would be very greatful!

There is no practical way to make a positioned page element
as you have in
the Spry menus cross the boundary between two separate frames
(i.e., two
unique HTML pages).
It is true. Your choices are limited now -
1. DUMP THE FRAMES - you would not be having this problem in
a non-framed
site.
2. Redesign your menus so that they do not need to span a
frame boundary.
3. Redesign the frameset so that you leave enough room for
the largest
popup.
4. DUMP THE FRAMES - you would not be having this problem in
a non-framed
site.
I recommend either #1 or #4, depending on what your needs
are. You just
have no idea the horrors that await you if you continue with
the frames.....
8)
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"DMMaestro2009" <[email protected]> wrote in
message
news:gbdvir$a8i$[email protected]..
>I have a frameset, which includes a Top Frame, with a
nested Left Frame,
>and a
> nested bottom frame after that. I also have a vertical
spry menubar in
> this
> left frame. When I click on an item to view it's
submenu, the center frame
> of
> the page cuts of a significant portion of the submenu. I
want the page to
> appear, so that when you click on an item to view it's
submenu, the
> submenu
> appears past the frame's border, without having to set
it up so that the
> frame
> width is relevant to the use of the spry menubar within
it.
>
> I talked to a Tech Support person today over the phone,
and he told me to
> post
> here and ask for someone to post custom code for this.
>
> If anyone can help, it would save me so much grief, and
I woulde be very
> greatful!
>
> Here's the link to the page...
>
>
http://www.vrd.ca/713/index2.htm
>

Similar Messages

  • Problems with Vertical Spry in IE

    Hi,
    I am having this problem viewing Vertical Spry menu only on internet explorer. It's ok on google chrome but it messes up on the internet explorer.
    I would highly appreciate if someone could help me sort this out please.
    The link to my website.
    http://www.hbmrc.org/index-1WIP.html
    a@charset "UTF-8";
    /* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
    ul.MenuBarVertical
    margin: 0;
    padding: auto;
    list-style-type: circle;
    font-size: 100%;
    cursor: default;
    width: 13em;
    border-top-color: #edeeee;
    border-top-style:groove;
    border-bottom-color:#313132;
    border-bottom-style:groove;
    border-left-color:#cbcccd;
    border-left-style:groove;
    border-right-color:#3d3d3e;
    border-right-width: thin;
    border-right-style:groove;
    /* 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 same fixed width as parent */
    ul.MenuBarVertical li
    margin: 0;
    padding: auto;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 13em;
    background-color: #FFFFFF;
    overflow: visible;
        background-image: url(../images/sidebarbk.jpg);
    /* 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: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 12em;
    left: -1000em;
    top: 6px;
    ul.MenuBarHorizontal li ul li{
        clear: left;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: -11px;
    border-top-color: #edeeee;
    border-top-style:groove;
    border-bottom-color:#313132;
    border-bottom-style:solid;
    border-bottom-style:groove;
    border-left-color:#cbcccd;
    border-left-style:groove;
    border-right-color:#3d3d3e;
    border-right-width: thin;
    border-right-style:groove;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
    width: 12em;
    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;
    /*background-color:#AECFF4;*/
    background-image: url(../images/sidebarbk.jpg);
    padding: 0.7em 0.75em ;
    color: #000;
    text-decoration: none;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarVertical a:hover
    /*background-color: #777777;
    color: #50cffc;*/
    border-top-color: #edeeee;
    border-top-style:groove;
    border-bottom-color: #50cffc;
    border-bottom-style: groove;
    border-left-color:#cbcccd;
    border-left-style:groove;
    border-right-color:#3d3d3e;
    border-right-width: thin;
    border-right-style:groove;
    padding: 0.45em 0.60em;
    ul.MenuBarVertical a:focus
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover
    background-color: #09F;
    ul.MenuBarVertical a.MenuBarItemSubmenuHover, /*ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #7A85AD;
    color: #333;
    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(SpryAssets/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.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryAssets/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.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    margin: 0;
    padding: auto;
    list-style-type: katakana;
    font-size: 100%;
    cursor: default;
    width: 13em;
    border-top-color: #edeeee;
    border-top-style:groove;
    border-bottom-color:#313132;
    border-bottom-style:groove;
    border-left-color:#cbcccd;
    border-left-style:groove;
    border-right-color:#3d3d3e;
    border-right-width: thin;
    border-right-style:groove;
    /* 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
    display: inline;
    f\loat: left;
    background: #FFF;

    I am sorry, but you have changed the CSS beyound recognition; I do not want to spend my time going through it to correct it.
    One example that has angered me is
    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;
        filter:alpha(opacity:0.1);
        margin: 0;
        padding: auto;
        list-style-type: katakana;
        font-size: 100%;
        cursor: default;
        width: 13em;
        border-top-color: #edeeee;
        border-top-style:groove;
        border-bottom-color:#313132;
            border-bottom-style:groove;
        border-left-color:#cbcccd;
            border-left-style:groove;
        border-right-color:#3d3d3e;
        border-right-width: thin;
            border-right-style:groove;
    Changing this has not made you an expert
    Another example on or about line 155 is this line which is sure to upset the browser.
    ul.MenuBarVertical a:focus
    Yet another one
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
       left: -11px;
        border-top-color: #edeeee;
        border-top-style:groove;
        border-bottom-color:#313132;
        border-bottom-style:solid;
            border-bottom-style:groove;
        border-left-color:#cbcccd;
            border-left-style:groove;
        border-right-color:#3d3d3e;
        border-right-width: thin;
            border-right-style:groove;
    I suggest you start with a new widget, but before you do, read this http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
    Gramps

  • Problems with Vertical Spry menu bar in Internet Explora

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

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

  • IE problems with vertical spry menu bar

    hi,
    first of all: I'm aware that this problem has been discussed
    before. but nothing I've found so far has really helped me.
    the problem is that my vertical spry menu bar doesn't work
    properly with the internet explorer. I've (clumsily) repositioned
    the submenu bars, but that didn't seem to be the main problem.
    I'm using dreamweaver cs3 on a mac and have checked for
    safari and firefox, in which everything works fine. I'd be very
    grateful if someone could have a look at
    www.philipbirau.com/portfolio.htm.
    unfortunatly, I have neither the skills nor the money for
    'professional' webdesign, so any hint will be appreciated. if you
    need more information, please let me know.
    thanks!
    philip

    hi,
    first of all: I'm aware that this problem has been discussed
    before. but nothing I've found so far has really helped me.
    the problem is that my vertical spry menu bar doesn't work
    properly with the internet explorer. I've (clumsily) repositioned
    the submenu bars, but that didn't seem to be the main problem.
    I'm using dreamweaver cs3 on a mac and have checked for
    safari and firefox, in which everything works fine. I'd be very
    grateful if someone could have a look at
    www.philipbirau.com/portfolio.htm.
    unfortunatly, I have neither the skills nor the money for
    'professional' webdesign, so any hint will be appreciated. if you
    need more information, please let me know.
    thanks!
    philip

  • Help with vertical spry menu bar submenu displaying incorrectly!

    I’m new to Dreamweaver and am learning as I go. I am having a problem with the vertical spry menu bar submenu in the Live View. When I scroll over the spry menu bar option that has a submenu, the submenu appears in the upper right hand corner of my screen. (My menu bar is going down the left hand side.) However, when I preview it in Internet Explorer it looks fine after I allow the Java Script to run or the Active X controls, which my browser usually automatically blocks. (The browser just displays a small message along the top and I click on it to allow it.) To get it to do this much, I had to play around with the CSS for the spry menu bar a little bit.
    Before, when I clicked on the Live View option, a small message ran along the top in Dreamweaver saying it couldn’t find the Flash Plugin and asked me to download the most recent FlashPlayer, which I did twice. It continued to say that and then I just closed that message that kept popping up, but I think that has something to do with the problem. I then researched that problem in the Spry Framework Help and Dreamweaver Help, but couldn’t find a solution that worked. (Someone had posted a link for downloading the Flash Player for Netscape Navigator, but that didn’t seem to do anything.)
    Please also note that I am using one of Dreamweaver’s pre-built layouts. I don’t know if that makes a difference with this problem.
    How do I fix this problem so that it displays correctly in the LiveView? And will the message that I get on my browser about allowing blocked content appear on other people’s computer when they open my website?

    IE is a big problem child among browsers.  Don't use it as your default browser.
    For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera.   If it works in one, it should work pretty much the same in all of them.
    After you're satisfied with how your site looks in the good browsers, then test in IE.  If needed, add hacks or conditional comments to make IE behave.  There are many web sites that discuss known bugs in IE and how to work around them.
    Lastly, the active X nag screens only appear locally.  Once deployed on the remote server, you won't see them.
    For better answers to your layout questions, we need to see your page.  Can you post a URL?
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Help with vertical Spry menu

    I posted this in the general forum, but thought I'd repost
    here since this is more specific to Spry.
    I'm having issues in IE (6 & 7...surprise, surprise) with
    my vertical spry menu. It displays exactly the way I want it when I
    use Opera. I think it has to do with the whitespace:nowrap on the
    2nd level menu items, but I really don't know. I want the 2nd level
    menu to be different width than the 3rd level, so I have both
    levels set to auto width with nowrap.
    This is how it looks in IE 7:
    Menu
    in IE
    This is how it looks in Opera (correct):
    Menu
    in Opera
    Attached is my CSS as well. Let me know if you need the HTML,
    too.
    Thank you for helping!
    quote:
    @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: 100%;
    cursor: default;
    width: 8em;
    /* 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 same fixed width as parent */
    ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 8em;
    /* 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: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: auto;
    left: -1000em;
    top: 0;
    white-space: nowrap;
    /* 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;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
    width: auto;
    white-space: nowrap;
    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;
    background-color: #EEE;
    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.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #33C;
    color: #FFF;
    /* 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
    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.MenuBarVertical 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.MenuBarVertical 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.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
    display: inline;
    f\loat: left;
    background: #FFF;

    IE is a big problem child among browsers.  Don't use it as your default browser.
    For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera.   If it works in one, it should work pretty much the same in all of them.
    After you're satisfied with how your site looks in the good browsers, then test in IE.  If needed, add hacks or conditional comments to make IE behave.  There are many web sites that discuss known bugs in IE and how to work around them.
    Lastly, the active X nag screens only appear locally.  Once deployed on the remote server, you won't see them.
    For better answers to your layout questions, we need to see your page.  Can you post a URL?
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Connect horizontal with vertical spry menu

    Hi,
    I am a beginner, so maybe this is a stupid question... But here we go
    Is there a way to "link" horizontal and vertical menu bars together?
    I'll try to give an example...
    The horizontal bar (main menu, in the header of the page) is:
    Item 1          Item 2        Item 3          Item 4
    (sub 1.1)      (sub 2.1)
    (sub 1.2)      (sub 2.2)
    Now, when clicking on one of the links, let's say "Sub 2.2", I would like to have the sidebar show this:
    Item 2
    sub 2.1
    sub 2.2
         subsub 2.2.1
         subsub 2.2.2
         subsub 2.2.3
    sub 2.3
    Where "Item 2" stays fixed as a title, and the subs form an accordion menu revealing sub-submenu's (you can open and jump to another sub by clicking on it)
    Now, the easy way to do this, is to create a separate page with a separate accordion menu in the side bar for each of the "Items". But that means that when I alter something (add a submenu, change its name, change a link, etc), I'd need to change the separate pages as well.
    Is there a not too complicated way to link them together? So that the Item 2 in the side bar is not just a word, and the menu below not just a separate menu, but refer to the horizontal menu which is in the header? In other words, I would like to create one single list with all the "Items", "Subs" and "Sub-subs" to which I can refer and use them in different spry formats and locations.
    Thanks in advance!
    Tom

    Short answer, no way to do that with Spry menus.  Also, Spry is a dead framework.  Adobe abandoned it in 2012 and removed Spry from DW CC because it has outlived it usefulness and is not mobile friendly. 
    You might want to consider a different navigation approach such as a jQuery Mega Menu.
    5 Best jQuery CSS3 Navigational Mega Menus | Jaspreet Chahal
    Nancy O.

  • Spry Vertical Navigation menu with secondary flyout menu not showing

    I'm using Windows and CS3. I have a vertical spry menu with one of the items opening to a secondary vertical menu. The menu is positioned left and I want the flyout menu to open so it can be seen on top of the central content column. I have a background color on the central div and when I hover over the item on the menu bar, you can't see the secondary menu opening. But I know it is there as I have removed the central div and when previewed in the browser (IE) it works fine. But when I replace the central div, the secondary menu is hidden again. I don't want to play around too much as I know Javascript is involved and I can easily ruin those elements which are now working. I hope someone can suggest something reasonably straight forward to assist.
    The code is the standard stuff - I have only modified colours basicall with one or two other tweaks to fit the space:
    ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 200px;
    background-color: #979c9c;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    border-bottom-width: 1px;
    border-bottom-color: #FFFFFF;
    ul.MenuBarActive
    z-index: 1000;
    ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 200px;
    color: #343642;
    ul.MenuBarVertical ul
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 200px;
    left: -1000em;
    top: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 100%;
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
    ul.MenuBarVertical ul li
    width: 200px;
    ul.MenuBarVertical ul
    ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #979c9c;
    color: #343642;
    text-decoration: none;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #343642;
    color: #fff;
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #343642;
    color: #fff;
    ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    ul.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    ul.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    @media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
      display: inline;
      f\loat: left;
      background: #FFF;
    Thanks.

    Frank,
    The code that you have shown us re SpryMenuBarVertical.css is correct so that we can assume that the problem lies elsewhere.
    Because you have not shown the rest of the code, we can only make assumptions which may or may not help. From the above screen shot, I see that you are using AP's (Absolute Positioned) elements. This is a NO NO!!!
    Have a look at the following wich achieves the same, but without AP's. Just copy and paste in a new document and view in any browser.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
        margin: 0;
        padding: 0;
    html {
        height: 100%;
        background: #FFC;
    body {
        width: 960px;
        margin: auto;
        background: #060;
    h1, h2, h3, p {
        margin: 0 20px;
    #header {
        height: 95px;
        background: #060;
    #sidebarL {
        width: 160px;
        float: left;
        color: #CCC;
    #content {
        width: 800px;
        float: left;
        background: #FFF;
    #sidebarR {
        width: 200px;
        float: right;
        background: #FF3;
    #footer {
        height: 50px;
        background: #060;
        color: #CCC;
        clear: both;
    </style>
    </head>
    <body>
    <div id="header"><h1>This is my Header</h1></div>
    <div id="sidebarL">
      <h3>This is my sidebar</h3>
      <p>This is where our menu goes</p>
    </div>
    <div id="content">
      <div id="sidebarR">
          <h3>This is my other sidebar</h3>
        <p>Sed do eiusmod tempor incididunt ullamco laboris nisi velit esse cillum dolore. Duis aute irure dolor sunt in culpa lorem ipsum dolor sit amet. Qui officia deserunt consectetur adipisicing elit, ut enim ad minim veniam.</p>
      </div>
        <h2>This is the content</h2>
      <p>Velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, ullamco laboris nisi sed do eiusmod tempor incididunt. Ut labore et dolore magna aliqua. Sunt in culpa in reprehenderit in voluptate ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor quis nostrud exercitation lorem ipsum dolor sit amet. Ullamco laboris nisi consectetur adipisicing elit, qui officia deserunt. Ut labore et dolore magna aliqua. Quis nostrud exercitation. Velit esse cillum dolore ut aliquip ex ea commodo consequat.</p>
      <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut enim ad minim veniam. Eu fugiat nulla pariatur. Duis aute irure dolor sunt in culpa lorem ipsum dolor sit amet. Cupidatat non proident, excepteur sint occaecat velit esse cillum dolore.</p>
    </div>
    <div id="footer"><p>and lastly here is my footer</p></div>
    </body>
    </html>
    Gramps

  • Spry Menubar, Vertical not showing in IE

    Hi,
    I am using the vertical Spry menubar, and i have three levels of submenus... Main Menu->SubMenu->Sub-SubMenu
    IE show only the first two levels (Main Menu->SubMenu) but the third level is not being displayed.
    How can i fix this?

    The original SpryMenuBar files do not have a problem with modern browsers.
    This means that either
    you have fiddled with the original Spry files
    you have other markup that stops the menu from displaying properly
    you have both of the above
    If you need further assistance, you will need to supply an online URL so that we can see your code
    Ben

  • SPry menubar floating submenu's

    I've been tackling with this spry menubar trying to get it so that menu's float over content in div's or frames instead of positioning the content below the extended menu.
    Here is my website www.nathanielmcmahon.com
    I had it working in one browser before but not others.  Now firefox and iexplorer push content below and chrome pushes content to the side.
    I want the menu to display over content with an opaque background
    Below is the modified sprymenubar css.
    @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
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        z-index: 1200;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        text-align: left;
        cursor: pointer;
        width: auto;
        float: left;
        height: inherit;
        position: relative;
    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
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: 10em;
        position: relative;
        left: -1000em;
        z-index: 1300;
        visibility: visible;
    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: 115px;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 13em;
        z-index: 2000;
        height: 35px;
        background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../assets/images
    /transparent-png.png', sizingMethod='fixed');
        background-color: #FFF;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        margin: -27% 0 0 75%;
    /* 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;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        padding: .5em;
        color: #999999;
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-weight: bold;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        color: #999999;
    /* 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: #999999;
    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(../SpryAssets/SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 94% 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(../SpryAssets/SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 94% 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(../SpryAssets/SpryMenuBarDownHover.gif);
        background-repeat: no-repeat;
        background-position: 94% 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(../SpryAssets/SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 94% 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
        z-index: 1010;
        position: absolute;
        ul.MenuBarHorizontal li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;

    I've been tackling with this spry menubar trying to get it so that menu's float over content in div's or frames instead of positioning the content below the extended menu.
    Here is my website www.nathanielmcmahon.com
    I had it working in one browser before but not others.  Now firefox and iexplorer push content below and chrome pushes content to the side.
    I want the menu to display over content with an opaque background
    Below is the modified sprymenubar css.
    @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
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        z-index: 1200;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        text-align: left;
        cursor: pointer;
        width: auto;
        float: left;
        height: inherit;
        position: relative;
    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
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: 10em;
        position: relative;
        left: -1000em;
        z-index: 1300;
        visibility: visible;
    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: 115px;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 13em;
        z-index: 2000;
        height: 35px;
        background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../assets/images
    /transparent-png.png', sizingMethod='fixed');
        background-color: #FFF;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        margin: -27% 0 0 75%;
    /* 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;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        padding: .5em;
        color: #999999;
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-weight: bold;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        color: #999999;
    /* 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: #999999;
    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(../SpryAssets/SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 94% 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(../SpryAssets/SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 94% 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(../SpryAssets/SpryMenuBarDownHover.gif);
        background-repeat: no-repeat;
        background-position: 94% 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(../SpryAssets/SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 94% 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
        z-index: 1010;
        position: absolute;
        ul.MenuBarHorizontal li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;

  • Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

    Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
    The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
    I realize the images are not ideally sized - I'll fix those once I get the pages to function.  Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
    The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
    I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
    I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
    Thanks in advance.
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Reardan Area Chamber of Commerce</title>
    <meta name="description" content="home page for Reardan Area Chamber of Commerce" />
    <meta name="keywords" content="Reardan WA, chamber of commerce" </>
    <script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.cycle.all.js" type="text/javascript">  </script>
    <script type="text/xml">
    </script>
    <style type="text/css">
                                  #slideshow { 
                                      padding: 10px;
                                            margin:0; 
                                  #slideshow-caption{
                                            padding:0;
                                            margin:0;
                                  #slideshow img, #slideshow div { 
                                      padding: 10px;
                                      background-color: #EEE;
                                      margin: 0;
    body {
              font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
              background: #004B8D;
              margin: 0;
              padding: 0;
              color: #000;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
              padding: 0;
              margin: 0;
    h1, h2, h3, h4, h5, h6, p {
              margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
               /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    .left
    position:absolute;
    left:0px;
    .center
    margin:auto;
    width:95%;
    .box
              position:relative;
              left:-90px;
              width:950px;
              height:350px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
              z-index:1000;
    .slide{
        position:absolute;
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
              border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
              color: #42413C;
              text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
              color: #6E6C64;
              text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
              text-decoration: none;
    /* ~~this fixed width container surrounds the other divs~~ */
    .container {
              width: 960px;
              min-height:900px;
              padding:5px 0px 0px 0px;
              background: #E8F8FF;
              margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
              background: #E8F8FF;
              padding:10px 5px 0px 5px;
    .sidebar1 {
              float: left;
              width: 225px;
              margin: 60px;
              color: #FFFF0D;
              background: #595FFF;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
              padding: 5px 5px 0px 5px;
        border: 3px solid #F7F723;
        z-index:-1;
    .sidebar2 {
              float: left;
              width: 275px;
              color: #FFFF0D;
              text-align: left;
              background: #595FFF;
              padding-bottom: 10px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        border: 3px solid #F7F723;
        z-index:2;
    .sidebar3 {
              float: left;
              width: 275px;
              color: #FFFF0D;
              text-align: left;
              background: #595FFF;
              padding-bottom: 10px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        border: 3px solid #F7F723;
        z-index:3;
    .content {
              padding: 0px 0px 0px 0px;
              width: 780px;
              float: left;
              background: #E8F8FF;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
              padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
              list-style: none; /* this removes the list marker */
              border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
              margin-bottom: 50px; /* this creates the space between the navigation on the content below */
              font: Arial Black, Verdana, , Helvetica, sans-serif;
              font-size:1.3em;
              font-weight:bold;
              z-index:2;
    ul.nav li {
              border-bottom: 0px solid #FFFF66; /* this creates the button separation */
              font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
              padding: 3px 0px 5px 0px;
              display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
              width: 185px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
              text-decoration: none;
              color: #FFFF0D;
              background: #595FFF;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
              background: #595FFF;
              font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
              color: #FFFFFF;
    /* ~~ The footer ~~ */
    .footer {
              padding: 10px 0;
              background:  #595FFF;
              color: #FFFF0D;
              position: relative;/* this gives IE6 hasLayout to properly clear */
              clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
              float: right;
              margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
              float: left;
              margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
              clear:both;
              height:0;
              font-size: 1px;
              line-height: 0px;
    -->
    </style>
    </head>
    <body>
    <div class="container">
      <div class="header"><!-- end .header -->
      <a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
      <p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
      </div>
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="about.html">About Us</a></li>
          <li><a href="history.html">Reardan History</a></li>
          <li><a href="activities.html">Activities</a></li>
          <li><a href="business.html">Business<br />
            Directory</a></li>
          <li><a href="about.html">Join the<br />
            Chamber</a></li>
           <li><a href="links.html">Links<br />
      <span style="font-size: 85%">Tourism</span><br />
          </a></li>
        </ul>
         <!-- end .sidebar1 --></div>
    <br />
    <br />
    <br />
    <br />
    <div class="box" +"slide">
      <script type="text/javascript">
    // BeginOAWidget_Instance_2559022: #slideshow
                               slideshowAddCaption=true;
    $(window).load(function() {
      $('#slideshow').cycle({
                        after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                        autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                        fx:                                        'blindX',// name of transition effect
                        pause:                              false,     // true to enable pause on hover
                        randomizeEffects:          true,  // valid when multiple effects are used; true to make the effect sequence random
                        speed:                              100,  // speed of the transition (any valid fx speed value)
                        sync:                              true,     // true if in/out transitions should occur simultaneously
                        timeout:                    5000,  // milliseconds between slide transitions (0 to disable auto advance)
                        fit:                              true,
                        height:                       '300px',
                        width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
    function slideshowOnCycleAfter() {
              if (slideshowAddCaption==true){
                                  $('#slideshow-caption').html(this.title);
    // EndOAWidget_Instance_2559022
      </script>
      <div id="slideshow">
        <!--All elements inside this will become slides-->
        <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
        <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
        <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>
      <!--It is safe to delete this if captions are disabled-->
      <div id="slideshow-caption"></div></div>
    <div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
    Local News item
    <br />
    Another New item</p>
      <p align="center">lots of news this week<br />
        <br />
        <br />
        <br />
      </p>
    </div>
    <div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
      <div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
        <br />
        <br />
        <br />
        <br />
      </div>
    </div>
    <div class="content"><br />
    <br />
    </div>
    <div class="footer">
            <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
              <span style="font-size: x-small">[email protected]  - 509.796.2102</span><br />
            </p>
            <!-- end .footer -->
    </div></body>
    </html>

    If you DO want the slideshow overlaping the navigation try the below css:
    .sidebar1 {
        float: left;
        width: 225px;
        margin: 60px 0px 60px 60px;
        color: #FFFF0D;
        background: #595FFF;
        border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        padding: 5px 5px 0px 5px;
        border: 3px solid #F7F723;
    .box {
    float: left;
    margin-left:-60px;
    width:700px;
    height:350px;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;

  • How to make spry menubar top level only appear for browsers with java turned off

    I was under the impression that just the top level of the horizontal spry menubar appears when someone with Java turned off views it...now I see that the entire unordered list appears vertically and takes up the whole page....is there a way to make just the top level menubar items appear when java is turned off in viewers browser?
    Thank you in advance for any insight you can provide.
    Lois

    When you disable Javascript in your browser...and it is Javascript not Java... if your menubar is properly constructed, the submenus do not appear, only the top level menu items.
    It sounds to me as if you are turning off style rendering in Dreamweaver itself, or have not properly linked your CSS stylesheet to your page.
    When CSS is linked properly, the submenus are "hidden" with left: -10000px; (a BIG distance) offscreen to the left of the Viewport. They stay there unless Javascript is turned on. It is Javascript that "calls them back" onto the Viewport.
    Give me a link, Lois, and I'll check into your page for you...
    Beth

  • Problems with vertical cell borders and the default table style

    When laying out tables in Word, I like to use thin horizontal lines (cell borders) and thick-ish white vertical lines. The vertical white cell borders create a subtle negative space that is less cluttered than the typical boxed-in-all-sides style.
    Issue 1.
    In Pages, horizontal cell borders seem to take precedence over vertical cell borders so my vertical white line trick doesn't work. Is there a way to force my vertical white cell borders to "show up" over my think black horizontal cell borders?
    Issue 2.
    So, for the time being, I'm not using vertical white cell borders in tables; instead, I set the vertical cell borders to "none." Unfortunately, when I try to set the default table style using a table with no vertical cell borders, Pages adds the vertical cell borders anyway. Does anyone know a way to get Pages to surrender?
    Message was edited by: Steve in Seattle

    I must apologizes.
    It seems that I didn't understand well the problem.
    Issue 1.
    In Pages, horizontal cell borders seem to take precedence over vertical cell borders so my vertical white line trick doesn't work. Is there a way to force my vertical white cell borders to "show up" over my think black horizontal cell borders?
    NO
    Issue 2.
    So, for the time being, I'm not using vertical white cell borders in tables; instead, I set the vertical cell borders to "none." Unfortunately, when I try to set the default table style using a table with no vertical cell borders, Pages adds the vertical cell borders anyway. Does anyone know a way to get Pages to surrender?
    I checked and here, aftere defining a new default format with vertical lines set to none, this format is used when I cvreate a new table.
    But the same with horizontal lines doesn't apply.
    _Go to "Provide Pages Feedback" in the "Pages" menu_, describe what you wish.
    Then, cross your fingers, and wait _at least_ for iWork'10
    Yvan KOENIG (from FRANCE mardi 28 avril 2009 22:31:45)

  • Attempt to process file failed with Exception in XML Parser-format problem

    Hi all,
    Iam getting an unusual error in the J2EE stack in XI.
    And the message is:
    006-11-30 17:31:07 Error Attempt to process file failed with Exception in XML Parser (format problem?):'com.sap.engine.lib.xml.parser.NestedSAXParserException: Fatal Error: com.sap.engine.lib.xml.parser.ParserException: Invalid char #0xf(:main:, row:1, col:1044002)(:main:, row=1, col=1044002) -> com.sap.engine.lib.xml.parser.ParserException: Invalid char #0xf(:main:, row:1, col:1044002)' 2006-11-30 17:31:07 Error Exception caught by adapter framework: null 2006-11-30 17:31:07 Error Delivery of the message to the application using connection AFW failed, due to: RecoverableException.
    My scenerio iam posting IDOC to a flat file with content conversion in the receiver side,the mapping got executed successfully and in the audit log i found that the error was after the 'Start converting XML document content to plain text'.
    This means that error occured during content conversion of XML to the prescribed file format.
    Can anyone suggest any better approach using which we may trace the junk data in IDoc. Manual adhoc approach could take time and is error prone.
    Thanks in advance...
    karun

    Hi Bhavesh,
    Thanks for the early reply. I checked the mapping and everything is fine and the output is also in valid XML format.
    The audit log shows that the mapping got executed successfully and the error is after the step 'Start converting XML document content to plain text '. Is there any constraint in the file adapter regarding the message size for parsing.
    2006-11-30 17:30:50 Success Transfer: "BIN" mode, size 2912595 bytes, character encoding -
    2006-11-30 17:30:50 Success Start converting XML document content to plain text
    2006-11-30 17:31:07 Error Attempt to process file failed with Exception in XML Parser (format problem?):'com.sap.engine.lib.xml.parser.NestedSAXParserException: Fatal Error: com.sap.engine.lib.xml.parser.ParserException: Invalid char #0xf(:main:, row:1, col:1044002)(:main:, row=1, col=1044002) -> com.sap.engine.lib.xml.parser.ParserException: Invalid char #0xf(:main:, row:1, col:1044002)'
    2006-11-30 17:31:07 Error Exception caught by adapter framework: null
    2006-11-30 17:31:07 Error Delivery of the message to the application using connection AFW failed, due to: RecoverableException.
    2006-11-30 17:31:07 Success The asynchronous message was successfully scheduled to be delivered at Thu Nov 30 17:36:07 GMT 2006.
    2006-11-30 17:31:07 Success The message status set to WAIT.
    2006-11-30 17:31:08 Success Acknowledgement creation triggered for type: SystemErrorAck
    2006-11-30 17:31:08 Success Acknowledgement sent successfully for type: SystemErrorAck
    2006-11-30 17:36:08 Success Retrying to deliver message to the application. Retry: 1

  • Smartform: Formatting Problem with QUAN-Field

    I want to print a smartform and get exception 1 (formatting error). With function SSF_READ_ERRORS I get an error table. There is on entry: errnumber = 020011, msgid = SSFCOMPOSER, msgty = E, msgno = 601, msgv1 = wa_outtab-menge.
    It seems to be a formatting problem with field WA_OUTTAB-MENGE. But in the structure this field is referenced correctly.
    Does anybody know a solution?

    I solve this kind of problem in my SmartForm.
    Try this:
    Go to "Global Definitions" Node, then "Current/Quant.Fields" tab and set these values:
    Field Name:      WA_OUTTAB-MENGE
    Reference Field: WA_OUTTAB-MEINS
    Data Type:       QUAN
    Best Regards,
    Eduardo Ribeiro.

Maybe you are looking for