Seperate spry tabbed menu styles

I am trying to style two tabbed menus differently (one
is inside of the other one... and am having problems)  I have been reading previous posts but can't quite seem to figure it out.
1)I created the first tabbed menu and modified the styles and saved the .css as mainpanel.css
2) created the second menu and changed the code to "label2" for each segment of the code and saved the stylesheet as secondlabel.css
everything works fine EXCEPT THE SELECTED TAB...I can't seem to be able to modify the style of the selected tab in the second tabbed menu ..
is this because it is lying within the content of the first tabbed menu??
thanks in advance
tell me WHATS GOOD!

so to change the style on the css
you have to add the new name at the beginning of each of the different styles present in the sprymenu.css
.newstyle .Tab {}
.newstyle .TabSelected {}
I was trying to modify them each: (ex: .newstyleTab {}, .newstyleTabSelected{}  - which was no successful
that's whats good

Similar Messages

  • Help with spry tabbed menu bar

    Hi.
    I need help with the spry tabbed menu panel (horizontal) It
    works fine in dreamweaver ( pressing f12 ) but when i goto my
    website www.so-nouveau.com it puts it all over and not in boxes
    either just the writing.
    I ahve double checked all uploading is correct and files are
    located but it wont work.
    Here is what i did >
    new> html> 1 column elastic,centered. i have not
    changed any other settings at all. Do i need to change the doc type
    or css layout in the drop down menus before starting (doc
    type=xhtnl 1.0 transitional and layout css=add to head)
    I am still on cs3 , does this matter ? or is 4 easier ?
    any help out there guys is much appreciated but please bear
    in mind that i am not a web designer or pc expert at all , this is
    just me building my own site , until nowit has been an enjoyable
    experience but grrrrrr when it dont work
    Thanks
    Jay

    so-nouveau wrote:
    > Hi.
    > I need help with the spry tabbed menu panel (horizontal)
    It works fine in
    > dreamweaver ( pressing f12 ) but when i goto my website
    www.so-nouveau.com it
    > puts it all over and not in boxes either just the
    writing.
    Please post links directly to the page having an issue. I saw
    no tabs on the home page, but I noticed that there is a link on the
    bottom of the page to this page that has a Spry tab on it:
    http://www.so-nouveau.com/test%208.html
    > I ahve double checked all uploading is correct and files
    are located but it
    > wont work.
    That page refers to a Spry JavaScript file and a Spry CSS
    file, which should be at the following locations but are not
    present:
    http://www.so-nouveau.com/SpryAssets/SpryTabbedPanels.js
    http://www.so-nouveau.com/SpryAssets/SpryTabbedPanels.css
    Make sure you upload the SpryAssests folder and see where
    you're at after that.
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

  • Cannot keep spry tabbed menu working

    I have created a spry tabbed menu on my page, as well as an accordian menu on another page. I saved my spry files in the spry assets folder, along with my menu bar (which works just fine.) I will add it, make changes, save it, preview it, and the accrodian and tabbed menu both works on the pages i save them on. then i close and the next time i open that page, they have lost their animation and are just lists on my page. What am i doing wrong?

    Have you got an online link to your pages?

  • Spry tab menu background image is not displaying on remote server

    Hello All,
    I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
    Here is the link
    http://www.geftas.com/temaritestpage/about.html
    Also I am uploading Css and html code below
    Any help would be exteremely appreciated.
    Thanks
    <!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=utf8"/>
    <meta http-equiv="content-type" content="cache" />
    <meta http-equiv="robots" content="INDEX,FOLLOW"  />
    <meta http-equiv="keywords" content="Enter Keywords"/>
    <meta http-equiv="description" content="Description Here" />
    <title>TEMARI&CO. | Business Strategists</title>
    <link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
              <div id="header"></div>
      <div id="navigation">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">HOME</a></li>
          <li><a href="about.html" class="current">ABOUT</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
            <ul>
              <li><a href="#">Business Plan</a></li>
              <li><a href="#">Marketing Plan</a></li>
              <li><a href="#">Incorporation</a></li>
              <li><a href="#">Accounting System</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#">OUR PROCESS</a></li>
          <li><a href="#">CAREERS</a>      </li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    <div class="shadow" id="content">
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">values</li>
          <li class="TabbedPanelsTab" tabindex="0">people</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
                    <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
            </div>
          </div>
          <div class="TabbedPanelsContent">
                      <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem n, </p>
                                <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, , </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit a, </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet,  </p>   
            </div>
          </div>
        </div>
      </div>
    </div>
      <div id="footer">
    <div id="legal">
                          <ul>
                              <li>Copyright © 2012 Temari&Co</li>
                        <li>| Privacy Policy |</li>
                        <li>Terms of Use</li>
                    </ul>
        </div>
                <div id="socialmedia">
                          <ul>
                              <li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
                        <li><img src="images/gicongri.png" width="20"          height="20" alt="gicon"/></li>
                        <li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
                        <li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
                  </ul>
          </div>   
      </div><!-- end footer-->   
    </div><!-- end wrapper-->
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    .TabbedPanels {
              overflow: hidden;
              margin: 0px;
              padding: 0px;
              clear: none;
              width: 100%;
              height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    .TabbedPanelsTabGroup {
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTab {
              position: relative;
              float: left;
              background-color: #FFF;
              list-style: none;
              -moz-user-select: none;
              -khtml-user-select: none;
              cursor: pointer;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              font-weight: normal;
              color: #666;
              height: 30px;
              width: 116px;
              text-transform: uppercase;
              text-align: center;
              line-height: 30px;
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTabHover {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
    .TabbedPanelsTabSelected {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
              height: 30px;
              width: 116px;
    .TabbedPanelsTab a {
              color: black;
              text-decoration: none;
    .TabbedPanelsContentGroup {
              clear: both;
              background-color: #FFF;
              height: 100%;
              width: 824px;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              color: #666;
              border-top-width: 1px;
              border-right-width: 1px;
              border-bottom-width: 1px;
              border-left-width: 1px;
              border-top-style: dotted;
              border-top-color: #CCC;
              border-right-color: #CCC;
              border-bottom-color: #CCC;
              border-left-color: #CCC;
    .TabbedPanelsContent {
              height: 100%;
              width: 100%;
              overflow:hidden;
    .TabbedPanelsContentVisible {
    .VTabbedPanels {
              overflow: hidden;
              zoom: 1;
    .VTabbedPanels .TabbedPanelsTabGroup {
              float: left;
              background-color: #EEE;
              position: relative;
    .VTabbedPanels .TabbedPanelsTab {
              float: none;
              margin: 0px;
              border-top: none;
              border-left: none;
              border-right: none;
    .VTabbedPanels .TabbedPanelsTabSelected {
              background-color: #EEE;
    .VTabbedPanels .TabbedPanelsContentGroup {
              clear: none;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
              overflow: visible !important;
    .TabbedPanelsContentGroup {
              display: block !important;
              overflow: visible !important;
              height: auto !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
    .TabbedPanelsContent {
              clear:both !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
              width: 744px;
    .TabbedPanelsTab {
               overflow: visible !important;
               display: block !important;
               clear:both !important;

    Assuming these are the images you're trying to display:
    .TabbedPanelsTabHover {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
    .TabbedPanelsTabSelected {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
              height: 30px;
              width: 116px;
    You have 2 root paths in your URL code. I think this is how your file structure looks like on your local computer. However, on a remote server, ../ by itself means you're pointing to the root folder of your website. Your URL linkage should be corrected based on the relativity and your background will work without a problem.

  • Can i put toolbars on the Spry Tabbed Menu

    Hi,
    I have a spry tabbed panel on my site and have filled it with
    a spry data set from a static XML file. Eventually there will be a
    fair bit of content in the tabbed panel content area so im
    wondering if its possible to put scroll bars in the content area?
    As it is, when i populate the content area with lorum ipsum text to
    test the panel the text flows past the bottom of the content
    area...
    Any ideas?
    Thanks in advance..

    Yes there is a simple way of doing this either in your CSS
    document or the tag itself add the "height:??px;" to set the height
    that you want the box to be and then use the "overflow:scroll;"
    attributes, you need to add this to the "TabbedPanelsContentGroup"
    Div (Default name). And this should solve your problem.
    Regards Phil.

  • Spry tabbed menu question

    I would like to know if it is possible to use any of the tabs
    to not only be a link to display it's content, but display it's
    content only after arriving at a page that it jumps to when clicked
    from another page?
    Let's say you're on the home page and that home page has four
    (4 including the home page) tabs defined in a menu. Each of those
    tabs have content that are defined for sub pages for the main area
    the tab takes you to when you click it from the home and are only
    displayed when arriving from the home page after clicking the tab
    you wanted to visit. Once on that page, the tab content (submenu
    item links) is displayed only from that main area and other related
    submenu pages.
    I tried the onclick="window.location='pageurl'" in the tab
    code, it seems to work, but the visibility jumps back to the home
    tab content (default visibility).
    help and direction is appreciated.
    Thanks,
    nitefisher

    If i understand your question correct, u a looking for
    something like this:
    http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html

  • Spry tabbed menu

    Let me first say I am a public policy analyst, NOT a web
    designer but alas my boss seems to think web and policy are in the
    same category. So, I get to figure out how to re-do our website
    with what she wants.
    She wants tabs which I have figured out how to create using
    Spry. But, she wants each tab to have a different color ... doesn't
    seem possible in Spry. Help, ideas, options?????
    Thanks

    Spry tabs would be controlled by the CSS on the page.
    Can you post a link to this page?
    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
    ==================
    "BluDog07" <[email protected]> wrote in
    message
    news:g4pqkb$g64$[email protected]..
    >
    > Let me first say I am a public policy analyst, NOT a web
    designer but alas
    > my
    > boss seems to think web and policy are in the same
    category. So, I get to
    > figure out how to re-do our website with what she wants.
    >
    > She wants tabs which I have figured out how to create
    using Spry. But,
    > she
    > wants each tab to have a different color ... doesn't
    seem possible in
    > Spry.
    > Help, ideas, options?????
    >
    > Thanks
    >

  • Spry Tab question

    I've got the use of the spry tab figured out, but what I'd like to know is if I can change the 'look' of the tabs.  Rather than just have them be plain ol' squares, I'd like to change the style of them (more than just the color).  Is it possible to change the shapes?  Or to specify a .jpg to use as the tab?
    Thanks!

    I appreciate all the feedback, but I have a few more questions...
    I want to do something like the example I've provided, but have two questions in that regard.
    The 1st - those tabs overlap.  Is their an easy way to accomplish that, as a newbie?  I don't know much, still learning.  Obviously it would be easier to create tabs that don't overlap and avoid this issue altogether, but I really like the look.
    My 2nd question is the drop shadow.  I can create the drop shadow in Photoshop, but I'm wondering if there's an easier way to do it in Dreamweaver.  Just apply the Spry Tab Menu and tell it to put a drop shadow behind it.  Is there something that easy, or do I need to create the drop shadow in Photoshop and use div tags to basically put it 'around' the spry tab menu?  Does that even make sense?  I know what I mean in my head, but might not be explaining it properly...

  • Tab menu background problem

    I am using the spry tabbed menu and currently I have the
    background image of the entire header section set to a repeating
    image. I left the tabbed menu div background color and image blank
    so that the header section will come thru. It works fine in IE 7
    but in FF the tabbed menu adds a white background... here is the
    link to the test page...
    http://afm.geofoam.com/homepage.asp
    Any suggestions?

    Hi,
    Try to add a fixed height for the header container. I added
    for this css rule: .thrColFixHdr #header the height:105px and seems
    to work also in FF.
    Please let us know if this fixes your problem
    Diana

  • Spry tab or accordian menus

    Hey,
    Can anyone tell me of a fix for this:
    I'm using a spry tabbed menu [also does same on accordian
    menu] . When I view the menu in firefox, it has a grey dotted
    border around each tab - or the whole box in the case of the
    accordian. It looks just like flash animations used to before the
    activate content fix.
    Any solutions?
    Thanks
    Shell

    Without seeing an example it's hard to know exactly what
    specifically you are referring to, but it's been my experience that
    DW is adding a border - in different shades of grey - to all
    accordins and tabbed menus. You would have to go into the CSS or
    code and remove the border option.

  • Spry tabbed panels as menu system

    Hi,
    This is actually for Dreamweaver CS6.    What I'm trying to do is use spry tabbed panels as horizontal my menu system.    I want to have basically the functionality of the adobe.com menu system where the drop downs are tabbed and the content box size varies depending on the tab and the content box moves it's position relative to the tab that's selected.     I did manage to get the mouseover working so the tab's change according to which tab the mouse passes over.
    My current problems are these:
    I managed to change the content panel box size so it's not the same width as the full panel tab group however I cannot get it to move relative to which tab is selected, it just stays fixed in one location.
    The content tabs are pushing the body of my page down instead of showing up over top of it which is obvioulsy not very condusive for a menu system.
    I would like the default to show none of the panels until someone mouseover's one of the tab's and for the panels to dissapear when the mouse is not in the menu system.
    For something similar to the adobe.com menu system am i using the right feature (it looks like tabbed panels to me) or should I be using a different spry feature, I would like to have text and an image in the content box under each tab just for overall effect.
    I'm quite inexperienced with CSS and Javascripting and have basically gotten this far with trial and error modifying the CSS settings but I'm unable to modify the javascript on my own.
    Any help or suggestions would be greatly appreciated!!
    Below is my tabbed panels css:
    .TabbedPanels {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    clear: none;
    width: 1000px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    -webkit-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    -o-transition: all;
    transition: all;
    .TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
    color: #FFF;
    background-color: #000;
    width: 1000px;
    height: 25px;
    .TabbedPanelsTab {
    position: relative;
    top: 0px;
    float: left;
    padding: 4px 21px;
    margin: 0px 0px 0px 0px;
    background-color: #000;
    list-style: none;
    border-left: solid 0px #000;
    border-bottom: solid 0px #000;
    border-top: solid 2px #000;
    border-right: solid 0px #000;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    width: 1000;
    height: 15px;
    font-family: "Myriad Pro";
    font-size: 1em;
    font-weight: normal;
    .TabbedPanelsTabHover {
    background-color: #D31145;
    -webkit-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    -o-transition: all;
    transition: all;
    .TabbedPanelsTabSelected {
    background-color: #D31145;
    border-bottom: 0px solid #D31145;
    color: #FFFFFF;
    .TabbedPanelsTab a {
    color: black;
    text-decoration: none;
    .TabbedPanelsContentGroup {
    clear: both;
    border-left: solid 2px #D31145;
    border-bottom: solid 2px #D31145;
    border-top: solid 2px #D31145;
    border-right: solid 2px #D31145;
    background-color: #FFFFFF;
    visibility: visible;
    width: 50%;
    position: inherit;
    height: auto;
    /* This is the selector for the Content panel. The Content panel holds the
    * content for a single tabbed panel. For our default style, this container
    * provides some padding, so that the content is not pushed up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the Content container.
    .TabbedPanelsContent {
    overflow: hidden;
    padding: 4px;
    .TabbedPanelsContentVisible {
    .VTabbedPanels {
    overflow: hidden;
    zoom: 1;
    .VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #EEE;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    .VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
    .VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
    .VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
    overflow: visible !important;
    .TabbedPanelsContentGroup {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    .TabbedPanelsContent {
    overflow: visible !important;
    display: block !important;
    clear:both !important;
    .TabbedPanelsTab {
      overflow: visible !important;
      display: block !important;
      clear:both !important;
    THe Javascript for my tabbed panels are below:
    // SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
    // Copyright (c) 2006. Adobe Systems Incorporated.
    // All rights reserved.
    // Redistribution and use in source and binary forms, with or without
    // modification, are permitted provided that the following conditions are met:
    //   * Redistributions of source code must retain the above copyright notice,
    //     this list of conditions and the following disclaimer.
    //   * Redistributions in binary form must reproduce the above copyright notice,
    //     this list of conditions and the following disclaimer in the documentation
    //     and/or other materials provided with the distribution.
    //   * Neither the name of Adobe Systems Incorporated nor the names of its
    //     contributors may be used to endorse or promote products derived from this
    //     software without specific prior written permission.
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
    // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
    // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
    // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
    // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    // POSSIBILITY OF SUCH DAMAGE.
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.TabbedPanels = function(element, opts)
    this.element = this.getElement(element);
    this.defaultTab = 0; // Show the first panel by default.
    this.tabSelectedClass = "TabbedPanelsTabSelected";
    this.tabHoverClass = "TabbedPanelsTabHover";
    this.tabFocusedClass = "TabbedPanelsTabFocused";
    this.panelVisibleClass = "TabbedPanelsContentVisible";
    this.focusElement = null;
    this.hasFocus = false;
    this.currentTabIndex = 0;
    this.enableKeyboardNavigation = true;
    this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
    this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
    Spry.Widget.TabbedPanels.setOptions(this, opts);
    // If the defaultTab is expressed as a number/index, convert
    // it to an element.
    if (typeof (this.defaultTab) == "number")
      if (this.defaultTab < 0)
       this.defaultTab = 0;
      else
       var count = this.getTabbedPanelCount();
       if (this.defaultTab >= count)
        this.defaultTab = (count > 1) ? (count - 1) : 0;
      this.defaultTab = this.getTabs()[this.defaultTab];
    // The defaultTab property is supposed to be the tab element for the tab content
    // to show by default. The caller is allowed to pass in the element itself or the
    // element's id, so we need to convert the current value to an element if necessary.
    if (this.defaultTab)
      this.defaultTab = this.getElement(this.defaultTab);
    this.attachBehaviors();
    Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
      return document.getElementById(ele);
    return ele;
    Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
    var children = [];
    var child = element.firstChild;
    while (child)
      if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
       children.push(child);
      child = child.nextSibling;
    return children;
    Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
      return;
    ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
      return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    if (!optionsObj)
      return;
    for (var optionName in optionsObj)
      if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
       continue;
      obj[optionName] = optionsObj[optionName];
    Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
    if (this.element)
      var children = this.getElementChildren(this.element);
      if (children.length)
       return children[0];
    return null;
    Spry.Widget.TabbedPanels.prototype.getTabs = function()
    var tabs = [];
    var tg = this.getTabGroup();
    if (tg)
      tabs = this.getElementChildren(tg);
    return tabs;
    Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
    if (this.element)
      var children = this.getElementChildren(this.element);
      if (children.length > 1)
       return children[1];
    return null;
    Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
    var panels = [];
    var pg = this.getContentPanelGroup();
    if (pg)
      panels = this.getElementChildren(pg);
    return panels;
    Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
    ele = this.getElement(ele);
    if (ele && arr && arr.length)
      for (var i = 0; i < arr.length; i++)
       if (ele == arr[i])
        return i;
    return -1;
    Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
    var i = this.getIndex(ele, this.getTabs());
    if (i < 0)
      i = this.getIndex(ele, this.getContentPanels());
    return i;
    Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
    return this.currentTabIndex;
    Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
    return Math.min(this.getTabs().length, this.getContentPanels().length);
    Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
    try
      if (element.addEventListener)
       element.addEventListener(eventType, handler, capture);
      else if (element.attachEvent)
       element.attachEvent("on" + eventType, handler);
    catch (e) {}
    Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
    return false;
    Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
    this.showPanel(tab);
    return this.cancelEvent(e);
    Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
    this.addClassName(tab, this.tabHoverClass);
    return false;
    Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
    this.removeClassName(tab, this.tabHoverClass);
    return false;
    Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
    this.hasFocus = true;
    this.addClassName(tab, this.tabFocusedClass);
    return false;
    Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
    this.hasFocus = false;
    this.removeClassName(tab, this.tabFocusedClass);
    return false;
    Spry.Widget.TabbedPanels.KEY_UP = 38;
    Spry.Widget.TabbedPanels.KEY_DOWN = 40;
    Spry.Widget.TabbedPanels.KEY_LEFT = 37;
    Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
    Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
    var key = e.keyCode;
    if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
      return true;
    var tabs = this.getTabs();
    for (var i =0; i < tabs.length; i++)
      if (tabs[i] == tab)
       var el = false;
       if (key == this.previousPanelKeyCode && i > 0)
        el = tabs[i-1];
       else if (key == this.nextPanelKeyCode && i < tabs.length-1)
        el = tabs[i+1];
       if (el)
        this.showPanel(el);
        el.focus();
        break;
    return this.cancelEvent(e);
    Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
    var stopTraversal = false;
    if (root)
      stopTraversal = func(root);
      if (root.hasChildNodes())
       var child = root.firstChild;
       while (!stopTraversal && child)
        stopTraversal = this.preorderTraversal(child, func);
        try { child = child.nextSibling; } catch (e) { child = null; }
    return stopTraversal;
    Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
    var self = this;
    Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e, tab); }, false);
    Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
    if (this.enableKeyboardNavigation)
      // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
      // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
      // by default.
      // Find the first element within the tab container that has a tabindex or the first
      // anchor tag.
      var tabIndexEle = null;
      var tabAnchorEle = null;
      this.preorderTraversal(tab, function(node) {
       if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
        var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
        if (tabIndexAttr)
         tabIndexEle = node;
         return true;
        if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
         tabAnchorEle = node;
       return false;
      if (tabIndexEle)
       this.focusElement = tabIndexEle;
      else if (tabAnchorEle)
       this.focusElement = tabAnchorEle;
      if (this.focusElement)
       Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
       Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
       Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
    Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
    var tpIndex = -1;
    if (typeof elementOrIndex == "number")
      tpIndex = elementOrIndex;
    else // Must be the element for the tab or content panel.
      tpIndex = this.getTabIndex(elementOrIndex);
    if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
      return;
    var tabs = this.getTabs();
    var panels = this.getContentPanels();
    var numTabbedPanels = Math.max(tabs.length, panels.length);
    for (var i = 0; i < numTabbedPanels; i++)
      if (i != tpIndex)
       if (tabs[i])
        this.removeClassName(tabs[i], this.tabSelectedClass);
       if (panels[i])
        this.removeClassName(panels[i], this.panelVisibleClass);
        panels[i].style.display = "none";
    this.addClassName(tabs[tpIndex], this.tabSelectedClass);
    this.addClassName(panels[tpIndex], this.panelVisibleClass);
    panels[tpIndex].style.display = "block";
    this.currentTabIndex = tpIndex;
    Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
    var tabs = this.getTabs();
    var panels = this.getContentPanels();
    var panelCount = this.getTabbedPanelCount();
    for (var i = 0; i < panelCount; i++)
      this.addPanelEventListeners(tabs[i], panels[i]);
    this.showPanel(this.defaultTab);
    })(); // EndSpryComponent

    Note - I agree with Nancy
    As for your experiment, to prevent the "drop" reduce the spry CSS padding in line 76 selector from  21px to 18px.
    .TabbedPanelsTab {
        -moz-user-select: none;
        background-color: #000000;
        border-color: #000000;
        border-left: 0 solid #000000;
        border-style: solid;
        border-width: 2px 0 0;
        cursor: pointer;
        float: left;
        font-family: "Myriad Pro";
        font-size: 1em;
        font-weight: normal;
        height: 15px;
        list-style: none outside none;
        margin: 0;
        padding: 4px 18px;
        position: relative;
        top: 0;
    Don't use dummy text without normal length text with breaks

  • Spry Accordion Menu Tab Link css - totally confused

    Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day.  I've created a spry accordion menu with links in the actual panel tabs.  Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs.  You'll see from code that I've tried a few styles but can't get this to work.  I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
    Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
    <div id="sidebar1">
    <div id="Accordion1" class="Accordion">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Photo Gallery</div>
        <div class="AccordionPanelContent">
        <ul>
        <li><a href="PhotoGallery.html">Gallery 1</a></li>
        </ul>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Unit Newsletters</div>
        <div class="AccordionPanelContent">
        <ul>
        <li><a href="Newsletter.html">February 2010</a></li>
        </ul>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Forms</div>
        <div class="AccordionPanelContent">
        <ul>
        <li><a href="">Joining Instructions</a></li>
        <li><a href="">Enrolment</a></li>
        <li><a href="">Next of Kin</a></li>
        <li><a href="">Volunteer Blue Card</a></li>
        </ul>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
        <div class="AccordionPanelContent">
        <ul>
        <li><a href="WhatsOn.html">Whats On</a></li>
        <li><a href="PSG.html">Parent Support Group</a></li>
        </ul>
        </div>
        </div>
      </div>
    </div>
    .AccordionPanel {
    margin: 0px;
    padding: 0px;
    .AccordionPanelTab {
    background-color: #036;
    border-bottom: 1px #93b747 solid;
    margin: 0px;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    text-decoration: none;
    .AccordionPanelTabOpen {
    color: #036;
    background-color: #93b747;
    display: block;
    text-decoration: none;
    .AccordionPanelTabHover {
    color: #036;
    background-color: #93b747;
    text-decoration: none;
    border-bottom: 1px solid #036;
    display: block;
    .AccordionPanelTab a {
    color: #93b747;
    margin: 0px;
    font-size: 12px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    text-decoration: none;
    display: block;
    .AccordionPanelTab a.open {
    font-color: #036;
    color: #036;
    background-color: #93b747;
    text-decoration: none;
    display: block;
    .AccordionPanelTab a.active {
    color: #036;
    background-color: #93b747;
    display: block;
    text-decoration: none;
    .AccordionPanelTab a.hover {
    color: #036;
    background-color: #93b747;
    font-weight: bold;
    text-decoration: none;
    display: block;
    .AccordionPanelTab a.close {
    color: #93b747;
    background-color: #036;
    text-decoration: none;
    display: block;
    .AccordionPanelContent {
    margin: 0px;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 12px;
    background: #fff;
    font-size: 12px;
    color: #036;
    font-weight: 500;
    .AccordionPanelContent ul li {
    margin-left: -40px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: #fff;
    font-size: 12px;
    color: #036;
    font-weight: 500;
    text-decoration: none;
    list-style-type:none;
    list-style:none;
    .AccordionPanelContent ul li a:link {
    color: #036;
    text-decoration: none;
    list-style-type:none;
    list-style:none;
    .AccordionPanelContent ul li a:hover {
    color: #036;
    font-weight: bold;
    text-decoration: none;
    .AccordionPanelContent ul li a:visited {
    color: #036;
    text-decoration: none;
    .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    background: #93b747;
    border-bottom: 1px solid #036;
    .AccordionPanelOpen .AccordionPanelTab.a {
    color: #036;
    background: #93b747;
    border-bottom: 1px solid #036;
    .AccordionPanelOpen .AccordionPanelTabHover {
    color: #036;
    font-weight: bold;
    .AccordionPanelOpen.a .AccordionPanelTabHover.a {
    color: #036;
    font-weight: 600;
    .AccordionFocused .AccordionPanelTab {
    color: #036;
    font-weight: 600;
    a.AccordionFocused .AccordionPanelTab {
    color: #036;
    font-weight: 600;
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    font-weight: 600;
    a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    font-weight: 600;

    Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong.  I've uploaded site so you can see what's happening (www.11acu.org).  All tab states should be as per Photo Gallery, Newsletters and Forms.  Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work.  Now I've probably got you confused as well! lol Apologies!  Recreated css for tab links below.  Html same as in original post.  Any help much appreciated.
    .AccordionPanelTab {
    color: #93b747;
    background-color: #036;
    border-bottom: solid 1px #93b747;
    margin: 0px;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    .AccordionPanelTab a {
    color: #93b747;
    background-color: #036;
    margin: 0px;
    padding-left: -10px;
    padding-top: -2px;
    padding-bottom: -2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    display: block;
    .AccordionPanelTab a:link {
    color: #93b747;
    background-color: #036;
    margin: 0px;
    padding-left: -10px;
    padding-top: -2px;
    padding-bottom: -2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    display: block;
    .AccordionPanelTab a:hover {
    color: #036;
    background-color: #93b747;
    margin: 0px;
    padding-left: -10px;
    padding-top: -2px;
    padding-bottom: -2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    display: block;
    .AccordionPanelTab a:active {
    color: #036;
    background-color: #93b747;
    margin: 0px;
    padding-left: -10px;
    padding-top: -2px;
    padding-bottom: -2px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    display: block;
    .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    background-color: #93b747;
    border-bottom: solid 1px #036;
    text-decoration: none;
    .AccordionPanelTabHover {
    color: #036;
    background-color: #93b747;
    text-decoration: none;
    border-bottom: solid 1px #036;
    .AccordionPanelOpen .AccordionPanelTabHover {
    color: #036;
    background-color: #93b747;
    text-decoration: none;
    font-weight: bold;
    .AccordionFocused .AccordionPanelTab {
    color: #93b747;
    background-color: #036;
    text-decoration: none;
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    color: #036;
    background-color: #93b747;
    border-bottom: solid 1px #036;
    text-decoration: none;

  • Spry Tabbed Panels overwritting Flash drop down menu in IE

    I am having an issue with Spry Tabbed Panels appearing above
    a Flash drop down menu in IE6 & IE7 but it works fine in
    Firefox. Would someone be able to educate me on what I can do to
    fix this problem. The page that is exhibiting this problem is
    http://us.shuttle.com/performance.aspx
    I’ve tried adding “WMODE” to my flash menu,
    also updated “SpryTabbedPanels.js to version 0.5 –
    pre-release 1.6”, but neither way is
    helping…….

    Thank you very much for the suggestion. Yes, this is how I
    tried:
    .TabbedPanels {
    margin: 0px;
    padding: 0px;
    float: left;
    clear: none;
    width: 100%;
    z-index: 1000;
    I’ve been tried setting Z-index to from 50 to 2000 in
    attached css, but still not working.

  • Spry Tabbed Panels overwritting Flash drop down menu in IE but display fine in Firefox

    I am having an issue with Spry Tabbed Panels appearing above
    a Flash drop down menu in IE6 & IE7 but it works fine in
    Firefox. Would someone be able to educate me on what I can do to
    fix this problem. The page that is exhibiting this problem is
    http://us.shuttle.com/performance.aspx
    I’ve add “WMODE” to my flash menu,
    also updated “SpryTabbedPanels.js to version 0.5 –
    pre-release 1.6”, but neither way is
    helping…….

    Thank you very much for the suggestion. Yes, this is how I
    tried:
    .TabbedPanels {
    margin: 0px;
    padding: 0px;
    float: left;
    clear: none;
    width: 100%;
    z-index: 1000;
    I’ve been tried setting Z-index to from 50 to 2000 in
    attached css, but still not working.

  • Help Using Spry tabbed panel as a menu.

    Thanks in advance to all who take the time to read and any assistance you can offer.
    I'm picking up where someone else started a website. They used Spry tabbed panels as a menu system (CS4). Each Panel is a top-level "menu" and when it opens, sub-menus (hyperlinks) come up vertically under the panel.  I REALLY don't want to start over if I don't have to - need the site up and running - but cannot figure out how to make the "HOME" tabbed panel (the first one) actually take users back to the home page.  For now, I've created a "submenu" (link) under HOME tabbed panel to help the user navigate back to the home page.
    HELP? 
    http://www.orange.k12.nc.us/ec/beta/default.html

    Thank you Gramps - for your prompt and helpful response!  Your solution absolutely fixed the problem I asked about.
    If I had followed forum advisories and asked the question correctly, the navigation on this website would probably be working perfectly by now. Your solution fixes the home page.  Can you look at one more page and advise please??
    On the "subpages" of this site, the same tabbed panel "fake menu" exists.  I replaced the equivalent line of code in the template for those pages (at line 45) with what you gave me.  I'm obviously missing something in the code to send the user back to the HOME page from these pages.
    In the sample link below, you will be starting from a "subpage" of the site.  Clicking on the "HOME" tab leads you not to the actual home page (default.html in the root directory) but to a default.html page within the subdirectory for the page you are on (which doesn't exist.)  Can I add something to that line of code to get them back to the home page?
    Again... thank you!!
    http://www.orange.k12.nc.us/ec/beta/Students/Student_Resources.html

Maybe you are looking for

  • Can't connect my secondary computers

    I have my intel imac plugged into the new airport extreme. I have a closed system using WPA2 personnal. I can't connect using my emac or ibook. If I try to log on to "other" the "OK" button is grey. imac dual core intel   Mac OS X (10.4.9) emac and i

  • How do I get my pictures from archived project back into iphoto?

    I trashed a few events from my current iphoto library to create some hard drive disk space.  I thought they were backed up on another drive (that is all except one event with pics and movies in it).  I have an archived dvd project with the pictures i

  • Payment processing from PaySafe

    Hi, i've purchase about 2-3 days ago 10 euro from paysafe. The first time worked, But this time.... In my skype contact i have 5 same warnings that they say : We're processing your order. The money they have been transferred form paysafe to skype tha

  • Duplicate entries in table & email count

    hi,, In my selection screen i have 3 fields- billing doc--vbeln customer no--kunnr email id - when i give inputs in this selection screen fields and execute it mail is sent and the inputs given for the fields are stored in a ZTABLE. my requirement is

  • Can Bridge trim video clips?

    I know Bridge can be used to view and rate video clips, but can it also be used to trim video clips down and then export the shortened clips?