Nested tabbed panels

Hi all:
I have tabbed panels nested in tabbed panels and i would like
to link from another page to one of the nested tabs. The code I
have the link is: ?tab=8#TabEditAthlete1?tab=3#TabCommunity1 but
that doesn't work.
i also tried ?tab=8#TabEditAthlete1&tab=3#TabCommunity1
and that doesn't work either.
Any suggestions?
thanks!

url params: ?tab1=1&tab2=3
get the params:
var params = Spry.Utils.getLocationParamsAsObject();
normal = tab1
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:(params.tab1
? params.tab1 : 0)});
nested = tab2
var TabbedPanels2 = new
Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:(params.tab2
? params.tab2: 0)});
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html?panel=2#examples

Similar Messages

How can I nest Tabbed Panels 2

I am trying to learn HTML and need help using Tabbed Panels 2.
I have three defualt tabs which are very simple to do but how can i nest four tabs with content inside one of the defualt tabs?
Link to Documentation.

Haven’t begun to try it yet. Looking at some tutorials.
But I appreciate the heads up.
Bill Liedlich
TerraGroup Corporation
Tactical Water Purification Systems
Po Box 8839
Allentown, PA 18105 USA
p 610-821-7003
f 610-821-7025
[email protected]
[email protected]<mailto:[email protected]>
www.tacticalwater.com<http://www.tacticalwater.com/>
CONFIDENTIALITY NOTICE: This electronic mail transmission, its contents and any attachments to it, are privileged and confidential, and/or may contain legally privileged and confidential information and is intended only for the review of the party or parties to whom it is addressed. Any dissemination, distribution, copying or forwarding of this message, its contents or attachments to other than the intended recipient(s) is strictly prohibited. If you are not one of the intended recipients, or have received this transmission and its contents in error, please immediately return it to the sender. Unintended transmission shall not constitute a waiver of any "Confidentiality Notice" privilege.

Nesting tabbed panels produces interesting results..

Hi,
Today i attempted to nest two sets of tabbed panels. 1 was a vertical panel, and within this 1 horizontal panel.
it all works, BUT the internal horizontal panel inherits the styles of the parent vertical panel. In otherwords the horizontal panel is weirdly skewed!
can anyone assist to get the styles right?
cheers

Hi,
What you need to do is apply a class to at least one of your panels. Then apply the style rules that are applicable to that class.
I you can supply code on line, that would be helpfull to explain the solution more precisely.
Hope this helps,
Ben

Linking to a Tab in another page which has 3 tabbed panels

Hi
I have created a page which has three tabbed panels. The first is a horizontal Tabbed panel with two tabs. Each of these tabs has a vertical tabbed panel with 4 tabs in each.
I want to be able to link from another page to the 2nd horizontal tab and the first vertical tab on that page.
If I use the URL ?tab=1, the link takes me to the second horizontal tab but also then to the second vertical tab.
I have tried the following
giving the target tabs the same id and targeting ?tab=news
setting the url to ?tab=1&tab=0
setting the url to ?tab=TabbedPanel1.tab1&TabbedPanel2.tab2
but none of these work.
Javascript is not my thing (as you have probably guessed!). Is there a way that I can target any combination of tabs on one page through the URL?
Any ideas, much appreciated.
Thanks

Data:
Tab on main tabbed panels = primetab
Tab on nested tabbed panels = secondtab
URL Link = myPage.html?primetab=2&secondtab=2
Markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
        <div id="TabbedPanels2" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">Tab 1.1</li>
            <li class="TabbedPanelsTab" tabindex="0">Tab 1.2</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">Content 1.1</div>
            <div class="TabbedPanelsContent">Content 1.2</div>
          </div>
        </div>
    </div>
    <div class="TabbedPanelsContent">
        <div id="TabbedPanels3" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">Tab 2.1</li>
            <li class="TabbedPanelsTab" tabindex="0">Tab 2.2</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">Content 2.1</div>
            <div class="TabbedPanelsContent">Content 2.2</div>
          </div>
        </div>
    </div>
</div>
</div>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="SpryAssets/SpryURLUtils.js"></script>
<script>
var params = Spry.Utils.getLocationParamsAsObject();
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.primetab ? params.primetab : 0});
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2", {defaultTab: params.secondtab ? params.secondtab : 0});
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3", {defaultTab: params.secondtab ? params.secondtab : 0});
</script>
</body>
</html>
The highlighted parts denote the markup required over and above the original markup for tabbed panels, placing JS at the bottom of the document is a peculiarity of mine an is therefore not a necessity.
Gramps

Two or more spry sliding panels nested in tabbed panels?

Hi
I have a tabbed panel widget on one page. Inside the first
tab I inserted a sliding panel widget. Now this works fine.
I put another sliding panel widget into the second panel.
I changed the div id ( <div id="panelwidget2"
class="SlidingPanels"> ) and placed a second variable at the end
of the code ( var sp2 = new
Spry.Widget.SlidingPanels("panelwidget2"); ) But the second sliding
panel doesn't work and Dreamweaver highlights <div
id="panelwidget2" class="SlidingPanels"> as invalid code.
What do I do wrong?
Here's the code of the page:
<script src="SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="SpryAssets/SprySlidingPanels.js"
type="text/javascript"></script>
<link href="SpryAssets/SprySlidingPanels.css"
rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<h1> Main Content </h1>
<table border="0">
<tr>
<td><div id="TabbedPanels1"
class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab
1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab
2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><div
align="center"><span class="style3"><a href="#"
onclick="sp1.showFirstPanel();">Bild l</a> | <a
href="#" onclick="sp1.showPanel('p2');">Bild 2</a> | <a
href="#" onclick="sp1.showPanel('p3');">Bild 3</a> | <a
href="#" onclick="sp1.showPanel('p4');">Bild 4</a>
</span> </div>
<div id="panelwidget" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="p1">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent aliquam, Phasellus
trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/bensonopti.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p2">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez1.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p3">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
quis ligula. Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez2.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p4">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
quis ligula. Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez3.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="TabbedPanelsContent">
<div align="center"><span class="style3"><a
href="#" onclick="sp1.showFirstPanel();">Bild l</a> |
<a href="#" onclick="sp1.showPanel('p2');">Bild 2</a> |
<a href="#" onclick="sp1.showPanel('p3');">Bild 3</a> |
<a href="#" onclick="sp1.showPanel('p4');">Bild 4</a>
</span> </div>
<div id="panelwidget2" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="p1">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/bensonopti.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p2">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez1.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p3">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez2.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
<div class="SlidingPanelsContent" id="p4">
<table border="0">
<tr>
<td class="style4">Lorem ipsum dolor sit amet,
Phasellus trique</td>
</tr>
<tr>
<td class="style3"><div align="center"><img
src="Schnäppchen/Ibanez3.jpg" width="500" height="320"
/></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Add a valid Document Type Declaration on your page. (DTD) and it should work smoothly.. You could have found this out if you would just validate your page. validator.w3.org.

How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?

I have 5 of them all containing nested Apdiv within nested ApDivs (a long storie ) that I would like to insert into 5 tabs in the Spry Tabbed Panel.
Please help.

"Hi Gramp,I realize I have made hard work for myself but I really don't know any better. I also realize now that taking on this project may have been a mistake :-)I taught myself how to use the design side of Dream Weaver. These five ApDivs were created in the content area of the spry tool and it worked fine. (yes a lot of work though)For the first time I looked at the code side. I wanted to try to bring a peace of code from another page for something unrelated and when it didn't work I took it out and without noticing, deleting a line from the Spry tool.Of course like a classic newbe I was working without a backup copy so here I am. Loosing hours of tedious work and on the verve of tears :-)I do have some questions though. My APDiv
What does "apDiv1" stands for and what does "My APDiv" stands for?Is the only thing I have to do is changing this line for my five ApDivs and paste it in the appropriate places in the code? Thanks again,Gilaad
Date: Sat, 16 Jun 2012 20:39:07 -0600
From: [email protected]
To: [email protected]
Subject: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?
    Re: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?
    created by Altruistic Gramps in Spry Framework for Ajax - View the full discussion
You have really made hard work for yourself by using APDiv's. I suppose it can be done, but I would not. To answer your question, I have create an example as per#apDiv1
My APDiv
Content 2
Tab 1
Gramps
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4498679#4498679
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4498679#4498679. In the Actions box on the right, click the Stop Email Notifications link.
     Start a new discussion in Spry Framework for Ajax by email or at Adobe Forums
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

Spry Tabbed Panels: Tabs

I'm experimenting with Spry Tabbed Panels. The problem I
couldn't work out is that how to get panel tabs stay on their
place. They seems to be jumping out (far right) when I click on
enter key while my cursor in the tab content area. This happens on
DW CS3 but displays correctly on browsers preview (site is local)?
I am inserting Spry Tabbed Panel in a simple styled div.
There are many styled divs/nested divs on the page.
I can insert non Spry items in a same div and style them
without problem but something seems to be different about Spry
Tabbed Panel?

I'm experimenting with Spry Tabbed Panels. The problem I
couldn't work out is that how to get panel tabs stay on their
place. They seems to be jumping out (far right) when I click on
enter key while my cursor in the tab content area. This happens on
DW CS3 but displays correctly on browsers preview (site is local)?
I am inserting Spry Tabbed Panel in a simple styled div.
There are many styled divs/nested divs on the page.
I can insert non Spry items in a same div and style them
without problem but something seems to be different about Spry
Tabbed Panel?

Tabbed panels, Collapsible Panel, and Server Side Include

Hi,
I'm having a problem with the way a Server Side Include inside a Collapsible Panel displays.
Here is how this particular page is set up.
The page has spry tabbed panels.
>>A panel has one overall Collapsible panel (the main product tab)
>>>>Nested in that Collapsible panel are four other collapsible panels (Overview, Features, Screenshots, What's New).
>>>>>>In each of these four collapsible panels is a server side Include that features that category's content
E verything works fine as far as opening and closing is concerned. However, the problem is with the display. The content panel doesn't resize with the Include content, and therefore, the Include content extends outside the border of the content panel.
I'm thinking this is because it is Include content rather than normal content. Is that right?
Do I fix this by changing the overflow value of one the Tabbed Panel CSS styles? If so, which one should I change, and to what value?
Or if that's not how to fix it, can anyone tell me how?
Thanks a lot,
Mike

Hi, I'm using the latest version of Spry. I modified some CSS rules of the tabbed panels, but not the javascript file. I didn't do anything to the Collapsible Panel rules.
Since first posting this thread, I changed the overflow of the Tabbed Panels Content Group CSS rule to "scroll". That did produce a scroll, but I'd much rather have the panel expand. So, I changed it back the way it was.
Here's the page I'm working on. Click the Court Solutions tab to get to the problem panel.
http://www.ptssolutions.com/Test/public_safety_products_3.shtml
It has different results in IE and FireFox, but doesn't work correctly in either.
Thanks a lot for all your help,
Mike

Nested Collapsible Panels

Hi I have found a bug in using the collpasible panels, in a
nested manner. No problem in IE 6, after I altered the class for
the main CollapsiblePanel container, to have overflow:hidden( which
prevents (in IE6 & IE7) the nested sub-panels, showing
underneath/through a main panel, when collapsing (even after giving
the main panel a background color).
When interacting with sub-panels, after the initial loading
of the page, the height of the master panels grow appropriately,
based on sub-panel opening and closing, until, the sub-panel is
collapsed and subsequently the main panel is also collapsed.
IN IE 7, a main panel, housing a sub-panel, will not grow to
the appropriate height , after a sub-panel has been collapsed and
then the main-panel is collapsed. After re-opening the main panel
and then clicking the sub-panel's tab, the subpanel's content gets
cuts-off, until the main panel is closed and re-opened, at which
point everything grows correctly.
How do I get the interim height of the subpanel, to size the
main panel correctly, without closing the main panel while the
sub-panel is opened, and then reopening the main panel?

For the first problem you'll have to use overflow: auto which
will not cut the content that will not fit into the element but
instead will show scrollbars. The default behavior in CSS say that
an element shouldn't grow if has a fixed height if the content will
be larger. Instead there are 3 options: the content is displayed on
top over the element but the element shouldn't resize because will
affect all the other elements in the flow (default browser
behaviour, overflow: visible) or it should cut the content and
display the part that enter in the viewport (overflow: hidden) or
should show scrollbars to be able to scroll the viewport and see
the full content (overflow: scroll).
The only method to allow the element to enlarge to the same
size as the content within is to not specify a height. In this
situation the element will expand itself to its content height. In
this situation you'll have to put the useFixedPanelHeights option
of the Accordion widget to false (default is true) which will mean
the Accordion is not controling the height anymore and will leave
each panel with the height you set.
Now, the second problem appears because when you open a panel
we are animating the transition from the element current height to
0px and the other way around by setting a gradual fixed height.
Because of this the last height value used to animate will remain
set to the element. When you change the content into a Panel, the
Panel is no longer able to resize automatically for the reasons I
explained above. Unfortunately there is no solution to this issue
other then to disable the animation by passing "enableAnimation"
option to false into the constructor.
Regards,
Cristian

Major bug in Tabbed Panels

I am quite surprised this made it through QA .. Try creating
a tabbed panel in a tabbed panel. Then in the embedded panel,
create an onclick link to a parent's tab. It is 100%
ignored.

http://www.3rd-eden.com/Spry-it.com/examples/nested%20tabs/
Reproduced your test case as described above, no problems
occurs. I placed a onclick on tab 1, and on tab 1 of the nested
tab.
Are u using the latest version? correct constructors?

Horizontal Tabbed Panel Inside Vertical Tabbed Panel

Hello!
I am new to web coding and in dreamweaver I would like to place a horizontal spry tabbed panel as the content of a vertical spry tabbed panel. I guess you could call it a nesting a tabbed panel. However, when I place the horizontal panel in the content area, it takes the form of a vertical panel. Any thoughts?
Here is a live page of the issue: http://andrewpapp.com/baseballprofile.html
and here is the code:
http://www.andrewpapp.com/html.txt

Hi Newbie,
I say this through gritted teeth because I think you have done far better than just a newbie, even to the extent that you have given correct advice to Jennigje Galama.
To get to your problem, have a look at the following example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<style>
.HTabbedPanels .TabbedPanels {
     margin: 0px;
     padding: 0px;
     float: left;
     clear: none;
     width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.HTabbedPanels .TabbedPanelsTabGroup {
     margin: 0px;
     padding: 0px;
.HTabbedPanels .TabbedPanelsTab {
     position: relative;
     top: 1px;
     float: left;
     padding: 4px 10px;
     margin: 0px 1px 0px 0px;
     font: bold 0.7em sans-serif;
     background-color: #DDD;
     list-style: none;
     border-left: solid 1px #CCC;
     border-bottom: solid 1px #999;
     border-top: solid 1px #999;
     border-right: solid 1px #999;
     -moz-user-select: none;
     -khtml-user-select: none;
     cursor: pointer;
.HTabbedPanels .TabbedPanelsTabHover {
     background-color: #CCC;
.HTabbedPanels .TabbedPanelsTabSelected {
     background-color: #EEE;
     border-bottom: 1px solid #EEE;
.HTabbedPanels .TabbedPanelsTab a {
     color: black;
     text-decoration: none;
.HTabbedPanels .TabbedPanelsContentGroup {
     clear: both;
     border-left: solid 1px #CCC;
     border-bottom: solid 1px #CCC;
     border-top: solid 1px #999;
     border-right: solid 1px #999;
     background-color: #EEE;
.HTabbedPanels .TabbedPanelsContent {
     padding: 4px;
.HTabbedPanels .TabbedPanelsContentVisible {
</style>
</head>
<body>
<div id="TabbedPanels1" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
         <div id="TabbedPanels2" class="HTabbedPanels">
           <ul class="TabbedPanelsTabGroup">
             <li class="TabbedPanelsTab" tabindex="0">Tab 1.1</li>
             <li class="TabbedPanelsTab" tabindex="0">Tab 1.2</li>
         </ul>
           <div class="TabbedPanelsContentGroup">
             <div class="TabbedPanelsContent">Content 1.1</div>
             <div class="TabbedPanelsContent">Content 1.2</div>
         </div>
       </div>
    </div>
    <div class="TabbedPanelsContent">
         <div id="TabbedPanels3" class="HTabbedPanels">
           <ul class="TabbedPanelsTabGroup">
             <li class="TabbedPanelsTab" tabindex="0">Tab 2.1</li>
             <li class="TabbedPanelsTab" tabindex="0">Tab 2.2</li>
         </ul>
           <div class="TabbedPanelsContentGroup">
             <div class="TabbedPanelsContent">Content 2.1</div>
             <div class="TabbedPanelsContent">Content 2.2</div>
         </div>
       </div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
</script>
</body>
</html>
What the vertical tabs does, is override the style rules of the normal (horizontal) tabs. Thats OK, but if we then want horizontal tags, we must resurrect the orginal style rules. We must also make sure that we choose the selectors carefully unless we want to rewrite the JavaScript file.
I think the above approach is probably the best,
Keep up the good work.
Gramps

Problems trying to build dynamic menubar or tabbed panel

I am trying to create a tab panel or dynamic menu from a
dynamic xml dataset. I have looked through the examples and the
demo's but can't quite come up with the code. Can someone give me
an example, point me to a specific example, or give me some code
that helps?
Here is a sample of the xml:
<Refinements>
<Refinement name="Brand" totalvalues="10">
<RefineValue>
<Title>Hasbro</Title>
<Value>4168-Brand=Hasbro</Value>
<NumberOfProducts>1629</NumberOfProducts>
</RefineValue>
<RefineValue>
<Title>Kenner</Title>
<Value>4168-Brand=Kenner</Value>
<NumberOfProducts>149</NumberOfProducts>
</RefineValue>
</Refinement>
<Refinement name="Store" totalvalues="10">
<RefineValue>
<Title>Overstock.com</Title>
<Value>4491-Store=1000264</Value>
<NumberOfProducts>2</NumberOfProducts>
</RefineValue>
<RefineValue>
<Title>Sears</Title>
<Value>4491-Store=1003613</Value>
<NumberOfProducts>34</NumberOfProducts>
</RefineValue>
</Refinement>
I want to have a title for "Refinement name" and then repeat
the "RefineValue" until I have another "Refinement name". I'm
stuck, please help. Thank you in advance!

Now that we have Spry 1.5 I am back to trying to output this
to a menubar. My problem has been stopping the RefineValue repeats
when the Refinement name changes. I have searched the samples and
forums and believe a test would be in order but I can't get the
correct code. I am not sure how to test for the name of the
refinement (see previous xml in topic). Here is an example:

<div id="Refine" spry:region="dsRefine"
class="SpryHiddenRegion">
<ul id="Refinelist" spry:repeat="dsRefine"
class="MenuBarHorizontal">
<li>{dsRefine::@name}</li>
<ul spry:repeatchildren="dsRefine">
<li spry:test="'{dsRefine::@name}' ==
'{dsRefine::@name}'"><a href="#"
onclick="loadRefineData('{dsRefine::RefineValue/Value}');">{dsRefine::RefineValue/Title}< /a> ({dsRefine::RefineValue/NumberOfProducts})</li>
</ul>
</ul>
</div>
This is my 1.5 datafeed call
var dsRefine = new
Spry.Data.XMLDataSet(null,"ProductSearch/Refinements/Refinement",
{subPaths: "RefineValue"});
I found an thread that showed how to set up two datasets and
accomplish something like this in 1.4, but I felt there must be a
better way to handle this with a nested dataset in 1.5. Can someone
help me with the test code or if it should be done differently
please point the way.
Thanks.

JQuery vertical nested tabs/nav?

Anyone know of an online resource with a sample of a vertical jQuery menu with nested <ul><li> tags:
<ul>
<li>TOP LEVEL
<ul>
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
</ul>
Trying to make it work like a conventional tabbed panel but vertical (where a <div> panel opens to the side when a link is clicked) and with nested sub links (possible?)
TOP LEVEL
>>Sub Link 1
>>Sub Link 2
I can do the one level but need something more versatile like:
<ul>
<li><a href="http://www.bbc.co.uk">BCC</a>
<ul>
<li><a href="#tabs-1">Link 1</li>
<li><a href="#tabs-2">Link 2</li>
</ul>
</li>
</ul>
When I add the additional <ul></ul> needed and the www link it stops working.
Cheers
Os.

Hello Kin,
You solved my problem :)
I suppose I can directly force the "float left" within the
SpryTabbedPanels.css.
I can play with the css content now to customize my content.
Here are the screenshot links, that I can keep online for a
while.
Before
After
Thank you very much
Alain

On a tabbed panel, I am trying to create a form, but...

On a tabbed panel I am trying to create a form, but I am having a couple of issues.
The coding on my form is yellow - I can't figure out what is wrong. Also, I can't see the tab on the browser, only in live view. I haven't loaded it to my site as I haven't finished it yet. I don't want to go any further, until I solve the issues I have now. Any ideas?
thanks,
deb
        <form id="registrationForm" name="registrationform" method="post" action="">
          <fieldset>
            <legend>Contact Information</legend>
            <span id="sprytextfield1">
              <label>Name <span class="inforequired">*</span><br />
                <input type="text" name="name" id="name" />
                <br />
              </label>
              <span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield2">
              <label for="businessname">(Business or Organization) Name<br />
              </label>
              <input type="text" name="businessname" id="businessname" />
              <br />
              <span class="textfieldRequiredMsg">value is required.</span></span> <span id="sprytextfield3">
              <label for="address">Address <span class="inforequired">*</span><br />
              </label>
              <input type="text" name="address" id="address" />
              <br />
              <span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield4">
              <label for="email">City</label>
              <span class="inforequired">*</span><br />
              <input type="text" name="city id="city="city"" />
              <br />
              <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield5">
              <label for="province">Province</label>
              <span class="inforequired">*</span><br />
              <input type="text" name="province" id="province" />
              <br />
              <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield6">
              <label for="postalcode">Postal Code</label>
              <span class="inforequired">*</span><br />
              <input type="text" name="postalcode" id="postalcode" />
              <br />
              <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield7">
              <label for="phone">Phone Number (including area code) <span class="inforequired">*</span><br />
              </label>
              <input type="text" name="phone" id="phone" />
              <br />
              <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield8">
              <label for="fax">Fax Number</label>
(including area code) <br />
<input type="text" name="fax" id="fax" />
<br />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield9">
<label for="email">Email Address <span class="inforequired">*</span><br />
</label>
<input type="text" name="email" id="email" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="spryconfirm1">
<label for="emailconfirm"><br />
Re-enter Email Address <span class="inforequired">*</span><br />
</label>
<input type="text" name="emailconfirm" id="emailconfirm" />
<span class="confirmRequiredMsg">A value is required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
<p> My Interest in the Ability Axis Employment Expo is as a </p>
<p><span id="spryradio1">
<label>
    <input type="radio" name="RadioGroup1" value="business" id="RadioGroup1_0" />
    Business/Employer</label>
<br />
<label>
    <input type="radio" name="RadioGroup1" value="nonprofit" id="RadioGroup1_1" />
    Non-Profit/Service Organizatin</label>
<br />
<label>
    <input type="radio" name="RadioGroup1" value="jobseeker" id="RadioGroup1_2" />
    Job Seeker</label>
<br />
<label>
    <input type="radio" name="RadioGroup1" value="other)" id="RadioGroup1_3" />
    Other (please specify below)</label>
<br />
</span><br />
<span id="sprytextarea1">
<label for="contactcomments"> Comments or other information</label>
<br />
<textarea name="contactcomments" id="contactcomments" cols="45" rows="5"></textarea>
</span> </p>
</fieldset>
          <p></p>
          <fieldset>
            <legend>Booth Options</legend>
            <span id="spryselect1">
              <label for="premierearlybird">Premiere (10 X 10) until April 21 $375</label>
              <span class="earlybirdpricing">Early Bird Pricing</span><br />
              <select name="premierearlybird" id="premierearlybird">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">lease select an item.</span></span> <span id="spryselect2">
              <label for="premierereg">Premiere (10 x 10) after April 21 $425</label>
              <br />
              <select name="premierereg" id="premierereg">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect3">
              <label for="premierenpearlybird">Premiere Non-Profit (10 X 10) until April 21 $325 <span class="earlybirdpricing">Early Bird Pricing</span><br />
              </label>
              <select name="premierenpearlybird" id="premierenpearlybird">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect4">
              <label for="premierenp">Premiere Non-Profit (10 X 10) after April 21 $375</label>
              <br />
              <select name="premierenp" id="premierenp">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect5">
              <label for="standardregearlybird">Standard (8 X 10) until April 21 $250 <span class="earlybirdpricing">Early Bird Pricing</span><br />
              </label>
              <select name="standardregearlybird" id="standardregearlybird">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect6">
              <label for="standardreg">Standard (8 X 10) after April 21 $300</label>
              <br />
              <select name="standardreg" id="standardreg">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect7">
              <label for="standardnpearlybird">Standard Non-Profit (8 X 10) until April 21 $200</label>
              <span class="earlybirdpricing">Early Bird Pricing</span><br />
              <select name="standardnpearlybird" id="standardnpearlybird">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect8">
              <label for="standardnp">Standard Non-Profit (8 X 10) after April 21 $250<br />
              </label>
              <select name="standardnp" id="standardnp">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <span class="selectRequiredMsg">Please select an item.</span></span>
</fieldset>
          <br />
          <fieldset>
            <legend>Breakfast Tickets</legend>
            <span id="spryselect10">
              <label for="breakfast1-5">Breakfast Tickets $40 each (up to 5 tickets)</label>
              <br />
              <select name="breakfast1-5" id="breakfast1-5">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect11">
              <label for="breakfast+5">Breakfast Tickets $35.00 each (more than 5 tickets)</label>
              <br />
              <select name="breakfast+5" id="breakfast+5">
                <option value="0" selected="selected">Please Choose</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="10+">more than 10 (please comment below)</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect12">
              <label for="breakfasttable">Breakfast Tickets $400 each (table of 8 plus two event hosts)<br />
              </label>
              <select name="breakfasttable" id="breakfasttable">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="sprytextarea2">
              <label for="breakfastticketscomment">Additional Information about Breakfast Tickets</label>
              <span class="textareaRequiredMsg">A value is required.</span></span>
</fieldset>
          <br />
          <fieldset>
            <legend>Seminar Tickets</legend>
            <p>Shayn Anderson, author of Taking Pride in That Which Sets US Apart, will host a one hour seminar at 11:00 am. </p>
            <p>
              <label for="shayn11amreg">Shayn Anderson Seminar tickets $40 each</label>
              <br />
              <select name="shayn11amreg" id="shayn11amreg">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="10+">more than 10</option>
              </select>
              <span class="selectRequiredMsg">Please select an item.</span></p>
            <p>
              <label for="shayn11amnp">Shayn Anderson Seminar tickets (Non-Profit) $30 each</label>
              <br />
              <select name="shayn11amnp" id="shayn11amnp">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="10+">more than 10</option>
              </select>
              <span class="selectRequiredMsg">Please select an item.</span></p>
            <p>Denise Bissonnette will do a seminar presentation at 1:00 pm on the topic Being True to the Dream of Diversity. Denise's presentation will run approximately 1.5 hours. </p>
            <p>
              <label for="denise1pmreg">Denise Bissonnette Seminar tickets $50</label>
              each <br />
              <select name="denise1pmreg" id="denise1pmreg">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="10+">more than 10</option>
              </select>
              <span class="selectRequiredMsg">Please select an item.</span></p>
            <p>
              <label for="denise1pmnp">Denise Bissonnette Seminar tickets (Non-Profit) $40 each<br />
              </label>
              <select name="denise1pmnp" id="denise1pmnp">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="10+">more than 10</option>
              </select>
              <span class="selectRequiredMsg">Please select an item.</span></p>
            <p><span id="sprytextarea3">
              <label for="seminarcomments">Other Information About Seminar Tickets</label>
              <textarea name="seminarcomments" id="seminarcomments" cols="45" rows="5"></textarea>
            </span></p>
</fieldset>
          <br />
          <fieldset>
            <legend>Processing Information</legend>
            <span id="spryradio2">
              <label>
                <input type="radio" name="RadioGroup2" value="invoice" id="RadioGroup2_0" />
                Please invoice me</label>
              <br />
              <label>
                <input type="radio" name="RadioGroup2" value="printmail" id="RadioGroup2_1" />
                I will print and mail my form with my payment</label>
              <br />
              <label>
                <input type="radio" name="RadioGroup2" value="emailcreditcard" id="RadioGroup2_2" />
                I will submit my information and provide my credit card information</label>
              in the box below <br />
<label>
    <input type="radio" name="RadioGroup2" value="other" id="RadioGroup2_3" />
    Other - I will provide full details below<br />
</label>
            </span><span id="sprytextarea4"><span id="sprytextarea5">
            <label for="processingcomments"><br />
              Further Information for Processing Registration</label>
            <textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
            <span class="textareaRequiredMsg">A value is required.</span></span></span> <span id="sprytextarea6"> <span class="textareaRequiredMsg">A value is required.</span></span>
</fieldset>
          <p>
            <input name="submit" type="submit" class="buttons" id="submit" value="Submit Information" />
            <input name="reset" type="reset" class="buttons" id="reset" value="Reset Form" />
          </p>
        </form>

Gramps, you are always coming to my rescue.
Okay, I loaded the page under a different name http://abilityaxis.com/test.html. Viewing the source code doesn't show the yellow.
For demonstration purposes I copied a small amount of the text and changed the colour of what is yellow in Dreamweaver to this pinkish colour (I tried yellow but you couldn't read it)
        <form id="registrationForm" name="registrationForm1" method="post" action="">
          <fieldset>
              <legend>Contact Information</legend>
              <span id="sprytextfield1">
                <label>Name <span class="inforequired">*</span><br />
                  <input type="text" name="name" id="name" />
                  <br />
               </label>
                <span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield2">
                 <label for="businessname">(Business or Organization) Name<br />
                </label>
                <input type="text" name="businessname" id="businessname" />
It basically goes all the way through the form.
Any advice?
thanks,
deb

Spry Tab Panel is not working properly 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>
</div>
<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;

Hi
Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
The images have not been uploaded at all, the online CSS is the one without a link to the images
Regards
Adaan Pre-Media Services
For more image editing services follow us @
web designing services

Nested tabbed panels

Similar Messages

Maybe you are looking for