Tabbed Panel table content flowing over and past container content.

How can I "contain" the tabbed panel content, which happens to be a table, inside the main content area and "push" the rest of the container (just the footer) down the web page. It's like the tabbed menu table section "floats" above, over and past the container section which then pushes the footer information over to the side of the container. This is my first time to use the tabbed panel and I thought it was goin to be so easy....obviously I'm doing something wrong. Thanks in advance for your advice!

Normally, tabbed panel content (the panel itself) will expand and contract to accommodate your content. If you have set a fixed height on the panel group, or constrained the height of the panel in any way, it will do as you ask, and not expand or contract any more.
If you want to accommodate contents that are variable in length, remove any height restrictions. If you still need to restrain the height, leave it in and add overflow: auto; to bring up a scroll bar when the content is too long and you don't want to pop out of the box.
If you add the height and the overflow attributes to the .TabbedPanelsContentGroup selector, your tabs will remain stationary and your panel contents will scroll.
Beth

Similar Messages

Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like

Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like it was all created on one page, plus mouse over doesnt work on them.
This started all of a sudden.
The entire website is a series of spry tabbed panels.
http://pacificlaser.com/const.html
if you click on General construction tab things work ok...
if you click on Machine control tab, mouse over doesnt work and all page content of each tab show through.
ive been looking for the answer for 4 months with no success.
Hope a fellow dreamwever-person can help
Thanks Rick

You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B

Bridge CS6 Mac XMP File Info Panel Bug: can't copy and paste metadata

The cmd-keys / shortcuts doesn't work in the xmp file info panel btw. in the xmp / iptc fields (e.g. cmd+c, cmd+v, ...) of Adobe Bridge CS6 (Mac OS 10.6.8 and 10.7.3). You are not able to cut and paste info from one box to another like previous versions.
This bug only appears in the xmp file info window (opened via alt+i) in Bridge CS6 - if you edit information or metadata in the file info panel in Photoshop CS6 copy and paste from one field to another works.
The shortcuts also work under Windows (tested under Vista).
I noticed this minor bug already one in the Photoshop CS6 Beta more than one months ago. I hoped that this was corrected in the official test version, but unfortunately it is not. Although it is a minor bug, it is IMHO a basic function and would be very helpful in my daily work - it is too bad, that such a small thing is making working with the application a little bit annoying.

Thanks! If there is a workaround or simple solution, I would be very glad if you could inform me.
Christian
(signature removed by the Admin)
Am 14.05.2012 um 13:49 schrieb FrankBiederich:
Re: Bridge CS6 Mac XMP File Info Panel Bug: can't copy and paste metadata
created by FrankBiederich in XMP SDK - View the full discussion
Thanks for your report; we'll look into it.
Frank
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: Re: Bridge CS6 Mac XMP File Info Panel Bug: can't copy and paste metadata
To unsubscribe from this thread, please visit the message page at Re: Bridge CS6 Mac XMP File Info Panel Bug: can't copy and paste metadata. In the Actions box on the right, click the Stop Email Notifications link.
Start a new discussion in XMP SDK 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.
Message was edited by: Arpit Kapoor

Spry tabbed panels, all content showing on one page, please help?

Hi there,
I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DND Perspective</title>
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style></head>
<body>
<div align="center">
<p align="left" class="style4">DND </p>
</div>
<p align="left">
<img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" /> </p>
<p align="center">
<p align="center">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup" >
    <li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
    <li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
    <li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent style1">
      <div align="center">
        <p class="style11">Welcome to DND </p>
        <p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
        <p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
        <p>Please visit our services page to discover all photography sessions we have available such as:</p>
        <p>Wedding Photography</p>
        <p> Engament Photos</p>
        <p>Senior Portraits </p>
        <p>Anniversary</p>
        <p>& More!!!</p>
        <p> </p>
      </div>
    </div>
    <div class="TabbedPanelsContent">
      <p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
    </div>
    <div class="TabbedPanelsContent">Under Construction...</div>
    <div class="TabbedPanelsContent">Under Construction....</div>
    <div class="TabbedPanelsContent style1">
<p>We hear at DND understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &
packages, custom videos, thank you cards and albums.</p>
           <hr width="50%" align="left" />
      <p><strong>Package 1 - $500.00</strong></p>
      <p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
      <p><strong>Package 2 - $575.00</strong></p>
      <p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
      <p><strong>Package 3 - $700.00</strong></p>
      <p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
      <p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
           <hr width="50%" align="left" />
      <p><strong>Prints</strong>: (Fine Art High Quality)**</p>
      <p>Individual prices: 8"x10" = $12.99; 10"x13" = $19.99; 2 - 5"x7" = $12.99; 4 - 4"x6" = $11.99</p>
      <p>(Custom sizes available - Custom framing available)</p>
      <p><strong>Package 1:</strong></p>
      <p>3 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $50.00</p>
      <p><strong>Package 2:</strong></p>
      <p>5 - 8"x10"; 6 - 5"x7"; 6 - 4"x6" = $90.00</p>
      <p><strong>Package 3:</strong></p>
      <p>8 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $125.00</p>
      <p><strong>Package 4:</strong> (Basic Prints)</p>
      <p>Any 100 photos printed 4"x6" = $100.00</p>
           <hr width="50%" align="left" />
      <p><strong>Custom video:</strong>**</p>
      <p>Any 100 photos put to royalty-free music = $50.00</p>
          <hr width="50%" align="left" />
      <p><strong>Custom thank you cards for your guests:</strong>**</p>
      <p>300 cards - 4"x6" = $350.00</p>
      <p>100 cards - 4"x6" = $150.00</p>
     <hr width="50%" align="left" />
      <p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
      <p>Bride & Groom Albums</p>
      <p>Parent Albums</p>
           <hr width="50%" align="left" />
      <p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
    </div>
    <div class="TabbedPanelsContent style5">
      <p> Contact DND Perspective:</p>
      <p>The best way to reach us is via email .</p>
      <p>You can alternately reach us anytime at ...!</p>
    </div>
    <div class="TabbedPanelsContent">
      <div align="center">
        <p><span class="style1">About Info</span></p>
        <p> </p>
      </div>
    </div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">

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

You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B

Tabbed Panels: Two content areas?

Hi, I want to set up my Tabbed Panels so that when a certain tab is clicked, the content displayss in one content area/div and an image shows in another content area/div. Is that possible? If it is, will it change the CSS? On most pages, I want to use the same CSS style for tabbed panels, but only one content area.
Thanks very much,
Mike

You could do 2 things.
1) include the "area" inside the tabbed panels content, and use position:absolute; to position it everywhere that you want on your page
2) create onclick function on each tabbedpanel tab that will display the content for you.

Table panel won't flow over 2 pages

I am busy with a job that has a couple of long tables in it, the text in one panel excedes my page size, how do I get it to run on to the next page? All I have is the little red dot bottom right. CS5 Lion
Lou

This would indicate there is too much text in the cell. Look in Table menu, Cell Options, Rows and Columns, Row Height: Maximum. The default is 8⅓", and apparently that's not enough.
If this exceeds your page height, you have to manually split this super-cell into more rows.

Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry

Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?
Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent
And click on the "Using Spry.Utils.updateContent()"
The 3rd example shows how to use a fade transition whenever the content changes.
I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.
Tabs code;
<ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab">
               <table class="Button" >
                    <tr>
                    <td style="padding-right:0px" title ="Home">
                    <a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
                    </td>
                    </tr>
               </table>
          </li>
etc
etc
etc
and the panel code:
<div class="TabbedPanelsContent" id="Home">
     CONTENT
</div>
I hoped i can use the example code from the link into my tabbed panels.
I thought this code:
onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
could be added to the tab code like this:
<a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
But the content doesnt fade...
I know i need to change the header etc.
The following is from the link:
<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aquo Events</title>
<script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
<script src="../../../includes/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<style type="text/css">
/* IE HACK to prevent bad rendering when fading. */
#event { background-color: white; }
</style>
</head>
So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...
Is there a way to keep my tabbed panel (or change as less as possible) and let
A. The fade work
B. The loading work.
The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.
And the fading part is just because its nice...

It doesnt show in the post but off course i changed this link;
"data/AquoThonFrag.html"
into;
"javascript:TabbedPanels1.showPanel(1);"
I must say i dont know if this even works...

Tabbed panels repeat region in cms displays 2nd item as a block of content

Hi everyone, hope someone can help:
I have a test page live
http://aegmotorhomes.co.uk/usedtest1.php
Problem is this-
I have added a repeat region on my dreamweaver template
I use Perch CMS as my management for staff to add new items for sale on this page
I have built a tabbed panels to list the item
On my CMS it allows me to press "add another" which then adds the tabbed panels again as a new item and the staff input the details
My problem is the first item works perfect and all tabbs work fine, each item after that doesn't have tabbs and shows all content as one whole block
I think it is to do with the ID and applies the java file only to item one, thats my guess.
I have attached code below for my tabbed panels template, .js file and .css file - can anyone shed any light on this issue"
TEMPLATE
<style type="text/css">
#container1 {
          width: 700px;
          background-color: #E6E6E6;
          border: .1em solid #999;
          padding-top: 5px;
          padding-right: 5px;
          padding-left: 5px;
          height: auto;
          margin-bottom: 30px;
#item_description {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.3em;
          color: #333;
          background-color: #FFF;
          height: 30px;
          border-bottom-width: .1em;
          border-bottom-style: dotted;
          border-bottom-color: #333;
          font-weight: bold;
          margin-bottom: 10px;
#price {
          margin-top: 5px;
          float: right;
          width: 150px;
          background-color: #EAEAEA;
          border: 0.1em solid #CCC;
.BOLDTEXT {
          font-weight: bold;
          text-align: center;
          color: #FFF;
.BOLDTEXT_PRICE {
          color: #333;
#engine_spec {
          float: left;
          width: 190px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: .75em;
          border-top-style: none;
          border-right-style: none;
          border-bottom-style: none;
          border-left-style: none;
#top_price {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.2em;
          color: #099;
          float: right;
          width: 150px;
          font-weight: bold;
          text-align: right;
#top_price {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.4em;
          color: #099;
#overview_picture {
          height: 150px;
          width: 200px;
          background-color: #CCC;
          float: left;
          margin-right: 10px;
          margin-top: 5px;
.BOLDTEXT_blackprice {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.4em;
          color: #099;
#smallprint {
          font-family: Arial, Helvetica, sans-serif;
          font-size: .5em;
          color: #666;
          margin-top: 2px;
table tr td {
          font-size: 0.75em;
          font-family: Arial, Helvetica, sans-serif;
.specwhite {
          color: #FFF;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1em;
          font-weight: bold;
#reserve {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.2em;
          font-weight: bold;
          color: #FFF;
          background-color: #099;
          width: 140px;
          float: right;
          margin-top: 10px;
          padding: 5px;
          text-align: center;
          border: .1em solid #999;
</style>
<script src="../../../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../../../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<div id="container1">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Overview</li>
      <li class="TabbedPanelsTab" tabindex="0">Description</li>
      <li class="TabbedPanelsTab" tabindex="0">Images</li>
      <li class="TabbedPanelsTab" tabindex="0">Specification</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">
        <div id="item_description"><perch:content id="Title1" label="Title" type="text" />
          <div id="top_price">£<perch:content id="Title2" label="Top Price" type="text" /></div>
        </div>
        <div id="overview_picture"><img src="<perch:content id="photo" label="Photo" type="image" />" class="photo" /></div>
        <div class="engine_spec" id="engine_spec">
          <table width="100%" border="0" cellpadding="5" cellspacing="7">
            <tr>
              <td width="35%" bgcolor="#EAEAEA">Year of Make</td>
              <td width="65%" bgcolor="#999999"><strong class="spec_white"><span class="engine_spec"><span class="specwhite"><perch:content id="Title3" label="Year" type="text" /></span></span></strong></td>
            </tr>
            <tr>
              <td bgcolor="#EAEAEA">Current Miles</td>
              <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title4" label="Mileage" type="text" /></span></td>
            </tr>
            <tr>
              <td bgcolor="#EAEAEA">Engine Size</td>
              <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title5" label="Engine" type="text" /></span></td>
            </tr>
            <tr>
              <td bgcolor="#EAEAEA">Body Colour</td>
              <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title6" label="Colour" type="text" /></span></td>
            </tr>
            <tr>
              <td bgcolor="#EAEAEA">Transmission</td>
              <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title7" label="Transmission" type="text" /></span></td>
            </tr>
          </table>
        </div>
        <div id="price">
          <table width="150" border="0" cellspacing="9">
            <tr>
              <td width="50" height="25" bgcolor="#999999" class="BOLDTEXT">WAS</td>
              <td width="81" class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title8" label="Old Price" type="text" /></span></td>
            </tr>
            <tr>
              <td height="25" bgcolor="#999999" class="BOLDTEXT">NOW</td>
              <td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9" label="New Price" type="text" /></span></td>
            </tr>
            <tr>
              <td height="25" bgcolor="#999999" class="BOLDTEXT">SAVE</td>
              <td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9a" label="Save" type="text" /></span></td>
            </tr>
          </table>
        </div>
        <div id="reserve">Reserve Motorhome</div>
      </div>
      <div class="TabbedPanelsContent"><perch:content id="Text" label="Description" type="textarea" editor="ckeditor" html="true" /></div>
      <div class="TabbedPanelsContent"><table width="650" cellspacing="5">
<tr>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
</table></div>
      <div class="TabbedPanelsContent"><perch:content id="Text1" label="Specification" type="textarea" editor="ckeditor" html="true" /></div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
.JS file
(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, "click", function(e) { return self.onTabClick(e, tab); }, false);
          Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { 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
>CSS file
@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.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
          overflow: hidden;
          margin: 0px;
          padding: 0px;
          clear: none;
          width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
          margin: 0px;
          padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
          position: relative;
          top: 1px;
          float: left;
          background-color: #DDD;
          list-style: none;
          -moz-user-select: none;
          -khtml-user-select: none;
          cursor: pointer;
          font-family: sans-serif;
          font-size: small;
          font-weight: bold;
          margin-top: 0px;
          margin-right: 1px;
          margin-bottom: 0px;
          margin-left: 0px;
          padding-top: 4px;
          padding-right: 10px;
          padding-left: 10px;
          padding-bottom: 4px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
          background-color: #CCC;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
          background-color: #FFF;
          color: #333;
          border-top-color: fff;
          border-right-color: fff;
          border-bottom-color: fff;
          border-left-color: fff;
          border-color: fff;
          outline-color: fff;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
          color: black;
          text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
          clear: both;
          background-color: #F9F9F1;
          height: auto;
          margin-bottom: 3px;
          border: .1px solid #999;
/* 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;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
          background-color: #FFF;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 0.75em;
          color: #333;
          padding: 20px;
          clear: both;
          margin-bottom: 5px;
          height: auto;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
          overflow: hidden;
          zoom: 1;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.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;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
          float: none;
          margin: 0px;
          border-top: none;
          border-left: none;
          border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
          background-color: #EEE;
          border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.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:none !important;
          height: 100%;
#TabbedPanels1 {
          height: auto;
          padding-top: 5px;
          background-color: #EAEAEA;
          width: 700px;
I did read this but don't know where to start: http://www.webdevforums.com/showthread.php?27428-Dreamweaver-spry-collapsible-panel-amp-re peating-regions
Can anybody HELP PLEASE PLEASE

I think I counted three tabbed panels in the markup, each with an ID of TabbedPanels1
You have only one constructor that makes one instance of the tabeed panels with an ID of TabbedPanels1
There are a couple of things that create the problem.
There can only be one ID with the same name in a document, thus the ID's of the TabbedPanels will need to change from TabbedPanels1 for the second and third instances to TabbedPanels2 and TabbedPanels3 (or similar) respectively.
There needs to be a constructor for each tabbed panels like
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
Gramps

How to copy and paste a table and pictures from pdf files to word using MacBook pro 10.5.8

Hi Guys,
I want to copy tables out of a PDF document onto a word document. I only get the text and not the table when I copy and paste. I would also like to know how I can do the same with pictures or diagrams in PDF to word.
Regards,
Craig

You can take picture of anyhting from any document using Command + Shift + 4. Hold all three at the same time and your mouse will turn into a little plus sign where you can then drag across anything you'd like to take picture of it. The picture will be placed on your desktop.
See if that works for you.

Copy and paste table in pages

Anyone know how to position a table properly when copying and pasting it from one pages doc to another?

revbobmat,
You may also want to post in the Pages forum, that is where the Pages gurus tend to hang out. Oh and I was able to find this by using Google, it may help you out:
http://www.apple.com/support/pages/objects/

Spry tabbed panels - question about hover

Hello, I am relatively new to Dreamweaver and Spry, but have made a website using vertical Tabbed Panels that finally looks ALMOST like I want it. I am sure that I have done some things that could be much simpler though…
http://web.me.com/marinka9170/JL_test/JL_test.html
My problem is that I would like the tabs to stay in their hover state (so coloured and wider) when you navigate to the content panel (until you hover over the next tab of course), instead of going back to their standard grey. How do I do that?
And my other question is: in the content panels I have used custom bullets. Is there a way to assign a different custom bullet for each content panel? Do I number the content panels, like I have done with the tabs?
Any hints, tips, solutions are appreciated!
Thanks,
Marinka

I indeed see that your example works, but I think in my code there is some sort of conflict going on
I have copied the Source Code and the SpryTabbedPanels.ccs below and 'bolded' the parts where I think the problem is. It is probably in splitting the different tabs in 5, right?
I am sorry for asking these stupid questions. It's all quite new to me, but I've ordered a book to study more. It's just not in yet
Thanks again for your help! Really appreciate it!
Marinka
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="description goes here">
<meta name="keywords" content="">
<meta name="author" content="metatags generator">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="3 month">
<title>JL_test</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
</script>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
h1 {
font-family: Verdana, Geneva, sans-serif;
color: #15375e;
font-weight: bold;
font-size: 14px;
h2 {
font-family: Verdana, Geneva, sans-serif;
color: #016596;
font-weight: bold;
font-size: 14px;
h3 {
color: #00A0AF;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
h4 {
color: #679145;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
h5 {
color: #B4D88b;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
.container .content #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent table tr {
vertical-align: top;
.container .footer copyright {
</style>
<div class="container">
<div class="header"><img name="" src="" width="1024"
" height="120" alt="logo" style="background-color: #FFFFFF" align="right" /></div>
<div class="column1"></div>
<div class="column2"></div>
<div class="column3"></div>
<div class="placeholder"><img src="Website_03-web-images/JL_ice.jpg" width="1024" height="400" alt="" /></div>
   <div class="content">
    <div id="TabbedPanels1" class="VTabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab1" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">home</li>
        <li class="TabbedPanelsTab2" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">who are we?</li>
        <li class="TabbedPanelsTab3" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">our services</li>
        <li class="TabbedPanelsTab4" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">sectors of activity</li>
        <li class="TabbedPanelsTab5" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">contact</li>
      </ul>
     <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
<table width="686" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="348" height="200"><div class="TabbedPanelsContent">
                <home>
                  <h1>news</h1>
                </home>
                <p>News items can go here. Perum re sitibus eicita volupti inulpa doluptam, optate secum estiore idellectur rehenecabo. Nequidu cimolen ihilit quunt plab ipsunte caborup tinihic ipiscia menimin ulpari dolupta tendio esciust am et labo. <br />
                  Mincit quunto oditibus consecto berest ad miliquaspe debis voluptatus erum fugit hariberum rescipsa qui nistia estiusd andant autaepeles et rat.<br />
                  Vidi non pelique et eliata estinvellis volesequissi dus volorer umenien ihiciet vent volupta doluptat.</p>
</div></td>
              <td width="338" height="200"><div class="TabbedPanelsContent">
                <h1> </h1>
                <p>Dandem quamendit as pelendae placiamus adipiet, voluptur minctis ad qui sinctur repercia dolorerum aceatiis est aut erchil maio qui nobis accupta.<br />
                  ssimpe qui omniscid quunt id molupti orrorpor res estrumquae lab ipician debitaq uature, optate nobis ut illaborrum diae placit id moloreribus doluptatur, unt rehent laborent rempori tassed ma non ne id qui rem voluptatur mos.<br />
                  Apist rem fugit et, corepuda con reperum auts esendip.</p>
              </div></td>
            </tr>
          </table>
        </div>
    <div class="TabbedPanelsContent">
     <table width="686" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="348" height="200"><div class="TabbedPanelsContent">
                <h2>who are we?</h2>
                <p>Who are we? Why are we here? What do we do? Perum re sitibus eicita volupti inulpa doluptam, optate secum estiore idellectur rehenecabo. Nequidu cimolen ihilit quunt plab ipsunte caborup tinihic ipiscia menimin ulpari dolupta tendio esciust am et labo. <br />
                  Mincit quunto oditibus consecto berest ad miliquaspe debis voluptatus erum fugit hariberum rescipsa qui nistia estiusd andant autaepeles et rat.<br />
                  Vidi non pelique et eliata estinvellis volesequissi dus volorer umenien ihiciet vent volupta doluptat.</p>
</div></td>
              <td width="338" height="200"><div class="TabbedPanelsContent">
                <h3><img src="" alt="Photo" width="338" height="200" hspace="0" vspace="0" align="texttop" /></h3>
              </div></td>
            </tr>
          </table></div>
    <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="348" height="200"><div class="TabbedPanelsContent">
              <h3>our services</h3>
      <ul id="tab3">
        <li>Service 1 - description of the type of service goes here with a possible hyperlink or something</li>
        <li>Service 2</li>
        <li>Service 3</li>
      </ul>
    </div></td>
              <td width="338" height="200"><div class="TabbedPanelsContent">
</div></td>
            </tr>
          </table></div>
        <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="348" height="200"><div class="TabbedPanelsContent">
              <h4>sectors of activity</h4>
      <ul id="tab4">
        <li>Sector 1 - description of the sector of activity goes here with a possible hyperlink or something</li>
        <li>Sector 2</li>
        <li>Sector 3</li>
        </ul>
    </div></td>
              <td width="338" height="200"><div class="TabbedPanelsContent">
</div></td>
            </tr>
          </table></div>
     <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="348" height="200"><div class="TabbedPanelsContent">
              <h5>contact</h5>
                <p>Name</p>
                <p>Telephone number: +12 3456 7890</p>
                <p>email: <a href="mailto:[email protected]">[email protected]</a></p>
              </div></td>
              <td width="338" height="200"><div class="TabbedPanelsContent">
              </div></td>
            </tr>
          </table></div>
      </div>
    </div>
</div>
<div class="footer">
    <copyright>©2011 </copyright>
</div>
</div>
<script type="text/javascript">
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.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 338px;
height: 30px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
float: left;
padding: 0px 10px 0px 0px;
margin: 0px 0px 10px;
font: bold 12px/22pt Verdana, Geneva, sans-serif;
background-color: #DDD;
list-style: none;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #15375e;
text-align: right;
height: 30px;
width: 270px;
.TabbedPanelsTab1 {
position: relative;
float: left;
padding: 0px 10px 0px 0px;
margin: 0px 0px 10px;
font: bold 12px/22pt Verdana, Geneva, sans-serif;
background-color: #DDD;
list-style: none;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #15375E;
text-align: right;
height: 30px;
width: 270px;
.TabbedPanelsTab2 {
position: relative;
float: left;
padding: 0px 10px 0px 0px;
margin: 0px 0px 10px;
font: bold 12px/22pt Verdana, Geneva, sans-serif;
background-color: #DDD;
list-style: none;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #15375E;
text-align: right;
height: 30px;
width: 270px;
.TabbedPanelsTab3 {
position: relative;
float: left;
padding: 0px 10px 0px 0px;
margin: 0px 0px 10px;
font: bold 12px/22pt Verdana, Geneva, sans-serif;
background-color: #DDD;
list-style: none;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #15375E;
text-align: right;
height: 30px;
width: 270px;
.TabbedPanelsTab4 {
position: relative;
float: left;
padding: 0px 10px 0px 0px;
margin: 0px 0px 10px;
font: bold 12px/22pt Verdana, Geneva, sans-serif;
background-color: #DDD;
list-style: none;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #15375E;
text-align: right;
height: 30px;
width: 270px;
.TabbedPanelsTab5 {
position: relative;
float: left;
padding: 0px 10px 0px 0px;
margin: 0px 0px 10px;
font: bold 12px/22pt Verdana, Geneva, sans-serif;
background-color: #DDD;
list-style: none;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #15375E;
text-align: right;
height: 30px;
width: 270px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
color: #fff;
height: 30px;
width: 300px;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
height: 30px;
width: 300px;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-left: none;
border-bottom: none;
border-top: none;
border-right: none;
background-color: #FFF;
/* 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 {
padding: 0px 0px 0px 0px;
list-style-image: url(file:///Macintosh%20HD/Users/marinka/Desktop/JL/optencia_website/images/bullet.png);
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
padding-right: 10px;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
overflow: hidden;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 338px;
height: 240px;
position: relative;
overflow: hidden;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab1 {
float: left;
overflow: hidden;
.VTabbedPanels .TabbedPanelsTab2 {
float: left;
overflow: hidden;
.VTabbedPanels .TabbedPanelsTab3 {
float: left;
overflow: hidden;
.VTabbedPanels .TabbedPanelsTab4 {
float: left;
overflow: hidden;
.VTabbedPanels .TabbedPanelsTab5 {
float: left;
overflow: hidden;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
text-decoration:none;
overflow: hidden;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 686px;
height: 240px;
background-color: #fff;
/* 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;

Spry links to tabbed panels causing havoc

I have successfully used the tutorial from David Powers' Foundation blog to create a link to an accordion panel, but when I try to create links to 2 different tabbed panel pages, it causes 2 problems within DW.
First the links work to open the correct tabs and the pages display fine on IE7, Firefox and Safari.
Once I add the 'conditional operator' javascript at the end of the page, it causes the tab contents to display continuously out past the end of the widget container in DW, but not on the actual page, live or preview.
The bad problem is that if I close the file and re-open, and sometimes on save, I get the hourglass while it hangs, then after about 40-60 seconds, I get this message:
A script file in c:\..........\Spry\EditUtils.js has been running for a long time. Continue?
I answer No and the page opens and everything seems to work ok, I can edit and such, other than the tab contents running off the page.
I have checked the pages and removed all errors except tabindex and table bordercolor (which are allowed even though they show error on validate). And I have confirmed that the necessary spry link code is the same as the accordion panel page that works, except for the different identifiers of panel vs tab.
Here is a link to the page and the page:
http://www.wilsonchiropractic.net/Services/Hormone.html?tab=1#TabbedPanels1
http://www.wilsonchiropractic.net/Services/Hormone.html
This is the relevant spry link code:
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
When I take out the latter operator from the bottom line-
, {defaultTab: params.tab ? params.tab : 0}
everything goes back to normal.
Please Help! Thank You!!
--Jeff
Message was edited by: jeff_w01 9-24-09:
I have since re-created a simple page with the only complex element being the spry navigation bar. All else is essentially a stripped down version of the same page with an accordion panel which works. (all my pages are identical in header, navigation and footer - central frame holds differing content within tab or accordion panels).
I put a simple 2-tab panel onto a new page and added the above JavaScript for linking to spry tabs or accordions. It still does the same thing within DW; the separate tab panels run out down the page and it hangs with the eventual message: A script file in c:\..........\Spry\EditUtils.js has been running for a long time. Continue?
I have tried isolating as many variables as I can think of, but not having any luck....

Hi Jeff,
I am not able to reproduce this issue on a new page, but it looks like you have found that the following code is the problem:
{defaultTab: params.tab ? params.tab : 0}
Can you instead try the default constructor and then set the tab via the showTab() function for this tabbed panel? This is essentially what happens with the constructor you are having trouble with.
Hope that helps.
Thanks,
Josh Margulis
Adobe Senior Solutions Engineer

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 tabbed panels, opening a tabbed panel, problem with IE

i've have made a site, with tabbed panels,
all the pages are made of a template;
everythings works fine; in Firefox and Opera,
but only in IE when i open a tabbed panel from a menubar, the contents is opened behind my header location;
i've used spry 1.6.1 and spryUtils to open the tabbed panel.
because there no other posibilty to open a tabbed panel from my other page.
i've tested the site on CSS and all, and i've don't get any errors.
this site is only on our intranet, and DVD;
so is not a online site
i' dont have anything modified in the java script.
just changed some minor adjustments to the CSS of the tabbed panels
The page is containing a fixed footer and header, FOR all browsers therefore is the CSS IE hacks also.
and all other functions work normal.
i'm only a beginner at this
CSS
body,html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
body{
    color: #000;
    background-attachment: fixed;
    background-image: url(../afbeeldingen/Sitepictures/HaupteingangPB.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 95%;
#img2 {
    height: 2cm;
    width: 2cm;
    border:0;
#img {
    margin-right: 10px;
    height: 3cm;
    width: 3cm;
    border:0;
TD{
    font-family: Arial;
    font-size: 8pt;
    line-height: normal;
    vertical-align: top;
    text-align: left;
#header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
#header-container {
    height: 120px;
    background-repeat: repeat-x;
    background-position: left bottom;
#header {
    width: 1040px;
    margin: 0 auto;
    position: relative;
#header-content{
    width: 1040px;
    position: relative;
    background-image: url(../afbeeldingen/Sitepictures/background.jpg);
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
#header ul li {
    float: left;
    margin-right: 2px;
#container {
    width: 1040px;
    padding-top: 120px;
    padding-bottom:50px;
    background-color: #FFF;
    margin-bottom: 0px;
    left: auto;
    right: auto;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    height: auto;
    min-height:100%;
#container a:link {
    color: #00C;
    text-decoration: none;
#container a:visited {
    color: #F8495A;
    text-decoration: none;
#container a:hover {
    color: #00C;
    text-decoration: underline;
#container a:active {
    color: #00B004;
    text-decoration: none;
#kolommaker
    width:1040px;
    background-color: #CEECAE;
    height: 100%;
    float: left;
#boven {
    width: 1040px;
    position: static;
    height: 180px;
    background-color: #FFF;
#sitecontent {
    width: 1040px;
    background-color: #FFF;
    height: 100%;
#TabbedPanels1 {
    width: 1040px;
    position: static;
    background-color: #FFF;
    height: 100%;
    float: left;
.links, .rechts, .midden {
    height:100%;
    display: inline-table;
    background-color: #FFF;
.links{
    float: left;
    width: 330px;
    font-size: 12px;
    padding-top: 5px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
.rechts{
    padding-top: 5px;
    float: right;
    width: 330px;
    text-align: left;
    font-size: 12px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
.midden{
    padding-top: 5px;
    width: 330px;
    text-align: left;
    font-size: 12px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
#footer-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
#footer-container {
    height: 50px;
    background-image: url(../images/footer-bg.png);
    background-repeat: repeat-x;
    background-position: left bottom;
#footer {
    width: 1040px;
    margin: 0 auto;
    position: relative;
    background: #FFF;
#contentfooter {
    width: 1040px;
    margin-top: 0;
    margin-right: auto;
    position:relative;
    margin-bottom: 0;
    margin-left: auto;
    height:50px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #F00;
    text-align: center;
.leftfooter {
    float: left;
.rightfooter {
    float: left;
#iframe {
        height: 600px;
        min-height: 600px; }
.result_title a:link {
    color: #00C;
    text-decoration: none;
.result_title a:visited {
    color: #F8495A;
    text-decoration: none;
.result_title a:hover {
    color: #00C;
    text-decoration: underline;
.result_title a:active {
    color: #00B004;
    text-decoration: none;
.description { font-size: 100%; color: #008000; }
.docs {border:0;}
.pdf {border:0;}
.images {border:0;}
.excell {border:0;}
.exe {border:0;}
.clock {
    text-align: center;
    background: #FFF;
    border: 1px solid #CCC;
    height: 20px;
    width: 175px;
    font-size: 12px;
.clearfix {
    content:".";
    width:100%;
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
/* Hides from IE-mac \*/
.clearfix {height: 1%;} /* for IE/Mac */
CSS IE hacks
html{
    overflow: hidden;
body{
    overflow: auto;
#header-wrap, #footer-wrap {
    position: absolute;
#header-container, #footer-container,{
margin-right: 16px;
#ie6-container-wrap {
    position: absolute;
    width: 100%;
    height:100%;
    overflow:auto;
#TabbedPanels1 {
    position: absolute;
.TabbedPanels {
    position: absolute;
#boven {
    padding-top: 100px;
#container {
    padding-top: 60px;
    height :100%;
#sitecontent {
    height: 100%;
#footer-wrap {
    bottom: -1px;
#header img, #footer img
display: block;
Template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Naamloos document</title>



<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>

</head>
<body>

<div id="header-wrap">
    <div id="header-container">
        <div id="header">
                <div id="header-content">
                <table width="890" border="0" cellspacing="1">
      <tr>
        <td width="100" height="50"><a href="../Sites/Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
        <td width="680">
     <span class="preload1"></span>
    <span class="preload2"></span>
        <ul id="nav">
            <li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
                <ul class="sub">
                <li><b>Alg. Procedure</b></li>
                <li><a href="#nogo3" class="fly">Car Policy</a>
                    <ul>
                        <li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
                        <li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
                    </ul>
                </li>
                <li><a href="#nogo7" class="fly">Gsm Policy</a>
                    <ul>
                        <li><a href="#nogo8">Gsm Policy NL</a></li>
                        <li><a href="#nogo9">Gsm Policy FR</a></li>
                    </ul>
                </li>
                <li><b>Diversen</b></li>
                <li><a href="../Algemeen/Skills.htm">Skills</a></li>
                <li><a href="../Sites/Verlof-Recup.html">Verlof</a></li>
                <li><a href="../Sites/Verlof-Recup.html">Recup</a></li>
        </ul>
            </li>
            <li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
                <ul class="sub">
                    <li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
                    <li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
                    <li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
                    <li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
                    <li><a href="#nogo7" class="fly">Onkostennota</a>
                    <ul>
                        <li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
                        <li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
                    </ul>
                    </li>
                    <li><a href="#nogo7" class="fly">Online Tools</a>
                    <ul>
                        <li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
                        <li><a href="../Sites/login.html">Online map</a></li>
                        <li><a href="../Sites/Fujitsu.html">Fujitsu Portal</a></li>
                    </ul>
                </li>
                     <li><a href="#nogo7" class="fly">FAX Franchisé</a>
                    <ul>
                        <li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
                        <li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
                    </ul>
                    </li>
        </ul>
    </li>
    <li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
        <ul class="sub">
            <li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
            <li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
            <li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
        <ul class="sub">
            <li><a href="../Sites/Aldi.html">Aldi</a></li>
            <li><a href="../Sites/Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
            <li><a href="../Sites/Bonita.html">Bonita</a></li>
            <li><a href="../Sites/Carrefour.html">Carrefour</a></li>
            <li><a href="../Sites/C&A.html">C & A</a></li>
            <li><a href="../Sites/Decathlon.html">Decathlon</a></li>
            <li><a href="../Sites/Delhaize.html">Delhaize</a></li>
            <li><a href="../Sites/Ici Paris XL.html">Ici Paris</a></li>
            <li><a href="../Sites/Ikea.html">Ikea</a></li>
            <li><a href="../Sites/Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
            <li><a href="../Sites/Kruidvat.html">Kruidvat</a></li>
            <li><a href="../Sites/Lidl.html">Lidl</a></li>
            <li><a href="../Sites/Living Tomorrow.html">Living Tomorrow</a></li>
            <li><a href="../Sites/Mediamarkt.html">Mediamarkt</a></li>
            <li><a href="../Sites/Scapino.html">Scapino</a></li>
            <li><a href="../Sites/Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
            <li><a href="../Sites/Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
        <ul class="sub">
            <li><a href="../Sites/third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
            <li><a href="../Sites/third party.html?tab=4#tabbedpanels1">HP</a></li>
            <li><a href="../Sites/third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
            <li><a href="../Sites/third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
            <li><a href="../Sites/third party.html?tab=1#tabbedpanels1">Scanners</a></li>
            <li><a href="../Sites/third party.html?tab=0#tabbedpanels1">Scales</a></li>
        </ul>
    </li>
    <li class="top"><a href="../Sites/Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
    <li class="top"><a href="../Sites/Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
        </td>
      </tr>
    </table>
<table width="1038" border="0" cellspacing="1">
<tr>
    <td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
    <td> </td>
    <td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
         </div>
        </div>
    </div>
</div>

<div id="ie6-container-wrap" >
<div id="container">
        
     <div id="boven">test<br />
       <br />
     </div>
     <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Algemeen</li>
        <li class="TabbedPanelsTab" tabindex="0">Tools</li>
        <li class="TabbedPanelsTab" tabindex="0">Pc's</li>
        <li class="TabbedPanelsTab" tabindex="0">Kassa's</li>
        <li class="TabbedPanelsTab" tabindex="0">Selfscanning</li>
        <li class="TabbedPanelsTab" tabindex="0">Self Check Outs</li>
        <li class="TabbedPanelsTab" tabindex="0">EN andere</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven
            <p>Hier wordt de inhoud voor id midden weergegeven</p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
          </div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
      </div>
      <div class="clearfix:after"> </div>
</div>

    </div>
    <div class="clearfix:after"> </div>
</div>

<div id="footer-wrap">
    <div id="footer-container">
        <div id="footer">
         <div id="contentfooter"><div class="leftfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
       <div class="rightfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
        </div>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
PAGE where i open the tabbed panels
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Third Party</title>



<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>

</head>
<body>

<div id="header-wrap">
    <div id="header-container">
        <div id="header">
                <div id="header-content">
                <table width="890" border="0" cellspacing="1">
      <tr>
        <td width="100" height="50"><a href="Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
        <td width="680">
     <span class="preload1"></span>
    <span class="preload2"></span>
        <ul id="nav">
            <li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
                <ul class="sub">
                <li><b>Alg. Procedure</b></li>
                <li><a href="#nogo3" class="fly">Car Policy</a>
                    <ul>
                        <li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
                        <li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
                    </ul>
                </li>
                <li><a href="#nogo7" class="fly">Gsm Policy</a>
                    <ul>
                        <li><a href="#nogo8">Gsm Policy NL</a></li>
                        <li><a href="#nogo9">Gsm Policy FR</a></li>
                    </ul>
                </li>
                <li><b>Diversen</b></li>
                <li><a href="../Algemeen/Skills.htm">Skills</a></li>
                <li><a href="Verlof-Recup.html">Verlof</a></li>
                <li><a href="Verlof-Recup.html">Recup</a></li>
        </ul>
            </li>
            <li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
                <ul class="sub">
                    <li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
                    <li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
                    <li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
                    <li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
                    <li><a href="#nogo7" class="fly">Onkostennota</a>
                    <ul>
                        <li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
                        <li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
                    </ul>
                    </li>
                    <li><a href="#nogo7" class="fly">Online Tools</a>
                    <ul>
                        <li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
                        <li><a href="login.html">Online map</a></li>
                        <li><a href="Fujitsu.html">Fujitsu Portal</a></li>
                    </ul>
                </li>
                     <li><a href="#nogo7" class="fly">FAX Franchisé</a>
                    <ul>
                        <li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
                        <li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
                    </ul>
                    </li>
        </ul>
    </li>
    <li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
        <ul class="sub">
            <li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
            <li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
            <li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
        <ul class="sub">
            <li><a href="Aldi.html">Aldi</a></li>
            <li><a href="Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
            <li><a href="Bonita.html">Bonita</a></li>
            <li><a href="Carrefour.html">Carrefour</a></li>
            <li><a href="C&A.html">C & A</a></li>
            <li><a href="Decathlon.html">Decathlon</a></li>
            <li><a href="Delhaize.html">Delhaize</a></li>
            <li><a href="Ici Paris XL.html">Ici Paris</a></li>
            <li><a href="Ikea.html">Ikea</a></li>
            <li><a href="Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
            <li><a href="Kruidvat.html">Kruidvat</a></li>
            <li><a href="Lidl.html">Lidl</a></li>
            <li><a href="Living Tomorrow.html">Living Tomorrow</a></li>
            <li><a href="Mediamarkt.html">Mediamarkt</a></li>
            <li><a href="Scapino.html">Scapino</a></li>
            <li><a href="Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
            <li><a href="Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
        <ul class="sub">
            <li><a href="third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
            <li><a href="third party.html?tab=4#tabbedpanels1">HP</a></li>
            <li><a href="third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
            <li><a href="third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
            <li><a href="third party.html?tab=1#tabbedpanels1">Scanners</a></li>
            <li><a href="third party.html?tab=0#tabbedpanels1">Scales</a></li>
        </ul>
    </li>
    <li class="top"><a href="Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
    <li class="top"><a href="Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
        </td>
      </tr>
    </table>
<table width="1038" border="0" cellspacing="1">
<tr>
    <td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
    <td> </td>
    <td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
         </div>
        </div>
    </div>
</div>

<div id="ie6-container-wrap" >
<div id="container">
        
<div id="boven"><img src="../afbeeldingen/Sitepictures/Datalogic_logo.jpg" alt="Datalogic" name="img2" width="100" height="100" id="img2" /> <img src="../afbeeldingen/Sitepictures/PSC-Logo4C.jpg" alt="PSC" name="img2" width="450" height="160" id="img2" /> <img src="../afbeeldingen/Sitepictures/NCRlogo.jpg" alt="NCR" name="img2" width="116" height="116" id="img2" /> <img src="../afbeeldingen/Sitepictures/symbol-logo.jpg" alt="Symbol" name="img2" width="200" height="150" id="img2" /></div>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">kassascanners</li>
        <li class="TabbedPanelsTab" tabindex="0">Handscanners</li>
        <li class="TabbedPanelsTab" tabindex="0">Scales</li>
        <li class="TabbedPanelsTab" tabindex="0">Kassaprinters</li>
        <li class="TabbedPanelsTab" tabindex="0">HP</li>
        <li class="TabbedPanelsTab" tabindex="0">Fujitsu-Siemens</li>
        <li class="TabbedPanelsTab" tabindex="0">Datalogic</li>
        <li class="TabbedPanelsTab" tabindex="0">Vensafe</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
           <div class="links"></div>
          <div class="rechts"></div>
         <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
           <div class="rechts"></div>
          <div class="midden"></div>
        </div>
       <div class="TabbedPanelsContent">
          <div class="links"></div>
          <div class="rechts"></div>
          <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links"></div>
          <div class="rechts"></div>
          <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links"></div>
          <div class="rechts"></div>
          <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
         <div class="rechts"></div>
        <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
         <div class="rechts"></div>
        <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
         <div class="rechts"></div>
        <div class="midden"></div>
        </div>
      </div>
       <div class="clearfix:after"> </div>
    </div>

    </div>
    <div class="clearfix:after"> </div>
</div>

<div id="footer-wrap">
    <div id="footer-container">
        <div id="footer">
         <div id="contentfooter"><div class="leftfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
       <div class="rightfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
        </div>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
TABBED PANELS CSS
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - 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.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
    width: 1040px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    position: static;
    float: left;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
    position: static;
    top: 1px;
    float: left;
    font: bold 0.7em sans-serif;
    background-color: #FF0033;
    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;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 4px;
    padding-right: 5px;
    padding-bottom: 4px;
    padding-left: 5px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
    background-color: #75A7D0;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
    border-bottom: 2px solid #EEE;
    color: #FFF;
    background-color: #000;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
    color: black;
    text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
    clear: both;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    float: left;
/* 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 {
    padding: 4px;
    height: 100%;
    width: 1032px;
    float: left;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
    background-color: #FFF;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #CCC;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;

added also the css for the menubar
pro_dropdown_3.css
.preload1 {
    background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
.preload2 {
    background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
#nav {
    padding:0;
    margin:0;
    list-style:none;
    height:38px;
    position:relative;
    z-index:500;
    font-family:arial, verdana, sans-serif;
    background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
    background-repeat: repeat-x;
#nav li.top {
    display:block;
    float:left;
    width: auto;
#nav li a.top_link {
    display:block;
    float:left;
    height:35px;
    line-height:33px;
    color:#ccc;
    text-decoration:none;
    font-size:11px;
    font-weight:bold;
    cursor:pointer;
    background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
    width: 85px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 2px;
#nav li a.top_link span {
    float:left;
    display:block;
    height:35px;
    background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
    background-repeat: no-repeat;
    background-position: right top;
    width: 70px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
#nav li a.top_link span.down {
    float:left;
    display:block;
    padding:0 10px 0 12px;
    height:35px;
    background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
    background-repeat: no-repeat;
    background-position: right top;
#nav li:hover a.top_link {
    color:#fff;
    background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
    background-repeat: no-repeat;
#nav li:hover a.top_link span {
    background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
    background-repeat: no-repeat;
    background-position: right top;
#nav li:hover a.top_link span.down {
    padding-bottom:3px;
    background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
    background-repeat: no-repeat;
    background-position: right top;
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
    background-color: #50b5d0;
    background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
    color:#fff;
    background-color: #3f96a9;
    background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;
#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
    color:#fff;
    border-color:#fff;
    background-color: #3f96a9;
    background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
    color:#000;
    border-color:#50b5d0;
    background-color: #50b5d0;
    background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;

Using Tabbed Panels

I have placed a tabbed panel on the master slide used for each of the staff biography pages in our corporate web site. The panel has two tabs; one for a personal statement and the second for facts about each staff member (Year joined the firm, professional certifications, etc.) Every one of the 26 biography pages has the two panels (they all share the same master), but the content on each panel is different for each staff member.
When I place text on the facts tab of the panel in on an individual's bio page, the text I place is showing up on both the first and second tab. How do I designate content to appear on a specific tab an no other.
Also, there does not appear to be a way to switch between tabs on an individuals page in design mode. I have to go to the master, select the first tab, go to the individuals page and enter the content, then go back to the master and select the second tab and then go back to the individuals page and enter content for tab two. This is quite cumbersome. Is there any way to switch between tabs on a page in design mode when the tabbed panel iteself is being "brought over" to that page from the master?
Thanks very much.
Andy.

Hi Andy,
You can't edit the contents of any objects placed on the Master Page in Child Page and Tabbed Panels are no exception.
You can't add a tabbed panel to a master page and manipulate its contents in the child pages based on that master page. The way to go here would be to create one page with the tabbed panel content and then duplicate it to generate other pages and modify their contents.
To keep the styling of Tabbed Panels in sync and linked you can use the Graphics/Paragraph/Character styles panel to apply styles and changes styles to all tabbed panels at once by changing the properties of the Style in the panel.
Hope this helps.
Cheers,
Vikas

Tabbed Panel table content flowing over and past container content.

Similar Messages

Maybe you are looking for