VTabbedPanels Content

I would like to know if there is a way to move the verticle
tabbed pannels content group so that the top is aligned with what
tab is selected. I have a long listing tabs in a vert list and when
u get to to bottom you have to scroll back up to the top of the
page to see the content. So I would like to make it so if you
select the tab the top of the conten side is aligned with the top
of the current tab

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

Similar Messages

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

Content not in the content box

I'm having a problem with my content not in my content box. I have a webpage started from one of the Codify templates and all was going according to plan but then I added some content to my Rates tab and it appears out of the :content area". This may also explain why I can't get a vertical scrollbar to show up. Thoughts? Ideas? What have I done wrong this time? The page in qusetion is here

Try the following, copy and paste into a new document called junk.html or similar and notice that I have not use absolute positioning anywhere.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
html {
    color: #FFFFFF;
    font-size: 14px;
    font-family: "Trebuchet MS";
    background-color: #6699CC;
    height: 100%
body {
    width: 840px;
    margin: 20px auto 0;
    height: 100%;
h1, h2, h3, p {
    margin-left: 20px;
#header {
    height: 60px;
    background: url(images/our_company_logo.png) no-repeat;
#header #share {
    margin: 20px 0 0 325px;
    float: left;
#content {
#footer {
    clear: both;
    height: 60px;
</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div id="share">
    
    <div class="addthis_toolbox addthis_default_style "> <a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4d30c7c20c5601dc" class="addthis_button_compact">Share</a> <span class="addthis_separator">|</span> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d30c7c20c5601dc"></script>
    <script type="text/javascript">
    var addthis_config = {
    ui_cobrand: "Janet's Cabin",
    ui_header_color: "#ffffff",
    ui_header_background: "#5D94D5"
    </script>
    
</div>
</div>
<div id="content">
<div class="tabbedpanels_top VTabbedPanels"></div>
<div id="TabbedPanels1" class="VTabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
      <li class="TabbedPanelsTab" tabindex="0">Rates</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent"><p>Content 1</p></div>
      <div class="TabbedPanelsContent">
        <h2>Rates</h2>
        <p> Say something about the rates here </p>
        <div id="weather"><img src="images/prescott_weather01.png" alt="Prescott Weather" width="580" height="199" /></div>
        <div id="rates_01">
        <table>
        <caption>
        Cabin Rental Rates
        </caption>
        <tr>
        <th scope="col">Dates</th>
        <th nowrap="nowrap" scope="col">Weekly Rate</th>
        </tr>
        <tr >
        <td nowrap="nowrap">Jan.1 - Mar. 31</td>
        <td><div align="center">$1XXX</div></td>
        </tr>
        <tr>
        <td nowrap="nowrap">Apr. 1 - Jun. 30</td>
        <td><div align="center">$2XXX</div></td>
        </tr>
        <tr >
        <td nowrap="nowrap">Jul. 1 - Sep. 30</td>
        <td><div align="center">$3XXX</div></td>
        </tr>
        <tr>
        <td nowrap="nowrap">Aug. 1 - Dec. 31</td>
        <td><div align="center">$4XXX</div></td>
        </tr>
        <tr > </tr>
        </table>
        </div>
        <div id="cal_pos">
        <script type="text/javascript">
        AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','225','height','234','title','Calendar','src','Flash/calendar_01','quality','high','pl uginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=Shockwave Flash','wmode','transparent','movie','Flash/calendar_01' ); //end AC code
        </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="225" height="234" title="Calendar">
        <param name="movie" value="Flash/calendar_01.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <embed src="Flash/calendar_01.swf" width="225" height="234" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
        </object>
        </noscript></div>
        <div id="weather"><img src="images/prescott_weather01.png" alt="Prescott Weather" width="580" height="199" /></div>
      </div>
    </div>
<div class="tabbedpanels_bottom"></div>
</div>
</div>
<div id="footer">
My footer
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
The above is merely an example that has to be worked on.
No longer Grumps

Change text "link" color only in Spry Tab content area

I need to have multiple text link colors in my site for light
and dark background colors. The only regions in my site that have a
white background are in the Spry Tab Panel content area. I can't
figure out how to change the text color for text links in the spry
content only. I tried to add a:link ..etc... to the style sheet,
but it did not effect anything
(I also need to clean my style sheet (s). But that comes
next.
Here
is a Link to a Sample Page in my site
null

Here is the SpryTabbedPanels style sheet in my site. I can't
seem to figure out the changes I need to make to effect the content
area.
I tried to add the following (see .TabbedPanelsContentGroup
below)
a: link {
color: #0099CC;
text-decoration: none
a:active {
color: #99CC33;
text-decoration: none
a:visited {
color: #0099CC;
text-decoration: none
a:hover {
color: #99CC33;
text-decoration: underline
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6
/* 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 {
margin: 0px;
float: right;
clear: none;
width: 82%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
padding-top: 0px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 0px;
/* 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;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCCC99;
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;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
/* 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: #99CC33;
color: #000000;
/* 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: #FFFFFF;
border-bottom: 1px solid #EEE;
color: #000000;
/* 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-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #FFFFFF;
color: #000000;
a: link {
color: #0099CC;
text-decoration: none
a:active {
color: #99CC33;
text-decoration: none
a:visited {
color: #0099CC;
text-decoration: none
a:hover {
color: #99CC33;
text-decoration: underline
/* 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;
/* 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 {
/* 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: #CCCC99;
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: #CCCC99;
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;

Spry Tabs displaying all content in IE8

Hi,
I have been looking at using the spry tabs panel to display content, it works perfectly fine in Safari and Firefox, but in explorer 8 all the panels display one underneath the other?
I have played around with the layout and am probably out of my depth...
If anyone knows a way I can fix this, otherwise I will use a simpler display.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="CSS/css.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab1">
      <h1>$500 </h1>
     <p> Starter pack.</p>
      </li>
      <li class="TabbedPanelsTab" >
<h1>$900 </h1>
        <p>A bit more special.</p>
      </li>
      <li class="TabbedPanelsTab">
<h1>Custom </h1>
        <p>For something extra.</p>
      </li>
      <li class="TabbedPanelsTab">
        <h1>Design Services</h1>
        <p>content.</p>
      </li>
      </li>
    </ul>
    <div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent1">
      <div class="contentimage"><img src="images/page-design.gif" width="400" height="312" alt="example of designs" longdesc="images/page-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
<div align="center"><a href="web me.html#pageinfo"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
<div class="TabbedPanelsContent2">
      <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
      <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
<div class="TabbedPanelsContent3">
     <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
      <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
<div class="TabbedPanelsContent4">
      <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
      <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
    </div>
</div>
<div id="design">
<div class="topline"></div>
<div id="leftcoloumn">
<h1> Simple affordable website design in Auckland</h1>
     <p>As designers on Auckland's North Shore we set out to offer an affordable easy way to create special spaces etc..</p>
    </div>
<div class="centerline"></div><div id="rightcoloumn">
    <h1>Specialising in creating special spaces. </h1>
   <ol>
      <li>Create a space you'll love.</li>
      <li>Fit your budget.</li>
                         </ol>
    </div>
</div>
<div id="footer">
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
@charset "UTF-8";
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
#container #TabbedPanels1 .TabbedPanelsTabGroup .TabbedPanelsTab1 h1 {
font-size: 18px;
color: #52542D;
#container #TabbedPanels1 .TabbedPanelsTabGroup .TabbedPanelsTab h1 {
font-size: 18px;
color: #52542D;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
margin-left: 30px;
.TabbedPanelsTab {
position: relative;
top: 435px;
float: left;
width: 203px;
padding: 12px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCC;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666633;
border-bottom-color: #666633;
border-left-color: #CCC;
overflow: visible;
.TabbedPanelsTab1 {
position: relative;
top: 435px;
float: left;
width: 203px;
padding: 12px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCC;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666633;
border-bottom-color: #666633;
border-left-color: #666633;
overflow: visible;
.TabbedPanelsTabHover {
background-color: #FFF;
.TabbedPanelsTabSelected {
background-color: #FFF;
border-bottom: 1px solid #666633;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
position: relative;
bottom: 90px;
clear: both;
min-height: 430px;
height: auto;
margin-right:27px;
margin-left: 30px;
background-image: url(../images/content-box.gif);
background-repeat:no-repeat;
.TabbedPanelsContent {
padding: 4px;
.TabbedPanelsContentVisible {
.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;
#container #content {
width: 395px;
float: right;
margin-top: 35px;
padding-right: 20px;
#container #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent1.TabbedPanelsContentVisible #content .image {
margin-top: 27px;
#container .contentheaders {
margin-right: 8px;
#container .contentimage {
float: left;
margin-top: 35px;
padding-left: 40px;

You are probably getting a javascript error in IE8 preventing the tabs displaying properly. Use the developer tools unde F12 to find the problem line in your code. Sometimes it is just a cariable name you have used that IE does not like....

Logical Level in Content Tab

Hi,
What is the use of Logical Level under Content Tab in Logical Table Source?
Need more information, docs related to this
Thanks,
Satheesh

Hi
This logical level is useful for level bases metrics.It shows the levels in your hierarchy.We can give the level in this and in the report it shows the data for that level only.
See this lnk, http://gerardnico.com/wiki/dat/obiee/measure_level_based
Thanks
Don

Can not refresh contents of finder windows

I can not get my finder windows to refresh their contents. My picture folder is the one that really bothers me. When I am trying to upload pictures to the internet, the picture folder is never accurate. I have tried the refresh finder apple script, restarting the computer, opening and closing the window, nothing seems to work.
The content is there, when I search for a specific picture file it is there, but it is not located in the right subfolder. I download and manage my pictures on kodak easyshare.

Hi there,
The content is there, when I search for a specific picture file it is there, but it is not located in the right subfolder.
Hmmm, are you saying something is moving them? Or the Finder isn't opening them to the right folder?
Have you tried this one...
http://www.versiontracker.com/dyn/moreinfo/macosx/10958253
Safe Boot, (holding Shift key down at bootup), & use Disk Utility from there to Repair Permissions, reboot once more.
Then Safe Boot from the HD, (holding Shift key down at bootup), run Disk Utility in Applications>Utilities, then highlight your drive, click on Repair Permissions...
Move this file to the desktop...
/Users/YourUserName/Library/Preferences/com.apple.finder.plist
reboot when it completes.

Hi Guys, I am using the full width video widget on a site. The widget was working perfectly however I have just added additional content to the site and re-uploaded and now the video is not working! Please help I have tried everything and am freaking out

Hi Guys,
I am using the full width video widget on a site. The widget was working perfectly however I have just added additional content to the site and re-uploaded and now the video is not working! Please help I have tried everything and am freaking out as this web-site has been payed for by my client.
Alex

Many thanks.
With those symptoms, I'd try the following document:
Apple software on Windows: May see performance issues and blank iTunes Store
(If there's a SpeedBit LSP showing up in Autoruns, it's usually best to just uninstall your SpeedBit Video Accelerator.)

Some Content in e-mail wont show and Google Doodles don't work

Hi
I am using Windows 7 - Laptop - Lenovo E540 - 2 months old. Firefox 37.0.1
I first noticed some content in my e-mails won't show - BUT if I open my e-mail in Chrome - no problem - I even checked it in the latest IE - which I never use - and no problem there as well - JUST FIREFOX
I have attached screen grabs of one particular daily e-mail i get and you can see I see the links in Chrome (under Doddle Top Stories) - but not in FireFox.
i also have Firefox on my Android (Nexus 5 - Kit Kat) phone and do not have the problem there.
ALSO: One of the latest Google Doodles that was interactive (The Pony Express one) - did NOT work or even show a "play button" in Firefox but in Chrome it worked no problem - so there seems to be a problem with that as well.
I Have Tried:
Firefox in Safe Mode
Refreshed Firefox
Disabled and then enabled each plug-in one by one as per the instructions
Downloaded and installed the latest Java
I Know it's not my Anti-Virus (Symantec Endpoint 12) as I said it works with Chrome & IE
I have ALSO noticed that sometimes it times out or pages won't display/load and then I hit retry and it works - and it's not my WiFi as that doesn't seem to happen w/Chrome or my Cellphone.
I decided to pull out and fire up my old laptop (Lenovo Think Pad Z61T - Windows XP) that I replaced with the new one and see if it happened on this one - which I NEVER remember it doing at all - but since it updated to the latest Firefox - IT ALSO HAPPENS NOW on this one!
Is it the NEW update of FireFox that has a function I am not aware of?
I have not installed and re-installed Firefox as I figured that would be the last resort.
Has anyone else experienced this problem?
Any other advice other than what I've tried would be very much appreciated.
Thank you.

Hello,
The Refresh feature (called "Reset" in older Firefox versions) can fix many issues by restoring Firefox to its factory default state while saving your bookmarks, history, passwords, cookies, and other essential information.
'''''Note:''' When you use this feature, you will lose any extensions, toolbar customizations, and some preferences.'' See the [[Refresh Firefox - reset add-ons and settings]] article for more information.
To Refresh Firefox:
# Open the Troubleshooting Information page using one of these methods:
#*Click the menu button [[Image:New Fx Menu]], click help [[Image:Help-29]] and select ''Troubleshooting Information''. A new tab containing your troubleshooting information should open.
#*If you're unable to access the Help menu, type '''about:support''' in your address bar to bring up the Troubleshooting Information page.
#At the top right corner of the page, you should see a button that says "Refresh Firefox" ("Reset Firefox" in older Firefox versions). Click on it.
#Firefox will close. After the refresh process is completed, Firefox will show a window with the information that is imported.
#Click Finish and Firefox will reopen.
Did this fix the problem? Please report back to us!
Thank you.

Running 10.6.8. Trying to open and view contents of a CD (of an MRI) and getting message 'This program cannot be run in DOS mode' Is there a way? Thanks for the help.

Running 10.6.8. Trying to open and view contents of a CD (of an MRI) and getting message 'This program cannot be run in DOS mode' Is there a way? Thanks for the help.

Go to the support site for the provider of the MRI software.
Sounds like it windows/PC. I have ran across that for the CDs that veterinarians provide for digital x-rays.
I would try on a PC or on yuur Mac with Windows via BootCamp or a virtual machine like VirtualBox

I recently ran monolingual and removed all but the intel-64 bit architectures. Now my iphoto will not open. Here's the message that I get. Process:         iPhoto [3543] Path:            /Applications/iPhoto.app/Contents/MacOS/iPhoto Identifier:

I recently ran monolingual and removed all but the intel-64 bit architectures. Now my iphoto (along with Idvd, garage band, imovie) will not open. Here is the message that I get.
Process:         iPhoto [3543]
Path:            /Applications/iPhoto.app/Contents/MacOS/iPhoto
Identifier:      com.apple.iPhoto
Version:         ??? (???)
Build Info:      iPhotoProject-4750000~1
Code Type:       X86 (Native)
Parent Process: launchd [109]
Date/Time:       2011-06-10 21:48:59.821 -0500
OS Version:      Mac OS X 10.6.7 (10J869)
Report Version: 6
Interval Since Last Report:          -4164908 sec
Crashes Since Last Report:           8
Per-App Crashes Since Last Report:   11
Anonymous UUID:                      45357CCD-011B-482E-A2EA-CF42096F1321
Exception Type: EXC_BREAKPOINT (SIGTRAP)
Exception Codes: 0x0000000000000002, 0x0000000000000000
Crashed Thread: 0
Dyld Error Message:
Library not loaded: /Library/Frameworks/iLifeSlideshow.framework/Versions/A/iLifeSlideshow
Referenced from: /Applications/iPhoto.app/Contents/MacOS/iPhoto
Reason: no suitable image found. Did find:
          /Library/Frameworks/iLifeSlideshow.framework/Versions/A/iLifeSlideshow: mach-o, but wrong architecture
          /Library/Frameworks/iLifeSlideshow.framework/Versions/A/iLifeSlideshow: mach-o, but wrong architecture
Binary Images:
0x8fe00000 - 0x8fe4162b dyld 132.1 (???) <1C06ECD9-A2D7-BB10-AF50-0F2B598A7DEC> /usr/lib/dyld
Model: iMac10,1, BootROM IM101.00CC.B00, 2 processors, Intel Core 2 Duo, 3.06 GHz, 4 GB, SMC 1.53f13
Graphics: ATI Radeon HD 4670, ATI Radeon HD 4670, PCIe, 256 MB
Memory Module: global_name
AirPort: spairport_wireless_card_type_airport_extreme (0x168C, 0x8F), Atheros 9280: 2.1.14.5
Bluetooth: Version 2.4.0f1, 2 service, 19 devices, 1 incoming serial ports
Network Service: Built-in Ethernet, Ethernet, en0
Serial ATA Device: ST31000528ASQ, 931.51 GB
Serial ATA Device: OPTIARC DVD RW AD-5680H
USB Device: USB2.0 Hub, 0x05e3 (Genesys Logic, Inc.), 0x0608, 0x24300000
USB Device: Built-in iSight, 0x05ac (Apple Inc.), 0x8502, 0x24400000
USB Device: External HDD, 0x1058 (Western Digital Technologies, Inc.), 0x0901, 0x26400000
USB Device: Internal Memory Card Reader, 0x05ac (Apple Inc.), 0x8403, 0x26500000
USB Device: IR Receiver, 0x05ac (Apple Inc.), 0x8242, 0x04500000
USB Device: BRCM2046 Hub, 0x0a5c (Broadcom Corp.), 0x4500, 0x06100000
USB Device: Bluetooth USB Host Controller, 0x05ac (Apple Inc.), 0x8215, 0x06110000

Please let me know when you find a fix. I did the same thing and have tried every suggestion I can find online. The message I get is...
Process:         iPhoto [4991]
Path:            /Applications/iPhoto.app/Contents/MacOS/iPhoto
Identifier:      com.apple.iPhoto
Version:         ??? (???)
Build Info:      iPhotoProject-6070000~1
Code Type:       X86 (Native)
Parent Process: launchd [142]
Date/Time:       2011-06-13 23:39:38.485 +1200
OS Version:      Mac OS X 10.6.7 (10J869)
Report Version: 6
Interval Since Last Report:          -1643976 sec
Crashes Since Last Report:           35
Per-App Crashes Since Last Report:   12
Anonymous UUID:                      D4811036-EA8D-479D-8D9F-11E2FC8F6D4C
Exception Type: EXC_BREAKPOINT (SIGTRAP)
Exception Codes: 0x0000000000000002, 0x0000000000000000
Crashed Thread: 0
Dyld Error Message:
Library not loaded: /Library/Frameworks/iLifeSlideshow.framework/Versions/A/iLifeSlideshow
Referenced from: /Applications/iPhoto.app/Contents/MacOS/iPhoto
Reason: no suitable image found. Did find:
          /Library/Frameworks/iLifeSlideshow.framework/Versions/A/iLifeSlideshow: mach-o, but wrong architecture
          /Library/Frameworks/iLifeSlideshow.framework/Versions/A/iLifeSlideshow: mach-o, but wrong architecture
Binary Images:
0x8fe00000 - 0x8fe4162b dyld 132.1 (???) <1C06ECD9-A2D7-BB10-AF50-0F2B598A7DEC> /usr/lib/dyld
Model: MacBookPro7,1, BootROM MBP71.0039.B0B, 2 processors, Intel Core 2 Duo, 2.4 GHz, 4 GB, SMC 1.62f6
Graphics: NVIDIA GeForce 320M, NVIDIA GeForce 320M, PCI, 256 MB
Memory Module: global_name
AirPort: spairport_wireless_card_type_airport_extreme (0x14E4, 0x8D), Broadcom BCM43xx 1.0 (5.10.131.36.9)
Bluetooth: Version 2.4.0f1, 2 service, 19 devices, 1 incoming serial ports
Network Service: AirPort, AirPort, en1
Serial ATA Device: Hitachi HTS545025B9SA02, 232.89 GB
Serial ATA Device: MATSHITADVD-R   UJ-898, 3.5 GB
USB Device: Internal Memory Card Reader, 0x05ac (Apple Inc.), 0x8403, 0x26100000
USB Device: Built-in iSight, 0x05ac (Apple Inc.), 0x8507, 0x24600000
USB Device: BRCM2046 Hub, 0x0a5c (Broadcom Corp.), 0x4500, 0x06600000
USB Device: Bluetooth USB Host Controller, 0x05ac (Apple Inc.), 0x8213, 0x06610000
USB Device: IR Receiver, 0x05ac (Apple Inc.), 0x8242, 0x06500000
USB Device: Apple Internal Keyboard / Trackpad, 0x05ac (Apple Inc.), 0x0236, 0x06300000
I have reinstalled Mac OSX 10.6.3 and done the updates from there.
I have reinstalled ilife 11 from disk and done the updates.
I have deleted all the suggested files and then redone install and updates.
I have tried just reinstalling iphoto and doing updates.
Is there any way to get a replacement - /Library/Frameworks/iLifeSlideshow.framework/Versions/A/iLifeSlideshow
file with the right architecture?

How do we split our iCloud accounts but keep one iTunes account so we can share purchased content for our multiple iPhones and iPads?

How do we split our iCloud accounts but keep one iTunes account so we can share purchased content for our multiple iPhones and iPads?

You can migrate a copy of the data to a new account, then delete the other person's data from each account. To do this, on the phone that will be changing accounts, if you have any photos in photo stream that you want to keep on the phone, save these to your camera roll by opening the photo stream album in the thumbnail view, tapping Edit, then tap all the photos you want to save, tap Share and tap Save to Camera Roll. If you have any synced notes that you want to keep on the phone, email these to yourself so you can create new notes in the new account.
Once this is done, go to Settings>iCloud, scroll to the bottom and tap Delete Account. (This will only delete the account from this phone, not from iCloud. The phone that will be keeping the account will not be effected by this.) When prompted about what to do with the iCloud data, be sure to select Keep On My iPhone. Next, set up a new iCloud account using a different Apple ID (if you don't have one, tap Get a Free Apple ID at the bottom). Then turn iCloud data syncing for contacts, etc. back to On, and when prompted about merging with iCloud, choose Merge. This will upload the data to the new account. You will create a new icloud email address with you turn Mail to On.
Finally, to un-merge the data you will then have to go to icloud.com on your computer and sign into each iCloud account separately and manually delete the data you don't want (such as deleting your wife's data from your account, and vice versa).

Family sharing one Itunes account, want to remove all of their computers content from my library... help

My family shares one Itunes account and I believe it was home sharing that brought all of their music, purchases, movies, etc. onto my Mac's Itunes Library. I want to remove all of their content from it. I turned off Homesharing and that didn't work. All of their music is on my computer and synchs to my Iphone and it's driving me nuts. Please help !

You can deauthorise all 5 at once, then reauthorize the one you want.
Learn how to authorize or deauthorize your computer with your Apple ID.
http://support.apple.com/kb/HT1420
You need to log into iTunes on the computer you want to deauthorise. Otherwise, contact contact iTunes Store support to see if they can help.

HT4557 whats the best itunes/appleID setup for family of 3 with 3 ipads, 3 iphones, one PC with all music on. if we use 3 separate ones how do we share purchased and home content?

been with apple for years. one itunes/appleID in use for family - all purchases and downloads on the one account..
now got 3 ipads, 3 iphones and when we update the software, we seem to get text/facetime issues due to multiple email addresses and phone numbers for the different devices that each individual uses. For example, I send a text and it appears to have come from my wife or son to the recipient. Not good !
there seems to be direction from apple that each of us should use our own apple id, thogh how do I link the accounts so enable family sharing of music/media we have purchased etc - Id also like to be able to review and keep a private eye on what my son downloads as he is 11 yrs old ! I manage this currently as we allow him access to the password for itunes (as we all use the same id today)
Am i better setting up accounts for my wife and son independent of my own, or not. Each of us would like access to the family content we have and the master library of synced content. I just want the most simplistic approach that apple, or others would recommend.
Is there a better or optimum setup for a family as we cannot be alone.....

Thanks for the help, but a follow up question now.
My iPhone won't arrive for a little while, but my wife already got hers and she wants to set it up now. Using my Apple ID for the purchases, if she starts setting hers up, can she change her iCloud ID to something else quickly? It keeps telling us that we have to sign in with the AppleID first.
Should we just set up an iCloud account via normal internet before trying all this via iPhone?

How do I separate the content of two iTunes accounts on one PC running Windows 7?

Hello. I have a dilemma that has been going on for years and am hopeful that someone can outdo the staff at the Apple Store Genius Bar who, after trying multiple times, could not solve this problem. This is a doozie, so get comfortable...
My wife and I have two separate iTunes accounts. For clarity, this is two separate iTunes store accounts, where we each can log in with a separate e-mail address and password. Years ago, she had her own laptop from which she accessed iTunes and synced her iPhone without any issues. I used another laptop to sync my iPhone, and all was well until the hard drive on my wife's laptop crashed.
After that, my wife logged into iTunes on my laptop and connected her iPhone to my laptop to sync up, but we found that all of the apps and data on her iPhone synced to my iTunes account. When I connected my iPhone to the laptop to sync up, all of the content of her iPhone synced to my iPhone. Also, when she connected to the laptop and synced her iPhone, all of my content synced to her phone. So, she stopped connecting her iPhone to the laptop because we were not able to find a way to separate my content from her content when we sync our phones.
To make it more complicated, any app that we both run on our iPhone (e.g. Facebook, Yelp, etc.) is somehow "registered" under my account on her iPhone. So, if any apps that we both use have an updated version, she is prompted to first enter her iTunes password to authorize the download for apps that only she runs, and then for my password to authorize apps that we both run. In other words, her iPhone is somehow permanently linked to my iTunes account.
Now, to make this even more interesting, let me add another level of despair. When iOS 5 was released in 2011, we tried to update her iPhone by installing the new OS but the OS crashed during the install. All of the apps that she had installed on her phone, including new contacts, were lost because she had not synced to the laptop for some time. When the iPhone was restored and iOS5 was installed at the Apple Store, we learned that all contacts and pictures stored there were lost. Fortunately the apps that she purchased were saved because they were still stored on her iTunes account, but still are only accessible through my iTunes account on the laptop since all of the content is merged, as mentioned above. Also, when we restored them, she got all apps (mine and hers) so she had to manually delete mine which took a lot of time. So, consequently she is still running iOS 5 because we don't want to deal with the hassle of losing any data or having to manually delete my apps from her iPhone.
So, I am extremely hopeful that someone can demonstrate some intellectual "heavy lifting" and can help us to answer the following questions:
1) How can we set up iTunes so that our content is separated rather than stored completely on my iTunes account?
2) How can we modify the settings in iTunes and/or iPhone so that we will only access our own content upon connecting to the laptop? (Note: I realize that iCloud makes it unnecessary to sync via USB but occasionally use the computer to charge my iPhone and it syncs automatically)
3) How can we modify the settings on her iPhone so that it does not recognize mutual apps as "my" apps and prompt her to enter my iTunes password to update them when a new release is available?
4) If she were to install the current version of iOS, how can we ensure that her data will not be lost if the software crashes again?
Whoever can figure this out gets to brag about being the coolest person in the world, at least in my book. Thanks in advance.

Look here.
http://support.apple.com/kb/index?page=answerlink&url=http%3A%2F%2Fsupport.apple .com%2Fkb%2FHT1495&answerid=16777216&src=support_site.home.search

VTabbedPanels Content

Similar Messages

Maybe you are looking for