Tabbed Panels display problem

I'm trying to add a spry tabbed panel to a website. When I preview it - there are bullets next to the tabs. How do I eliminate them?

I have run into a similar problem occasionally, and have also noticed that it only affects the view in Design View in the Document Window.
In my experience, your best bet is to edit your material in Code View (it doesn't jump around at all there!). Another strategy is to turn off some of your visual editing aids, in case they are the cause of your tabbed panels jumping.
As you will see in Code View, the tabs themselves live in one section of the code and the corresponding panels live in a section lower down. If you are careful, you should have no trouble at all editing directly in Code View.
Beth

Similar Messages

Spry tabbed panels display

I have Spry Tabbed panels and all my content is suddenly displaying in the first, default tab. Also, the turquoise "Spry Tabbed Panels" is missing from the top of my widget. This has happened on three different pages so far, and all I have found is that I must insert a new tabbed panel. My <div> codes all match up, so I'm stumped. Any help would be really appreciated.

Source Code in this post
<!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>
    
    <title>BCCA Library - Abstracts</title>
    <meta name="Description" content="Designed and developed by Codify Design Studio - codifydesign.com" />
    
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    
</head>
    <body>
        <div class="bannerArea">
      <div class="container">
                <div class="bannernav"><a href="http://www.bccancer.bc.ca/" target="_blank" >BC Cancer Agency</a> • <a href="http://POD" target="_blank" >POD</a> • <a href="http://www.phsa.ca" target="_blank" >PHSA </a>• <a href="mailto:[email protected]?subject='Contact Us' from Library Links" >Contact Us</a></div>
                <div class="toplogo"><a href="index.html" target="_parent"><img src="images/liblinks_infobase.png" alt="Library Links Home Page" hspace="135" border="0" /></a></div>
                <div style="clear:both;"></div>
          </div>
    </div>
        <div class="topnavigationArea">
            <div class="container">
                <div class="topnavigationgroup">
                    <ul id="MenuBar1" class="MenuBarHorizontal">
                      <li><a href="databases.html" class="MenuBarItemSubmenu">Databases</a>
                        <ul>
                          <li><a href="databases.html">All Databases</a></li>
                          <li><a href="remote.html">Remote Access</a></li>
                          <li><a href="mobile.html">Mobile Resources</a></li>
<li><a href="training_bcca.html">Training</a></li>
<li><a href="autoalerts.html">AutoAlerts</a></li>
<li><a href="primal.html">Primal Pictures</a></li>
                        </ul>
                      </li>
                      <li><a class="MenuBarItemSubmenu" href="journals.html">Journals</a>
                        <ul>
                          <li><a href="journals.html" class="MenuBarItemSubmenu">Journals</a>
                            <ul>
                              <li><a href="http://atoz.ebsco.com/home.asp?Id=BCCA230F" target="_blank">BCCA A-Z e-journals</a></li>
                              <li><a href="http://bcca.andornot.com/results.aspx?TN=bccacat&QY=find%20(Format%20ct%20Serial)%20not%20 (Status%20%3DDiscarded%20%2F%20%3DMissing)%20and%20(Location%20ct%20library)&RF=WebBriefDa te&DF=WebFull&BU=http%3A%2F%2Fbcca.andornot.com%2Fdefault.htm&MR=10&NP=255&RL=0&DL=0&MF=bc cawpmsg.ini&AC=QBE_QUERY" target="_blank">Print Journals BCCA</a></li>
                              <li><a href="http://toby.library.ubc.ca/ejournals/ejournals.cfm/" title="UBC Print and E-journals" target="_blank">UBC Journals</a></li>
<li><a href="mailto:[email protected]?subject=Request articles" title="Request articles from BCCA Library">Request Articles</a></li>
                            </ul>
                          </li>
                          <li><a href="ebooks.html">E-books</a></li>
                          <li><a href="abstracts.html">Abstracts/Conferences</a></li>
                          <li><a href="remote.html">Remote Access</a></li>
                          <li><a href="mailto:[email protected]?subject=Request articles">Request Articles</a></li>
                        </ul>
                      </li>
                      <li><a href="refworks.html">RefWorks</a></li>
                      <li><a href="catalogues.html" class="MenuBarItemSubmenu">Catalogues</a>
                        <ul>
                          <li><a href="catalogues.html">Catalogues</a></li>
                          <li><a href="http://bcca.andornot.com/" title="BCCA Library Catalogue" target="_blank" class="MenuBarItemSubmenu">BCCA</a>
                            <ul>
                              <li><a href="http://bcca.andornot.com/topics.htm" title="Automated Searches" target="_blank">Popular Topics</a></li>
                              <li><a href="ebooks.html" target="_blank">E-books</a></li>
<li><a href="http://tinyurl.com/4jmvwpn" title="Books added this month" target="_blank">BCCA New Books</a></li>
                            </ul>
                          </li>
                          <li><a href="http://library.ubc.ca/" title="UBC Library Catalogue" target="_blank" class="MenuBarItemSubmenu">UBC</a>
                            <ul>
                              <li><a href="http://toby.library.ubc.ca/ejournals/ejournals.cfm/" title="UBC Print and E-journals" target="_blank">UBC Journals</a></li>
                              <li><a href="http://webcat2.library.ubc.ca/vwebv/searchBasic/" title="UBC Books & more" target="_blank">UBC Books</a></li>
                              <li><a href="http://services.library.ubc.ca/borrowing/library-cards/" target="_blank">UBC Library Cards</a></li>
                              <li><a href="http://www.it.ubc.ca/cwl/homelink.shtml/" title="Campus Wide Login" target="_blank">Campus Wide Login</a></li>
                              <li><a href="http://www.library.ubc.ca/home/proxyinfo/" title="Connect from Home" target="_blank">VPN / EZ Proxy</a></li>
                              <li><a href="mailto:[email protected]?subject=Request Articles" title="Request from BCCA Library">Request Articles</a></li>
                            </ul>
                          </li>
                          <li><a href="http://library.sfu.ca/" title="SFU Library Catalogue" target="_blank">SFU</a></li>
                          <li><a href="http://www.bcit.ca/library/" title="BCIT Library Catalogue" target="_blank">BCIT</a></li>
                          <li><a href="http://www.ncbi.nlm.nih.gov/sites/entrez?db=nlmcatalog" title="National Library of Medicine Catalogue" target="_blank">NLM (U.S.)</a></li>
                          <li><a href="http://library.unbc.ca/" title="UNBC Library Catalogue" target="_blank">UNBC </a></li>
                          <li><a href="http://www.ubc.ca/okanagan/library/welcome.html" title="UBC Okanagan Library" target="_blank">UBC Okanagan</a></li>
                          <li><a href="http://library.uvic.ca/" title="U Vic Library Catalogue" target="_blank">U Victoria</a></li>
                          <li><a href="http://www.vpl.ca/" title="Vancouver Public Library" target="_blank">Vancouver Public </a></li>
                        </ul>
                      </li>
                      <li><a href="professional.html" class="MenuBarItemSubmenu">Professional Practice</a>
                        <ul>
<li><a href="abstracts.html">Abstracts/Conferences</a></li>
<li><a href="admin.html">Administration</a></li>
<li><a href="guidelines.html">Cancer Guidelines</a></li>
                          <li><a href="nursing.html">Nursing</a></li>
                          <li><a href="nutrition.html">Nutrition</a></li>
                          <li><a href="pharmacy.html">Pharmacy</a></li>
                          <li><a href="physicians.html">Physicians</a></li>
                          <li><a href="psychosocial.html">Psychosocial</a></li>
                          <li><a href="rt.html">RT / Physics</a></li>
                          <li><a href="researchers.html">Researchers</a></li>
                          <li><a href="writers.html">Writing & Authors</a></li>
                        </ul>
                      </li>
                      <li><a href="training_bcca.html" class="MenuBarItemSubmenu">Training</a>
                        <ul>
                          <li><a href="training_bcca.html" class="MenuBarItemSubmenu">Training Home Page</a>
                            <ul>
                              <li><a href="orientations.html" title="Staff Orientations">Staff Orientations</a></li>
<li><a href="training_ac.html">AC Training</a></li>
                              <li><a href="training_csi.html" title="CSI Training">SAHCSI Training</a></li>
                              <li><a href="training_fvc.html">FVC Training</a></li>
                              <li><a href="training_vc.html" title="VC Training">VC Training</a></li>
                              <li><a href="training_vic.html">VIC Training</a></li>
                            </ul>
                          </li>
                          <li><a href="https://edreg.cw.bc.ca/phsaedcalendar/Home.aspx" target="_blank">Learning Hub</a></li>
                          <li><a href="orientations.html" title="Staff Orientations">Staff Orientations</a></li>
                          <li><a href="primal.html">Primal Pictures</a></li>
                        </ul>
                      </li>
                      <li><a href="library.html" class="MenuBarItemSubmenu">Library Services</a>
                        <ul>
<li><a href="#" class="MenuBarItemSubmenu">Contacts & Info</a>
<ul>
<li><a href="../Documents/VC_Staff_Information_Sheet.pdf">VC - Vancouver</a></li>
<li><a href="../Documents/VIC_Staff_Information_Sheet.pdf">VIC - Victoria</a></li>
<li><a href="../Documents/SAHCSI_Staff_Information_Sheet.pdf">SAHCSI - Kelowna</a></li>
<li><a href="../Documents/FVC_Staff_Information_Sheet.pdf">FVC - Surrey</a></li>
<li><a href="../Documents/AC_Staff_Information_Sheet.pdf">AC - Abbotsford</a></li>
<li><a href="../Documents/CN_Staff_Information_Sheet_Library.pdf">CN - Prince George</a></li>
<li><a href="http://www.bccancer.bc.ca/PPI/Library/Contacts.htm" target="_blank">Library webpage</a></li>
</ul>
</li>
<li><a href="mailto:[email protected]?subject=Request a Search" title="Request a Search">Request a Search</a></li>
<li><a href="mailto:[email protected]?subject=Request Article(s)" title="Request Articles">Request Articles</a></li>
                          <li><a href="http://www.bccancer.bc.ca/PPI/RecommendedLinks/default.htm" target="_blank">Recommended Websites</a></li>
                          <li><a href="autoalerts.html" title="AutoAlert Searches">AutoAlert Searches</a></li>
                          <li><a href="orientations.html" title="Staff Orientations">Staff Orientations</a></li>
                          <li><a href="pamphlets.html" title="May need an install from IMIT">Pamphlets Database</a></li>
                          <li><a href="publications.html">Publications</a></li>
                          <li><a href="copyright.html" title="Copyright">Copyright</a></li>
                          <li><a href="patients_reading.html">What patients are reading</a></li>
                          <li><a href="patients.html" title="Services for Patients">Services for Patients</a></li>
                          <li><a href="archives.html">Archives</a></li>
                        </ul>
                      </li>
                    </ul>
</div>
                <div style="clear:both;"> </div>
            </div>
        </div>
        <div class="contentArea">
            <div class="container">
            
            <div class="contentleft">
              <h1>Abstracts and Conferences</h1>
              <div id="TabbedPanels1" class="VTabbedPanels">
                <ul class="TabbedPanelsTabGroup">
                  <li class="TabbedPanelsTab" tabindex="0"> AACR</li>
                  <li class="TabbedPanelsTab" tabindex="0"> ASCO</li>
                  <li class="TabbedPanelsTab" tabindex="0"> ASH</li>
                  <li class="TabbedPanelsTab" tabindex="0"> ASTRO</li>
                  <li class="TabbedPanelsTab" tabindex="0"> CARO</li>
                  <li class="TabbedPanelsTab" tabindex="0"> ECCO</li>
                  <li class="TabbedPanelsTab" tabindex="0"> ESMO</li>
                  <li class="TabbedPanelsTab" tabindex="0"> ESTRO</li>
                  <li class="TabbedPanelsTab" tabindex="0"> ISPOR</li>
                  <li class="TabbedPanelsTab" tabindex="0"> San Antonio </li>
                  <li class="TabbedPanelsTab" tabindex="0"> UICC</li>
                  <li class="TabbedPanelsTab" tabindex="0"> Finding and Citing</li>
                </ul>
                <div class="TabbedPanelsContentGroup">
                  <div class="TabbedPanelsContent">
                    <h2>AACR - <a href="http://www.aacr.org/" target="_blank">American Association for Cancer Research</a></h2>
<p>These abstracts are available in two places - from the <strong>AACR</strong> website and from the journal <strong>Cancer Research.</strong></p>
<p> </p>
                    <p><strong>1. Cancer Research. 2009-present</strong>. </p>
                    <blockquote>
                      <p>These abstracts were published in the journal <em>Cancer Research</em>. They can be downloaded from the journal to RefWorks.
                        Use Advanced Search at <a href="http://cancerres.aacrjournals.org/search" target="_blank">http://cancerres.aacrjournals.org/search</a>.
                        Check the "Search Only Meeting Abstracts" box. You can also limit your search to April of the year you want.</p>
                      <p> </p>
                      <p><img src="images/AACR_search_meetings.jpg" alt="Search meetings" width="226" height="55" border="1" /></p>
                    </blockquote>
                    <h3>2. <a href="http://www.aacrmeetingabstracts.org/search.dtl" target="_blank">AACR online - <strong>2004-2010</strong></a></h3>
                    <blockquote>
                      <p>This online searchable database has the capability to download to RefWorks. </p>
                      <p> </p>
                      <p>Try to avoid using the sections called <em>Specify Journals to Search </em>and <em>Specify Meetings to Search</em>.                    They occasionally cause the search to fail without explanation.</p>
                    </blockquote>
                    <blockquote>
                      <p><strong>Warning</strong>: If you download these abstracts to RefWorks, they download as 'Journal Articles'. For your own sake, you should change the Reference Type to 'Abstract'. (see below)</p>
                    </blockquote>
                    <p><strong>3.</strong> <strong>1982-2004 </strong>(Volumes 23-45)</p>
                    <blockquote>
                      <p>The BCCA VC Library has print copies of AACR abstract books. Some older versions may need to be retrieved from Storage.</p>
                    </blockquote>
                    <h3>AACR Education Book <a href="http://educationbook.aacrjournals.org/search.dtl" target="_blank">2005-current</a></h3>
                    <blockquote>
                      <p><strong>Warning</strong>: If you download these abstracts to RefWorks, they download as 'Journal Articles'. For your own sake, you should change the Reference Type to 'Abstract'. (see below)</p>
                    </blockquote>
                    <h3>RefWorks: Change Reference Type to 'Abstract'</h3>
                    <h3> </h3>
                    <p><img src="images/RW_abstracts.jpg" alt="Change the Reference Type" width="423" height="440" border="1" /></p>
                    <p> </p>
                    <h3>Webcasts of 2012 AACR Meeting</h3>
                    <p> </p>
                    <p><a href="http://www.aacr.org/page29436.aspx" target="_blank"><img src="images/AACR_2012_webcasts.jpg" alt="Webcasts from 2012 conference" width="325" height="180" border="1" /></a></p>
                    <p> </p>
                    <h3>AACR 2013</h3>
                    <p> </p>
                    <p><a href="http://www.aacr.org/home/scientists/meetings--workshops/aacr-annual-meeting-2013.aspx" target="_blank"><img src="images/AACR_2013.jpg" alt="AACR 2013" width="154" height="200" border="1" /></a></p>
                    <p><br />
                    </p>
                  </div>
                  <div class="TabbedPanelsContent">
                    <h3>ASCO - <a href="http://www.asco.org/" target="_blank">American Society of Clinical Oncology</a></h3>
                    <p><br />
                      These abstracts are available in two places - from the journal <strong>JCO</strong> and from the <strong>ASCO</strong> Conference website. </p>
                    <p> </p>
                    <h3>1. <a href="http://jco.ascopubs.org/search.dtl">JCO</a> - 2004-current </h3>
                    <p>These references can be downloaded to RefWorks. Restrict your search of JCO by ticking the box "Specify Sources to Search":</p>
                    <blockquote>
                      <p><img src="images/asco_jco.jpg" alt="" width="411" height="79" /></p>
                    </blockquote>
                    <br />
                    <h3>2. <a href="http://jco.ascopubs.org/search.dtl" target="_blank">ASCO</a> - 2007-current</h3>
                    <p> This database is searchable, <strong>but you</strong> <strong>can't download to RefWorks</strong>. You may use copy and paste to add these abstracts to RefWorks.</p>
                    <blockquote>
                      <p><a href="http://www.asco.org/ASCOv2/Meetings/Abstracts" target="_blank">2007 - 2011</a><br />
                      </p>
                      <p> </p>
                      <p> </p>
                    </blockquote>
                    <h3>ASCO 2013 </h3>
                    <h3> <strong>May 31-June 4, 2013 | McCormick Place | Chicago, Illinois</strong></h3>
                    <p> </p>
                    <p><a href="http://chicago2013.asco.org/" target="_blank"><img src="images/ASCO_2013.jpg" width="366" height="260" /></a></p>
                  </div>
                  <div class="TabbedPanelsContent">
                    <h3>ASH - <a href="http://www.hematology.org/" target="_blank">American   Society of Hematology</a></h3>
                    <h3><br />
                      Abstracts</h3>
                    <p>Published in <em>Blood</em>, these abstracts can be downloaded to RefWorks.</p>
                    <p><a href="http://abstracts.hematologylibrary.org/content/vol118/issue21/" target="_blank">2011</a></p>
                    <p><a href="http://abstracts.hematologylibrary.org/content/vol116/issue21/" target="_blank">2010</a></p>
                    <p><a href="http://bloodjournal.hematologylibrary.org/misc/ASH_Meeting_Abstracts_Info.dtl" target="_blank">2007-current</a></p>
                    <p><strong><br />
                      Hematology, </strong>the <em><strong>Education Program Book</strong></em>.<br />
                    </p>
                    <p><em><strong><a href="http://www.asheducationbook.org/contents-by-date.0.shtml" target="_blank">Hematology</a></strong></em> is published annually by the American Society of   Hematology (ASH) in one volume per year. The <em>Education Program Book</em> provides review articles from the Education Program from the ASH Annual Meeting. In this book, each chapter relates to a session presented at the meeting</p>
                    <p> </p>
                    <p><a href="http://asheducationbook.hematologylibrary.org/content/current">Current issue</a></p>
                    <p><a href="http://www.asheducationbook.org/contents-by-date.0.shtml">Previous issues</a>.</p>
                    <p> </p>
                    <h3>ASH 2012 - Atlanta - December 8-12, 2012</h3>
                    <p> </p>
                    <p><a href="http://www.hematology.org/meetings/annual-meeting/"><img src="images/ASH_2012.jpg" width="440" height="275" alt="ASH 2012" /></a></p>
                    <p> </p>
                    <p> </p>
                    <p> </p>
                  </div>
                  <div class="TabbedPanelsContent">
                    <h3>ASTRO - <a href="https://www.astro.org/" target="_blank">American Society for Radiation Oncology</a></h3>
                    <h3><a href="http://www.redjournal.org/content/astro_abstracts" target="_blank">Abstracts</a> - from the annual conference</h3>
                    <p>These abstracts can be downloaded to RefWorks.</p>
                    <p> </p>
                    <p><a href="http://www.astro.org" target="_blank">ASTRO</a>’s role in research includes the promotion and support of basic,   translational, clinical and outcomes/health services research and training in radiation oncology, biology and physics. These activities are facilitated through the ASTRO Research Council.</p>
                    <p> </p>
                    <p>Founded in 1958, ASTRO’s mission is to advance the practice of radiation oncology by promoting excellence in patient care, providing opportunities for educational and professional development, promoting research and disseminating research results and representing radiation oncology in a rapidly evolving healthcare environment.</p>
                    <blockquote>
                      <blockquote>
                        <blockquote>
                          <p><em>from:</em> <a href="http://www.astro.org/AboutUs/index.aspx" target="_blank">www.astro.org/AboutUs/index.aspx</a></p>
                          <p> </p>
                        </blockquote>
                      </blockquote>
                    </blockquote>
                    <h3>ASTRO 2012 - Boston - October 28-31, 2012</h3>
<p> </p>
<p><a href="https://www.astro.org/Meetings-and-Events/2012-Annual-Meeting/Index.aspx" target="_blank"><img src="images/ASTRO_2012.jpg" alt="ASTRO_2012" width="440" height="108" border="1" /></a></p>
                    <p> </p>
                    <p> </p>
                  </div>
                  <div class="TabbedPanelsContent">
                    <h3>CARO - <a href="http://www.caro-acro.ca" target="_blank">Canadian Association of Radiation Oncology</a></h3>
                    <p> </p>
                    <p>The abstracts are published in print, in <em><a href="http://www.sciencedirect.com/science/journal/01678140" target="_blank">Radiotherapy & Oncology</a></em>. All abstracts are listed in a .pdf document and are not downloadable to RefWorks. To add these abstracts to RefWorks or other citation managers, you must copy and paste.<br />
                    </p>
                    <p> </p>
                    <p>2011 not yet available (as of Mar 1/12)</p>
                    <p><a href="http://www.sciencedirect.com/science/journal/01678140/96/supp/S2" target="_blank">2010</a> 96 Suppl 2</p>
                    <p><a href="../Documents/caro_2009_green_journal_abstracts_sept2.pdf" target="_blank">2009</a> (not yet published in R&O, but the Libary has a copy in .pdf format.)</p>
                    <p><a href="http://tiny.cc/j4q2r" target="_blank">2008</a> 88 Suppl 1<br />
                      <a href="http://www.sciencedirect.com/science/journal/01678140/84/supp/S2" target="_blank">2007</a> 84 Suppl 2</p>
                    <p><a href="http://www.sciencedirect.com/science/journal/01678140/80/supp/S1" target="_blank">2006</a> 80 Suppl 1</p>
                    <p><a href="http://www.sciencedirect.com/science/journal/01678140/76/supp/S1" target="_blank">2005</a> 76 Suppl 1</p>
                    <p><a href="http://www.sciencedirect.com/science/journal/01678140/72/supp/S1" target="_blank">2004</a> 72 Suppl 1</p>
                    <p><a href="http://www.sciencedirect.com/science/journal/01678140/69/supp/S1" target="_blank">2003</a> 69 Suppl 1</p>
                    <p><a href="http://www.sciencedirect.com/science/journal/01678140/65/supp/S1" target="_blank">2002</a> 65 Suppl 1</p>
                    <p><a href="http://www.sciencedirect.com/science/article/pii/S0360301601016728" target="_blank">2001</a> These abstracts were published in <em>Int J Radiat Oncol Biol   Phys;</em>50(5):1380-1418<strong>.</strong></p>
                    <p> </p>
                    <p> </p>
                    <h4>CARO 2012 - Ottawa - Sept 12-15</h4>
                    <p><img src="images/CARO_2013.jpg" width="384" height="192" /></p>
                  </div>
                  <div class="TabbedPanelsContent">
                    <h3>ECCO - <a href="http://www.ecco-org.eu/" target="_blank">European CanCer Organization</a></h3>
                    <p> </p>
                    <p><a href="http://www.ecco-org.eu/Conferences/Conferences/Past-conferences.aspx" target="_blank">Past Conferences</a></p>
                    <ul>
                      <li><a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html" target="_blank">ECCO 16 2011</a> or <a href="http://www.ejcancer.info/issues" target="_blank">EJC Volume 47 Suppl 1</a></li>
                      <li><a href="http://www.ecco-org.eu/ecco_content/ECCO15_AbstractBook/index.html" target="_blank">ECCO 15 2009</a></li>
                      <li><a href="http://www.ecco-org.eu/ecco_content/ECCO14_AbstractBook/index.html" target="_blank">ECCO 14 2007</a> or CD-ROM in Library: QZ200 E88 2007 vol. 2</li>
                      <li><a href="http://www.ecco-org.eu/ecco_content/ECCO13_abstractbook/index.html#/1/zoomed" target="_blank">ECCO 13 2005</a> or CD-ROM in Library: QZ200 E88 2005 vol. 2</li>
                    </ul>
                    <p>Education Books</p>
                    <ul>
                      <li>ECCO 15 2009 <a href="http://www.ejcancer.info/issues" target="_blank">EJC Volume 45 Suppl 1</a> or CD-ROM in Library: QZ200 J74 2009</li>
                      <li>ECCO 14 2007 CD-ROM in VC Library: QZ200 E88 2007 vol. 1</li>
                      <li>ECCO 13 2005 CD-ROM in VC Library: QZ200 E88 2005 vol. 1</li>
                    </ul>
                    <h3>ECCO 2013</h3>
                    <p> </p>
                    <p><a href="http://eccamsterdam2013.ecco-org.eu/" target="_blank"><img src="images/ECCO_2013.jpg" width="384" height="165" border="1" /></a></p>
                  </div>
                  <div class="TabbedPanelsContent">
                    <h3>ESMO - <a href="http://www.esmo.org/" target="_blank">European Society for Medical Oncology</a></h3>
                    <p><a href="http://www.esmo.org/education-research/abstracts-virtual-meetings-and-meeting-reports.html">List of meetings</a></p>
                    <p> </p>
                    <p><a href="http://www.esmo.org/education-research/educational-books.html" target="_blank">ESMO Educational books</a></p>
                    <p>ESMO 36 2011 European Journal of Cancer <a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html">47 Suppl 1</a></p>
                    <p>ESMO 35 2010 : Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/21/suppl_8" target="_blank">21 Suppl 8</a> (Milan)</p>
                    <p>ESMO 34 2009 European Journal of Cancer Supplements <a href="http://www.ecco-org.eu/ecco_content/ECCO15_AbstractBook/index.html">7(2) Sept 2009</a> (Berlin)</p>
                    <p>or <a href="http://www.ejcancer.info/issues" target="_blank">EJC Volume 45 Suppl 1</a></p>
                    <p>ESMO 33 2008 Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/19/suppl_8.toc">19 Suppl 8</a> (Stockholm)</p>
                    <p>ESMO 32 2007 Annals of Oncology <a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html" target="_blank">18 Suppl 9</a> (Lugano)</p>
                    <p>ESMO 31 2006 Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/17/suppl_9.toc?etoc" target="_blank">17 Suppl 9</a> (Istanbul)</p>
                    <p>ESMO 29 2004 Annals of Oncology <a href="http://annonc.oxfordjournals.org/content/15/suppl_3.toc" target="_blank">15 Suppl 3</a> (Vienna)</p>
                    <p> </p>
                    <h3>ESMO 2013 Amsterdam</h3>
                    <p> </p>
                    <p><a href="http://eccamsterdam2013.ecco-org.eu/" target="_blank"><img src="images/ECCO_2013.jpg" width="384" height="165" border="1" /></a></p>
                  </div>
                  <div class="TabbedPanelsContent">
                    <h3>ESTRO - <a href="http://www.estro.org" target="_blank">European Society for Therapeutic Radiology and Oncology</a></h3>
                    <p> </p>
                    <p>Many of these abstracts are published in the green journal,<em> Radiotherapy & Oncology</em>. Some of the <a href="http://www.estro-members.org/publications/Pages/AbstractBooks.aspx" target="_blank">abstract books</a> are also available for download from the ESTRO website.</p>
                    <p>You can't download these abstracts to RefWorks.</p>
                    <p> </p>
                    <table width="479" border="0" cellspacing="1" cellpadding="3">
                      <tr align="left">
                        <th width="33" scope="row">2011*</th>
                        <td width="135">30th Annual Meeting</td>
                        <td width="289"><p>European Journal of Cancer <a href="http://www.ecco-org.eu/ecco_content/ECCO16_AbstractBook/index.html">47 Suppl 1</a></p></td>
                      </tr>
                      <tr align="left">
                        <th scope="row">2010</th>
                        <td>29th Annual Meeting</td>
                        <td><a href="http://www.estro-events.org/Documents/ESTRO29_report.pdf" target="_blank">Abstracts</a> (Barcelona) </td>
                      </tr>
                      <tr align="left">
                        <th valign="top" scope="row">2009*</th>
                        <td valign="top">28th Annual Meeting</td>
                        <td>(abstracts not available)(ECCO15 / ESTRO 28), Berlin 20-24 September, 2009?)</td>
                      </tr>
                      <tr align="left">
                        <th scope="row">2008</th>
                        <td>27th Annual Meeting</td>
                        <td>Radiotherapy & Oncology <a href="http://www.estro-members.org/publications/Documents/ESTRO2720AbstractBook.pdf" target="_blank">88 Suppl 2</a></td>
                      </tr>
                      <tr align="left">
                        <th scope="row">2007*</th>
                        <td>26th Annual Meeting</td>
                        <td>(abstracts not found)</td>
                      </tr>
                      <tr align="left">
                        <th scope="row">2006</th>
                        <td>25th Annual Meeting</td>
                        <td>Radiotherapy & Oncology <a href="http://www.sciencedirect.com/science?_ob=PublicationURL&_tockey=#TOC#5155#2006#999189999.8 998#665740#FLT#&_cdi=5155&_pubType=J&_auth=y&_acct=C000054470&_version=1&_urlVersion=0&_us erid=1766625&md5=971c04d2d708ca04155e86c400b96821" target="_blank">81 Suppl 1</a></td>
                      </tr>
                      <tr align="left">
                        <th scope="row">2005*</th>
                        <td>24th Annual Meeting</td>
                        <td>(abstracts not found)</td>
                      </tr>
                      <tr align="left">
                        <th scope="row">2004</th>
                        <td>23th Annual Meeting</td>
                        <td><a href="http://www.estro-members.org/publications/Documents/2AbstractbookESTRO23.pdf" target="_blank">online abstract book</a></td>
                      </tr>
                      <tr align="left">
                        <th scope="row">2003*</th>
                        <td>22th Annual Meeting</td>
                        <td>(abstracts not found)</td>
                      </tr>
                      <tr align="left">
                        <th scope="row">2002</th>
                        <td>21th Annual Meeting</td>
                        <td>Radiotherapy & Oncology <a href="http://www.sciencedirect.com/science/journal/01678140/64/supp/S1" target="_blank">64 Suppl 1</a></td>
                      </tr>
                      <tr align="left">
                        <th scope="row">2001</th>
                        <td>20th Annual Meeting</td>
                        <td>(abstracts not found)</td>
                      </tr>
                      <tr align="left">
                        <th scope="row">2000</th>
                        <td>19th Annual Meeting</td>
                        <td>Radiotherapy & Oncology <a href="http://www.sciencedirect.com/science/journal/01678140/56/supp/S1" target="_blank">56 Suppl 1</a></td>

Spry Tabbed Panels Display Issue

Hi-
I'm having an issue which involves 3 tabbed panels. Each panel has an image in it. When the page loads the 3 tabbed panel images display "stacked" for a few seconds and then disappear showing the default panel once the page is fully loaded.
Is there any way I can have the page load just showing the default #1 panel - without showing the content in the 2nd and 3rd panels?
I would provide a URL but I do not have it on a public domain yet.
Thanks for any advice.

Hi,
It is hard to guess where you have gone wrong with you modified CSS without actually seeing the code.
Have a look here for more background info.
I hope this helps.
Ben

Tabbed Panels displaying all content in first panel

I'm trying to add a tabbed panels widget to my site but when it displays in browsers, the content from all of the tabs displays as a list in the first tab, and clicking the rest of the tabs does nothing. I just put the out-of-the-box widget onto my site and that won't work either. W3 validating only came up with one error, being: (Line 104, Column 42: there is no attribute "tabindex" <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>)
The page I thew the widget on to test it is http://www.herbsmithrx.com/test.asp
What am I missing?

You are missing the javascript constructor script, which should have been inserted on your page below your widget when you inserted the tabbed panels:
Somehow, the script is appearing above your widget in your page. Place this code BELOW your tabbed panels widget on your page:
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
That should fix it right up.
Beth

Tabbed Panel float problem

Does anyone have an idea on how to stop the Spry tabbed panel
from dropping below the right menu on this page in Firefox (works
fine in IE):
http://www.ksu.edu/infotech/training/technologyWatch6.html

Hi,
I tried to find a solution for you design, but I see that are
a lot of containers there that have some properties influencing the
behavior in FF.
The right container, Container Events, forces the tabbed
panel to go down. So, here is an area where you can investigate the
behavior.
I saw that if I delete the "clear: both" property from the
Tabbed Panel widget, the problem changes because from the floats.
did you try also with other element: image, table...has the
same behavior? maybe is from the tabbed panel.
I think that you should retry to redesign the elements layout
in page.
Try to do a simple page whit this situation, maybe will find
exactly what causes this behavior.
Diana

Is there a way to use css media="print" to print all Spry tabbed panels

By setting up a special style sheet and calling that with media="print" I can control all other content that I want to appear in the printed webpage but since the tabbed panels display="none" or display="block" are controlled by the SpryTabbedPanels.js I haven't found a way to force all panels to be display="block" in the print style sheet.
The requirement is for a seminar timetable where each day is on a separate tab but if you want hard copy then printing all days in one go is best.
Any suggestions would be most welcome.

Yeah! I found the answer in another forum topic - See
http://forums.adobe.com/message/636534#636534
Use
<style type="text/css" media="print">
.TabbedPanelsTabGroup {
display: none !important;
.TabbedPanelsContent {
display: block !important;
overflow: visible !important;
height: auto !important;
</style>

Spry Tabbed Panels and Master/ Detail Page Set interraction

Hi,
I have created a feedback form and am using a Spry Tabbed Panel to allow users to review all responses to one question and then all responses to the next question in different tabs, there are 6 tabs in all. In each tab I have created a Master/ Detail Page set - well actually just the Master appears in the tab. This is working fine. I allow up to 20 responses to be shown on each tab, after which the user selects First/Previous/Next/Last. When they do this the screen refreshes and the tabbed panel display goes back to the default tab, clicking on the tab previously used correctly displays whichever of First/Previous/Next/Last the user selected. I'd like the display to remain on the user's current tab when they select First/Previous/Next/Last.
The page in question is here http://www.hollisterairshow.com/feedback-results2.php, then scroll about half way down the page and select one of the tabs.
Thanks.
Tony

Hi Tony,
Look at the following, blue coded is comment only, red coded is what has to be added to your existing code and orange coded is added by the SpryDataSet creator if done properly. Where the orange part starts, thats where you place your cursor when creating the dataset.
    <p> </p>
   <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">All feedback</li>
        <li class="TabbedPanelsTab" tabindex="0">Suggestions for improvement</li>
        <li class="TabbedPanelsTab" tabindex="0">What did you like the most</li>
        <li class="TabbedPanelsTab" tabindex="0">What did you like the least</li>
        <li class="TabbedPanelsTab" tabindex="0">What else would you like to see</li>
        <li class="TabbedPanelsTab" tabindex="0">Any other comments</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <table border="1" align="center" id="allFeedback"> .... start feedback table tag (line 763)
            <tr>
              <td width="80"><strong>Feedback Number</strong></td>
              <td><strong>Days attended</strong></td>
              <td><strong>Arrived by</strong></td>
              <td><strong>Arrival arrangements</strong></td>
              <td><strong>Expectations met</strong></td>
              <td><strong>Ticket price</strong></td>
              <td><strong>Zip code</strong></td>
            </tr>
.................... rest of table probably your PHP repeat area
              </tr>
          </table> .... end feedback table tag
          <div spry:region="dsAllFeedback">
            <table>
               <tr>
                <th spry:sort="Feedback_Number">Feedback Number</th>
                <th spry:sort="Days_attended">Days attended</th>
                <th spry:sort="Arrived_by">Arrived by</th>
                <th spry:sort="Arrival_arrangements">Arrival arrangements</th>
                <th spry:sort="Expectations_met">Expectations met</th>
                <th spry:sort="Ticket_price">Ticket price</th>
                <th spry:sort="Zip_code">Zip code</th>
              </tr>
              <tr spry:repeat="dsAllFeedback" spry:setrow="dsAllFeedback" spry:odd="row_odd" spry:even="row_even" spry:hover="row_hover" spry:select="row_select">
                <td>{Feedback_Number}</td>
                <td>{Days_attended}</td>
                <td>{Arrived_by}</td>
                <td>{Arrival_arrangements}</td>
                <td>{Expectations_met}</td>
                <td>{Ticket_price}</td>
                <td>{Zip_code}</td>
              </tr>
            </table>
          </div>
          <br />
          <table border="0">
I hope this helps.
Ben

Spry Tabbed Panel and Master/Detail Page Set interraction

Hi,
I have created a feedback form and am using a Spry Tabbed Panel to allow users to review all responses to one question and then all responses to the next question in different tabs, there are 6 tabs in all. In each tab I have created a Master/ Detail Page set - well actually just the Master appears in the tab. This is working fine. I allow up to 20 responses to be shown on each page, after which the user selects First/Previous/Next/Last. When they do this the screen refreshes and the tabbed panel display goes back to the default tab, clicking on the tab previously used correctly displays whichever of First/Previous/Next/Last the user selected. I'd like the display to remain on the user's current tab when they select First/Previous/Next/Last.
The page in question is here http://www.hollisterairshow.com/feedback-results2.php, then scroll about half way down the page.
Thanks.
Tony

Hi Tony,
Have a look here http://labs.adobe.com/technologies/spry/samples/data_region/PagingSample.html and here http://labs.adobe.com/technologies/spry/samples/data_region/SpryPagedViewSample.html
If you need further assistance, go to the Spry Forum http://forums.adobe.com/community/labs/spry
I hope this helps.
Ben

I have a perplexing problem, in firefox the iframe in the spry tabbed panel doesn't work any ideas?

I have made a page with spry tabbed panels, i have embedded an iframe in the content section of the second tab, this works perfectly well with Google, IE, Safari, Opera etc but just doesnt work in Firefox.
If I make the tab panel containing the iframe the Default tab then it works, i just cant figure out why,
By the way new to all this so be gentle please
<div id="main_column">
     <div class="section_w500">
        <h2>North Bali Listings</h2>
        <div id="TabbedPanels1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">About North Bali</li>
            <li class="TabbedPanelsTab" tabindex="0">Land</li>   <<<<< This is the tab where the iframe is embedded in the content panel>>>>>
            <li class="TabbedPanelsTab" tabindex="0">Houses / Villas /Apartments / Rooms</li>
            <li class="TabbedPanelsTab" tabindex="0">Commercial</li>
</ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">A property analyst recently said that limited land availability in the southern parts of Bali, especially in and around the Badung and Denpasar areas, has driven investors northward, in our opinion   at this time it is an ideal opportunity to acquire property still at very sensible prices in this area, be it for investment or as a place of residence.. <br />
              <p> <img src="../../../Images/Bali Scenes General/panoramic-views.jpg" alt="views" width="183" height="140" align="left" />Over the last few of years, investors have been targeting the northern area, principally along the coastline , with its variety of pristine black sandy beaches, pebble beaches and rugged coastline, offering a variety of activities; scuba diving, snorkelling, water sports, fishing, sailing. trekking gives this area the potential to be world-class tourist destination. Research has shown that property prices are set to rise above the average due to increased infrastructure development, and the planned opening of a new International Airport in the North shows the Bali Government's commitment to the develop this area as a future tourist destination.<br />
                <br />
                The Northern part of Bali is also an excellent base for exploration further afield, close to the main portal for trips to other parts of Indonesia. <br />
              Although it is largely undeveloped there is a wide range of properties and land with beach front to panoramic rice paddy views still to be found at good value for money. </p>
              <table width="100%">
                <tr>
                  <td align="left" valign="top"><div class="AreasOfBaliHighlight" style="color: #60C; font-weight: bolder;">This is an ideal time to consider your dream property in this area; be it for investment, development or private use.</div></td>
                </tr>
              </table>
              <p> The main tourist area in the North is arguably <span style="color: #F00">Lovina</span>, with property prices reflecting this especially beach front or with panoramic views so expect to see prices a little bit more expensive in and around this area. However inland prices are still very reasonable.<br />
                <br />
                <img src="../../../Images/Bali Scenes General/Traditional-lifestyle.gif" alt="village life" width="188" height="137" hspace="2" align="right" />Other areas to be found in the North going towards <span style="color: #F00">Gillimanuk</span> the main portal for the ferry to and from Java; include: <span style="color: #F00">Pemuteran</span> popular diving area, <span style="color: #F00">Menjangan</span> <span style="color: #F00">Island</span>, a popular diving and nature reserve; are also beginning to attract investors, resulting in prices rising.<br />
                The area of the North of Bali travelling East from <span style="color: #F00">Lovina</span> towards the eastern part of Bali is quieter and more rural, with stunning coastline and secluded traditional village life, here life slows down, people are very friendly and happy to integrate with "Bule (Foreigner), this life style is definitely completely different to the hustle and bustle of the South of Bali, perfect for future development and peaceful retirement, and with the development of the new <span style="color: #F00">International Airport</span> in this area, about 1/2 way between <span style="color: #F00">Singaraja</span> and <span style="color: #F00">Almpura</span> in the East, which makes this area an ideal investment opportunity as property and land prices are set to grow in this part of North Bali faster than other areas.<br />
                <br />
                <img src="../../../Images/Bali Scenes General/img_bali_1.jpg" alt="Quiet Lanes" width="189" height="124" hspace="2" align="left" />It has to be said that facilities for schooling, medical services and shopping are not as good as in the South or around Ubud area, which have higher concentrations of established ex pat communities, and better facilities also the job opportunities are not anywhere near as plentiful as in the South or Ubud areas, which limits the lifestyle for many people looking to settle in Bali, careful consideration has to be given if your intention is for a place for you to reside, and it is possibly an area for consideration as an investment opportunity, or for a development of hotel or villa resort, or as a second retirement home. </p>
              <p>There are of course facilities for all the usual services and plenty of job opportunities, and a small but growing ex-pat community, especially in and around <span style="color: #F00">Lovina</span> and <span style="color: #F00">Singaraja</span> just not as many as in the other popular areas for ex pat's. </p>
            </div>
            <div class="TabbedPanelsContent">
              <p> </p>
              <table width="100%" border="0">
                <tr>
                  <td valign="top"><h7 style="color: #C03"><span style="font-weight: bold"><span style="font-size: 12px; color: #FFF;">Property Code BSP 00130101</span><span style="font-size: 16px"> </span>SAMBIRENTENG - North East Bali 7,300 meters (</span></h7>
                    <span style="font-weight: bold; color: #B90033;">73 ARE) Beach front flat wooded land for Sale/ Rent</span></td>
                  <td><span class="button_01"><a href="#" onclick="MM_openBrWindow('North Bali/Gold Package Listings/BSP-00130101/Sambirenteng Property Location Map.html',width=750,height=200')">Location Map</a></span></td>
                </tr>
                <tr>
                  <td width="77%" valign="top"><p>A golden opportunity to acquire a prime plot of beach front land in the North East of Bali in an area that enjoys newly awarded "Tourism Status" ideal for the development of a small hotel or villa complex, easy access to many popular tourist spots already developing in the North.</p>
                    <p> A 3 meter wide sealed road gives acces to the whole length of this prime plot of land: Electric (PLN) Water (PDAM) Telephone & Internet close to hand and readilly available</p></td>
                  <td width="23%"><a href="Carousel Sambirneteng Listings.html target="_parent"></a><iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></td>
                </tr>
                <tr>
                  <td valign="top">Purchase price<span style="color: #33C; font-weight: bold;"> 12,500,000,000 Rp</span><br />
                    Rental Price (25 years) <span style="font-weight: bold">9,450,000,000</span> <span style="font-weight: bold">Rp</span> <span style="color: #FFF"> (<span style="font-weight: bold; color: #3333D0;"> 5,200,000 Rp</span><span style="color: #3933D5"> </span> per are per year )<br />
                      Min Rental Period 25 Years, extendable to to a max of 75 years
                      (with full "Right Of Use" issued by owner)</span></td>
                  <td valign="top"><p class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101 Details.html">Find out more</a></p>
                    <br />
                    <span class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101_Enquiry Form.html" target="_parent">Make Enquiry</a></span></td>
                </tr>
              </table>
              <p><br />
              </p>
              <hr width="100%" noshade="noshade" />
              <p> </p>
            </div>
<div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.<iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></div>
            <div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.</div>
</div>
        </div>
        <p> </p>
      <p>
        <h7 style="color: #C03"></h7>
      </p>
<h2></h2>
     </div>
     <div class="cleaner"></div>
    </div> 

Could you share a link to the page?
Seeing it in context and in our browsers is much easier to debug.
If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms.

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

Youtube Embeds displaying on every tabbed panel

So I am having a problem with spry tabbed panels.
Everything seems to be going fine, except that every youtube video that is embeded shows on every page ( or almost every page) even though they are only contained with certain tabbedPanelContentGroups.
Is there anything to do about this? I would be happy to proivde code, but I'm hoping there is a quick fix as I would assume other people would have this problem.
Thank you very much for your time.
EDIT: I am adding code because I realized that some of the tabs don't have the problem, specifically the ones that have the soundCloud embeds (the section with  at the top works fine, as well as the  section
<!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>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="index.html"><img src="images/300 dpi Swaish.png" style="opacity:.8;" width="100%"/></a>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" style="padding-left:0px;padding-right:0px;" tabindex="0"></li>
    <li class="TabbedPanelsTab" tabindex="0">Cozy</li>
    <li class="TabbedPanelsTab" tabindex="0">Charles Melvin</li>
    <li class="TabbedPanelsTab" tabindex="0">Pink Noise Ordinance</li>
    <li class="TabbedPanelsTab" tabindex="0">Xei The Ghost</li>
    <li class="TabbedPanelsTab" tabindex="0">Ded Pimpin</li>
    <li class="TabbedPanelsTab" tabindex="0">ESMK</li>
    <li class="TabbedPanelsTab" tabindex="0">Cabbibo</li>
    <li class="TabbedPanelsTab" tabindex="0">Defense</li>
    <li class="TabbedPanelsTab" tabindex="0">Ca$h Villa</li>
    <li class="TabbedPanelsTab" tabindex="0">Drrty Pharmecuticals</li>
    <li class="TabbedPanelsTab" tabindex="0">Supa Ape</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
              <div class="homeLeft">
                        <iframe width="100%" height="500" src="http://www.youtube.com/embed/4nPAa2Xjg2Y" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="homeRight">
        <a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
        <a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
         <a href="downloads/xei le phantom - o lard.mp3"><img src="images/oLard.jpg" /></a>
        </div>
    </div>
    
    <div class="TabbedPanelsContent">
        <div class="cozyLeft">
                              <iframe width="100%" height="150" src="http://www.youtube.com/embed/DTjeN3kvH14" frameborder="0" allowfullscreen></iframe>
                              <p></p>
                              <p></p>
                              <p></p>
                              <iframe width="100%" height="150" src="http://www.youtube.com/embed/46ucyzYpoB8" frameborder="0" allowfullscreen></iframe>
            <div class="downLoad">
            <a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
        <a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
            </div>
        </div>
                    <div class="cozyRight">
                              <iframe width="100%" height="150" src="http://www.youtube.com/embed/ay1DeoNRJUM" frameborder="0" allowfullscreen></iframe>
                              <p></p>
                              <p></p>
                              <p></p>
                  <iframe width="100%" height="150" src="http://www.youtube.com/embed/prwGrPAsEVU" frameborder="0" allowfullscreen></iframe>
            <p></p>
                              <p></p>
                              <p></p>
            <iframe width="100%" height="150" src="http://www.youtube.com/embed/FUQf25vrct4" frameborder="0" allowfullscreen></iframe>
              </div>
    </div>
    
    
    <div class="TabbedPanelsContent">
        <div class="left">
                  <iframe width="100%" height="335" src="http://www.youtube.com/embed/4nPAa2Xjg2Y" frameborder="0" allowfullscreen></iframe>
            <div class="downLoad2">
            <a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
        <a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
            </div>
                    </div>
                    <div class="right">
                              <iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src=                                        "http://bandcamp.com/EmbeddedPlayer/v=2/track=1227280531/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://charlesmelvin.bandcamp.com/track/king-supa">King SUPA by Charles Melvin</a></iframe>
                              <p></p>
                              <p></p>
                              <p></p>
                              <iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=2269435729/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://charlesmelvin.bandcamp.com/album/beatoff-vol-1">#BEATOFF Vol. 1 by Charles Melvin</a></iframe>
                    </div>
    </div>
    
    
    <div class="TabbedPanelsContent">
              
                    <div class="left">
        <iframe height="335px" width="560px" src="http://www.youtube.com/embed/jePt-ZupucE" frameborder="0" allowfullscreen></iframe>
        <div class="downLoad2">
            <a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
        <a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
            </div>
                    </div>
                    <div class="right">
                              <iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=2897124287/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://pinknoiseordinance.bandcamp.com/album/virtual-vampire">Virtual Vampire by Pink Noise Ordinance</a></iframe>
            <br/>
                              <iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=4238875189/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://elsuper.bandcamp.com/album/your-flower">✿Your Flower✿ by Pink Noise Ordinance</a></iframe>
            <br/>
                              <iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=2652019939/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://elsuper.bandcamp.com/album/i-slept-in-a-field">I Slept in a Field by Pink Noise Ordinance</a></iframe>
              </div>
    </div>
    
    
    <div class="TabbedPanelsContent">
              <div class="left">
        <iframe width="100%" height="335" src="http://www.youtube.com/embed/JqvD14vC1Hs" frameborder="0" allowfullscreen></iframe>
        <div class="downLoad2">
            <a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
        <a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
            </div>
        </div>
        <div class="right">
                        <iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=383178372/size=venti/bgcol=161616/linkcol=428 5BB/" allowtransparency="true" frameborder="0"><a href="http://xeilephantom.bandcamp.com/track/leviathan-ke-has-***">leviathan..(ke$ha's ***) by ghostly</a></iframe>
                              <br/>
                              <iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=4169793453/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://xeilephantom.bandcamp.com/track/paws">paws. by xei the ghost</a></iframe>
                              <br/>
                              <iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=4280837736/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://xeilephantom.bandcamp.com/track/real-lize-told">real.lize.told by xei le phantom</a></iframe>
                              <br/>
                              <iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=3766529241/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://xeilephantom.bandcamp.com/track/o-lard">o lard by xei le phantom</a></iframe>
      </div>
</div>
    
    
    <div class="TabbedPanelsContent">
              <div class="left" >
        <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
                              <script>
                              new TWTR.Widget({
                                version: 2,
                                type: 'profile',
                                rpp: 4,
                                interval: 30000,
                                width: 550,
                                height: 450,
                                theme: {
                                  shell: {
                                    background: '#333333',
                                    color: '#ffffff'
                                  tweets: {
                                    background: '#000000',
                                    color: '#ffffff',
                                    links: '#079beb'
                                features: {
                                  scrollbar: false,
                                 loop: false,
                        live: false,
                        behavior: 'all'
                              }).render().setUser('@dedpimpin').start();
                              </script>
        <div class="downLoad2">
            <a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
        <a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
            </div>
        </div>
        <div class="right">
        <iframe width="100%" height="410" style="position: relative; display: block; width: 100%; height: 450px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=1425481289/size=grande3/bgcol=161616;/linkcol =4285BB/" allowtransparency="true" frameborder="0"><a href="http://dedpimpin.bandcamp.com/album/is-brutality">is brutality by Ded Pimpin</a></iframe>
              </div>
    </div>
    
    
    <div class="TabbedPanelsContent">
              <div class="left">
                        <iframe width="100%" height="335" src="http://www.youtube.com/embed/5jxorLMcRf4" frameborder="0" allowfullscreen></iframe>
            <div class="downLoad2">
            <a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
        <a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
            </div>
              </div>
        <div class="right">
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg" width="100%"/><br/>DOWNLOAD RICE CAKE</a>
        </div>
    </div>
    
    
    <div class="TabbedPanelsContent">
              <div class="cozyLeft">
        <iframe width="100%" height="335" src="http://www.youtube.com/embed/3h41ZgXOSlw" frameborder="0" allowfullscreen></iframe>
        <div class="downLoad">
            <a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
        <a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
            </div>
        </div>
        <div class="cozyRight">
                           <iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F33043097&sh ow_artwork=true"></iframe>
                              <br/>
            <iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F30474430&sh ow_artwork=true"></iframe>
            <br/>
            <iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F29840842&sh ow_artwork=true"></iframe>
        </div>
    </div>
    
    
    <div class="TabbedPanelsContent">
    <div class="left">
    <a href=""><img src="images/elHeroic.jpg" style="position:relative;width:60%;margin-left:20%"/></a>
    <div class="downLoad2">
            <a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
        <a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
            </div>
    </div>
    <div class="right">
    <iframe width="400" height="100" style="position: relative; display: block; width:100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=4052682958/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://defense.bandcamp.com/album/lobello-e-p">LoBello E.P. by Defense</a></iframe>
<br/>
<iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=2002203858/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://defense.bandcamp.com/album/el-heroic">El Heroic by Defense</a></iframe>
<br/>
<iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=3191448160/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://defense.bandcamp.com/album/stitches-ep">STITCHES ep by DEFENSE</a></iframe>
    </div>
    </div>
    
    
    <div class="TabbedPanelsContent">
              <div class="cozyLeft">
        <iframe width="100%" height="300" scrolling="yes" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1584822& show_artwork=true"></iframe>
        <div class="downLoad">
            <a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
        <a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
            </div>
              </div>
              <div class="cozyRight">
                              <iframe width="100%" height="300" scrolling="yes" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1596385& show_artwork=true"></iframe>
                    </div>
    </div>
    
    
    <div class="TabbedPanelsContent">
              <div class="left">
        <iframe width="300" height="410" style="position: relative; display: block; width: 100%; height: 335px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=2093239829/size=grande3/bgcol=161616/linkcol= 4285BB/" allowtransparency="true" frameborder="0"><a href="http://dirtypharmeceuticals.bandcamp.com/album/bieber-gone-bad">Bieber Gone Bad by ✞dirty ph△rm△ceutic△ls✞</a></iframe>
        <div class="downLoad2">
            <a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
        <a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
            </div>
              </div>
              <div class="right">
                        <iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=1544977132/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://dirtypharmeceuticals.bandcamp.com/track/the-glorious-slay-we-have-won-everythings-o urs-everyone-is-dead">The Glorious Slay: We Have Won, Everything's Ours, Everyone Is Dead by I¢y Pharmaceuticals</a></iframe>
            <br/>
            <iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=2622775492/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://dirtypharmeceuticals.bandcamp.com/track/ain-soph">Ain Soph by I¢y Pharmaceuticals</a></iframe>
            <br/>
            <iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=346130186/size=venti/bgcol=161616/linkcol=428 5BB/" allowtransparency="true" frameborder="0"><a href="http://dirtypharmeceuticals.bandcamp.com/track/my-semen-lies-dormant-mocking-me">My Semen Lies Dormant, Mocking Me by ✞dirty ph△rm△ceutic△ls✞</a></iframe>
            <br/>
                              <iframe width="400" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=3626930462/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://dirtypharmeceuticals.bandcamp.com/track/--14">αεηιουω by ✞dirty ph△rm△ceutic△ls✞</a></iframe>
        </div>
    </div>
    
    
    <div class="TabbedPanelsContent">
                       <div class="left">
        <iframe width="100%" height="335" src="http://www.youtube.com/embed/SU910lw4saw" frameborder="0" allowfullscreen></iframe>
        <div class="downLoad2">
            <a href="downloads/Charles Melvin - King SUPA.mp3"><img src="images/kingSupa.jpg"/></a>
        <a href="downloads/ESMK - Rice Cake.zip"><img src="images/riceCake.jpg"/></a>
        <a href="downloads/Pink Noise Ordinance - Virtual Vampire.zip"><img src="images/virtualVampire.jpg" /></a>
            </div>
              </div>
              <div class="right">
        <iframe width="300" height="410" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=3884466748/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://supaape.bandcamp.com/album/strictly-for-the-*******">Strictly for the ******* by Supa Ape</a></iframe>
        <br/>
<iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=3360886811/size=venti/bgcol=161616/linkcol=42 85BB/" allowtransparency="true" frameborder="0"><a href="http://supaape.bandcamp.com/album/ifuck">ifuck by Supa Ape</a></iframe>
                    <br/>
<iframe width="100%" height="100" style="position: relative; display: block; width: 100%; height: 100px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/track=183247306/size=venti/bgcol=161616/linkcol=428 5BB/" allowtransparency="true" frameborder="0"><a href="http://supaape.bandcamp.com/track/pink-sky">Pink Sky by Supa Ape</a></iframe>
              </div>
    </div>
    
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Sorry, no probs here
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="youtubePlayer.js"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<script type="text/xml">

</script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
    </div>
    <div class="TabbedPanelsContent">
        <iframe id="html5Vid" class="youtube-player" type="text/html" width="480" height="385" src="http://www.youtube.com/embed/4nPAa2Xjg2Y" frameborder="0"></iframe>
      <script type="text/javascript">
// BeginOAWidget_Instance_2310032: #youtubePlayer
        if (!true) {
            var vid = document.getElementById("html5Vid");
            document.body.removeChild(vid);
            var params = {};
            params.autoplay = false;
            params.loop = false;
            params.hd = false;
            params.start = 0;
            params.border = false;
            params.color1 = "#B1B1B1";
            params.color2 = "#D8D8D8";
            var vid = createFlashPlayer("5P91PPCw2Bs", "480", "385", params);
            document.body.appendChild(vid);
// EndOAWidget_Instance_2310032
      </script>
    </div>
</div>
</div>
<script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
The above is achieved by using the YouTube Player available when you use the Adobe Widget Browser.
Gramps

Spry Tabbed Panels overwritting popup menu in IE6 and IE7 but display fine in Firefox

I am new to Spry and Dreamweaver CS3 and would appreciate any
help anyone can give. I am having an issue with Spry Tabbed Panels
appearing above a navigation bar pop up menu only in IE6 and IE7.
Everyhting works like expected in FF. I have several product pages
that are exhibiting the same issue. I am not having this issue when
using Spry Accordian. Would someone be able to educate me on what I
can do to fix this problem. One of the product pages that is
exhibiting this problem is
Page
with display issue

The IE browsers implement z-indexing differently than most
browsers ... specifically, IE browsers establish a new z-index
context if you set the position CSS property of an element to
anything other than static.
What this means is that if you set something to
position:relative ... any z-index values of children inside that
element will be relative to that element.
In your case, you seem to have a position relative on your
div FWTableContainer1966866324. If you set the z-index value to
something like 10, you'll notice that it fixes the problem.
--== Kin ==--

Tabbed Panel using UpdateContent doesn't properly display spry .html page

Quick question. I have a tabbed panel widget with 12 tabs.
I'm using the UpdateContent snippet to pull in .html pages per tab.
when I have straight .html on the pages the content displays
without a problem.
What I need is for each tab to pull in an .html page that
contains a spry table that has an XML data set (think product page
with "next" and "prev" buttons to cycle through the content).
The .html page with the spry table works like a charm...on
it's own. however when I use it in conjunction with the tabbed
panel all I see is the bracketed code (i.e. {imgURL} {productName}
{SKU}) rather than [photo] large T-shirt SKU:1111.
A while ago I did an accordion that had dynamic content per
generated panel -- this utilized the Spry.Data.NestedXMLDataSet
function. A bit of a similar idea although I'm not sure if this
would also work with the tabbed panel.
Any suggestions would be helpful and I can drop the code if
that would also help. Thanks!

well, what I have is:
index page with tabbed panel
|
V
click tab
|
V
content from first option .html page loads. this content has
a dataset repeating table.
The main page already had the SpryData.js and also
UpdateContent, as follows:
<div id="TabbedPanels1" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('one','siracusa.html');">Siracusa
Micro Crepe</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('two','peony_georgette.html');">Peony
Printed Silk Georgette</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('three','wool_pucker.html');">Wool
Pucker</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('four','textured_dot.html');">Textured
Dot</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('five','textured_cotton.html');">Textured
Cotton</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('six','crane.html');">Crane
Printed Four Ply Silk</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('seven','tencel_jersey.html');">Tencel
Jersey</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('eight','circular_wool.html');">Circular
Stitch Wool</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('nine','silk_burnout.html');">Silk
Burnout</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('ten','organza.html');">Floral
Silk Organza</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('eleven','micro_crepe.html');">Micro
Crepe</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"
id="one">Siracusa</div>
<div class="TabbedPanelsContent" id="two">Peony
Printed</div>
<div class="TabbedPanelsContent" id="three">Wool
Pucker</div>
<div class="TabbedPanelsContent" id="four">Textured
Dot</div>
<div class="TabbedPanelsContent" id="five">Textured
Cotton</div>
<div class="TabbedPanelsContent" id="six">Crane
Printed Four Ply Silk</div>
<div class="TabbedPanelsContent" id="seven">Tencel
Jersey</div>
<div class="TabbedPanelsContent" id="eight">Circular
Stitch Wool</div>
<div class="TabbedPanelsContent" id="nine">Silk
Burnout</div>
<div class="TabbedPanelsContent" id="ten">Floral Silk
Organza</div>
<div class="TabbedPanelsContent" id="eleven">Micro
Crepe</div>
</div>
</div>
<script type="text/javascript">

</script>
Let's say you clicked on the Siracusa tab. This would call up
siracusa.html, which has
<script src="SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<link href="../../ed_style.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">

</script>
Sircusa Micro Crepe
<div spry:region="fall08">
<table>
<tr spry:repeatchildren="fall08">
<td colspan="5 "><img
src="imx/{photoURL}"/></td>
</tr>
<tr spry:repeatchildren="fall08">
<td><a href="imx/{lrgphoto}"
target="_blank">enlarge</a></td>
<td>{SKU1}</td>
<td>{SKU2}</td>
<td>{SKU3}</td>
<td>{name}</td>
<td>{desc}</td>
</tr>
</table>
<input type="button" value="Prev"
onclick="UpdatePage(pageOffset - pageSize);" />
<input type="button" value="Next"
onclick="UpdatePage(pageOffset + pageSize);" />
</div>
siracusa.html works more than fine. pulls in the photo, link,
SKU and info without any problem.
When you're on the base page with the tabbed panel the only
thing that comes up are the bracketed info, i.e. {SKU} {SKU1}
{SKU2}.
What I need help with is actually having the pulled in data
table (in the various tabbed panel content areas) actually then
populate the repeat regions rather than just showing the
code...

IE6 displays AutoSuggestions under Tabbed Panel tabs

Problem: I am using the autoSuggest widget on the same page
as tabbed panels. In FireFox, it works GREAT! In IE6, I have a
problem with the suggestions being under the tabbed panels tabs
(possibly under the tabbed panel tab group)... I found a suggestion
which stated to set the autosuggest to z-index: 2002, and set it to
absolute positioning, both of which I've done.
When I look at the source using the IE Dev Toolbar, I see the
following:
<DIV class="predictiveSuggestionDiv hideSuggestClass"
id="destinationSuggestionsDiv">
<DIV class="fieldText" spry:hover="highlight"
spry:suggest="Oak Harbor, WA">Oak Harbor, WA</DIV>
</DIV>
<IFRAME class="iframeSuggest" style="DISPLAY: none; LEFT:
0px; WIDTH: 245px; TOP: 20px; HEIGHT: 18px" src='javascript:"";'
frameBorder="0" scrolling="no"></IFRAME>
Which leads me to believe that the autosuggest is not
actually inside the iFrame. While I found the styles for the
iframe, and set them, I did not find a way to tell spry to use the
iFrame. I was thinking that this might be the missing link, but I'm
not sure.
I've tried setting the TabbedPanelTab &
TabbedPanelTabGroup to z-index: 1, however the tabbed panels seem
to really want to be above everything else anyway. I do have the
iFrameSuggest class and I set it as suggested in another forum
entry to:
.iframeSuggest
position: absolute;
z-index: 2002;
filter:alpha(opacity:0.1);
However, that does not seem to solve my problem in IE 6.
Any thoughts?

Problem: I am using the autoSuggest widget on the same page
as tabbed panels. In FireFox, it works GREAT! In IE6, I have a
problem with the suggestions being under the tabbed panels tabs
(possibly under the tabbed panel tab group)... I found a suggestion
which stated to set the autosuggest to z-index: 2002, and set it to
absolute positioning, both of which I've done.
When I look at the source using the IE Dev Toolbar, I see the
following:
<DIV class="predictiveSuggestionDiv hideSuggestClass"
id="destinationSuggestionsDiv">
<DIV class="fieldText" spry:hover="highlight"
spry:suggest="Oak Harbor, WA">Oak Harbor, WA</DIV>
</DIV>
<IFRAME class="iframeSuggest" style="DISPLAY: none; LEFT:
0px; WIDTH: 245px; TOP: 20px; HEIGHT: 18px" src='javascript:"";'
frameBorder="0" scrolling="no"></IFRAME>
Which leads me to believe that the autosuggest is not
actually inside the iFrame. While I found the styles for the
iframe, and set them, I did not find a way to tell spry to use the
iFrame. I was thinking that this might be the missing link, but I'm
not sure.
I've tried setting the TabbedPanelTab &
TabbedPanelTabGroup to z-index: 1, however the tabbed panels seem
to really want to be above everything else anyway. I do have the
iFrameSuggest class and I set it as suggested in another forum
entry to:
.iframeSuggest
position: absolute;
z-index: 2002;
filter:alpha(opacity:0.1);
However, that does not seem to solve my problem in IE 6.
Any thoughts?

MSI Clock & Information Tabs In Control Panel\Display do not open

I can't open the MSI Information tab and the MSI Clock tab in Control Panel\Display; keep getting the message that "an error occured while trying to run shell32.dll, control-rundll C:\Windows\system32\desk.cpl, display". Other than this, everything else is working perfectly. Any suggestions?

I would also recommend a 3rd party solution. On my 845PE with a GEForce3 Ti200 (MS8851), the system will reboot becuase of drivers problems (XP Pro) when accessing advanced page if I use the MSI controls.
Remoing the controls solves the issue.

Tabbed Panels display problem

Similar Messages

Maybe you are looking for