Spry Tabbed Panels - not correct in IE but correct in Chrome and MF

Hi,
I'm having problems with an extension I used for a client, so I want to use the Spry tabbed panels form dreamweaver, but they in IE8 it puts all the content under each other in the first tab ??
In Chrome and MF its correct. Do you know about this problem or is it because I did something wrong?
see: www.zorgfilosofie.nl/index2
The other pages where made with an extension but with that script my client can't edit with contribute. That's why I want to implement Dreamweaver Spry Tabbed Panels.
Thanks for answering!
Carla

Hello there from down under J
Het was mooi weer, maar vandaag regent het.
Toch zijn hier in deze kamer veel zonnestralen, want het probleem is opgelost!
I searched the whole evening for alternative but it did’t work with templates.
With the js files the problem is solved.
I don’t understand why the js file was not correct, because I just bought CS5.5
Where do I have to put de file so the problem will not happen again when I make another site?
Thanks a lot!
Best regards and take some sun with you!
Carla
Van: altruistic gramps [email protected]
Verzonden: woensdag 5 oktober 2011 2:16
Aan: Carla Leliveld
Onderwerp: Spry Tabbed Panels - not correct in IE but correct in Chrome and MF
Re: Spry Tabbed Panels - not correct in IE but correct in Chrome and MF
created by altruistic gramps <http://forums.adobe.com/people/altruistic+gramps>  in Spry Framework for Ajax - View the full discussion <http://forums.adobe.com/message/3954185#3954185

Similar Messages

  • Spry tabbed panel not displaying correctly in IE , in other browsers it is fine, what is the fix

    Spry tabbed panel not displaying correctly in IE , in other browsers it is fine, what is the fix

    As an FYI: Adobe discontinued developing the Spry framework last year.  And Spry was removed from DW CC.  You can keep using Spry if you wish, but most of us have switched to other solutions that work better in IE10 and Touch Screens.
    Nancy O.

  • Spry tabbed panels not opening in IE on Vista

    Link:
    About
    page
    Link:
    Story
    page
    Spry tabbed panels on these pages display fine in Firefox and
    Safari.
    But in IE on two separate Vista-running PCs, everything
    except the tabs themselves loads, until you click refresh one or
    more times. Both PCs were on broadband connections and I checked
    each PC several times just to make sure it wasn't just an
    intermittent connection.
    Way to fix this for IE? As far as my client is concerned,
    it's a bug.

    Dear all, thanks for your replies.
    I have tried Barascu Diana's fix to both pages linked at the
    top, but am presently unable to test it on IE6. Anyone able to see
    if those tabs are now appearing?
    <DIV class="TabbedPanel" id="TabbedPanels1" style
    ="position:relative">
    (Hope I did this right?)
    I also temporarily tried kinblas' fix, but removing relative
    positioning there caused the tabs to hover over to the left of the
    page.

  • Spry tabbed panels not selectable and displaying everything

    I have a spry tabbed panel with 2 tabs.
    In design view, this correctly shows me the contect of each of the tabs (a different table in each) when I click on the tab.
    When I run it in live view or the browser however, it displays both tabs TOGETHER, (i.e both table) and I can't select either of the tabs.
    I've attached a screen print.
    I've tried creating a brand new page with a new tabbed panel and still get the same result.
    Any suggestions.

    Here you go,
    This is just a template with a few headers and nothing much else, plus the blank tabbed panel, I did this just to test out the panel.
    <!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>
    <link href="Layout3.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixLtHdr #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixLtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    -->
    </style>
    <link href="SpryAssets/SpryTabbedPanels_test.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="twoColFixLtHdr">
    <div id="container">
      <div id="header">
        <div id="Righty">
          <ul id="MenuBar2" class="MenuBarHorizontal">
        <li><a href="#">Home</a>      </li>
        <li><a href="#">Members</a></li>
      </ul>
      <p> </p>
    </div>
    Login / Register
    <div id="Middle">
      <h1 align="center">GuitarSwap</h1>
    </div>
      </div>
      <div id="sidebar1">
        <h3>Members Area</h3>
        <ul id="MenuBar1" class="MenuBarVertical">
          <li><a href="#">Item 1</a>      </li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a>      </li>
    </ul>
        <h3>  </h3>
      </div>
      <div id="mainContent">
        <h3>Adverts</h3>
        <!-- end #mainContent -->
      </div>
      <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
      <div id="main3">
    <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">Content 1</div>
        <div class="TabbedPanelsContent">Content 2</div>
      </div>
    </div>
    <p> </p>
        <p> </p>
      </div>
      <br class="clearfloat" />
      <div id="footer">
        <p> </p>
        <!-- end #footer -->
      </div>
      <!-- end #container -->
    </div>
    <h3>  </h3>
    <script type="text/javascript">
    <!--
    var  = new Spry.Widget.MenuBar("", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    //-->
    </script>
    </body>
    </html>

  • Opening specific Spry tabbed panels not working or displaying in IE

    I have a tabbed panel spry widget on an asp page in Dreawmweaver (http://www.herbsmithinc.com/casedog.asp) that worked marverously across IE, Firefox and Safari until I tried to get different panels to open on load through links.  I used the following tutorial: http://foundationphp.com/tutorials/spry_url_utils.php
    Everything works as it should in Firefox and Safari but the panels all appear at once, stacked down the page in IE. Does anyone have a fix for this or see what it is I'm doing wrong?
    Thanks!!

    I added the code, but It didn't work
    I just noticed that there's an error on the page when it loads in IE:
    Webpage error details
    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.6; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
    Timestamp: Thu, 24 Mar 2011 15:05:33 UTC
    Message: 'Spry.Widget.TabbedPanels' is null or not an object
    Line: 292
    Char: 1
    Code: 0
    URI: http://www.herbsmithinc.com/casedog.asp
    I searched the error but didn't come up with too much.  Any other suggestions?  I really appreciate the help!!

  • Spry tab panel not working in IE

    I have a site that uses tabs-------it is ok in firefox but not in IE
    The site url is grillonthehill.net
    Please help.
    I have a site that uses tabs-------it is ok in firefox but not in IE
    The site url is grillonthehill.net
    Please help.
    I have a site that uses tabs-------it is ok in firefox but not in IE
    The site url is grillonthehill.net
    Please help.

    No I didnt, if you  click on menu, you see the tabs.
    bill
    <

  • Titles not recorded "correctly" in Safari but OK in Chrome and Opera?

    Browsing my site with Opera or Chrome and then checking the browser history, page titles are listed correctly but in Safari they are mostly "Untitled Document." Most helpful to me if someone could check the code on a page and let me know what's awry. http://www.ristaustudio.com
    Thanks!

    Looks ok to me in Safari on Mac.
    One certainly needs some attention though - on the 'Contact' page. Somehow you have the meta 'keywords' tag inside the <title></title> tag:
    <title>Contact Mel Ristau
    <meta name="keywords" content="sculpture" />
    </title>

  • Spry Tabbed Panel not showing correctly on Remote Server

    Hi Folks,
    Here is something that is bugging me since a few days and I can't find the error or the culprit; I have the same page on another domain on the remote server and that is showing correctly. I even checked with Win Merge and the files are completely identical. It has no errors and is showing correctly on the local server. It also shows correctly in Dreamweaver CS4 or when viewed as a web page in Firefox etc.
    Link: http://www.venture-wilderness.com/services.php
    Please have a look and let me know what is happening.
    Thank you,
    zabberwan

    Hi zabberwan,
    Please have a look and let me know what is happening.
    My IE 8 show's me this (in snippets):
    and this:
    and here (http://www.venture-wilderness.com/) I can see this:
    It seems to me, that all is ok!?
    Hans-G.

  • Spry Tabbed Panels - replace text tab with an image, how to?

    Hi all, I'm stumped. I've uploaded 2 files to:
    http://docs.google.com/leaf?id=0B4zgjxAaUD97MmUzZTk3NjMtMDNkYi00NDJjLWExNzctOWNjMzM0MDlmMj g0&hl=en&authkey=CMWGoeEP
    http://docs.google.com/leaf?id=0B4zgjxAaUD97YTQ1MDliNzEtZGVhZS00MmYzLTllZWMtMzJiODQwMjRlMT Bl&hl=en&authkey=CILrxq0G
    I'm working in Dreamweaver CS3, 4 tab "Spry Tabbed Panel" with 3 columns (one column is a form and submit btn). The 1st photo is a mockup of what I'm trying to accomplish. In the 2nd photo, Nokia designed a page for its Nokia Developer Summit 2010 (been pulled down since). This is the desired effect. I'm trying to replace the typical text tabs in the tabbed panel with images, or, at the very least, change the color between states ON and OFF (images the same except for bg color - green verses gray), which is probably the better way to go, given page load time.
    I need the CSS and HTML code. I'd settle for just the image problem, but if someone can give me guidance on the content boxes too, that would be AWESOME!
    REALLY hoping anyone can help (Ben, I'm an Aussie too) - been on this for a month now.
    Very grateful Adobe staffs such a great resource tool as this site with a lot of really good, courteous brainiacs.
    Thanks,
    Louis cat

    G'day Ben,
    Upgraded to Dreamweaver CS5, added Tabbed Panels 2 widget to page.
    Here's a mockup of what I'm trying to do: http://docs.google.com/leaf?id=0B4zgjxAaUD97MmUzZTk3NjMtMDNkYi00NDJjLWExNzctOWNjMzM0MDlmMj g0&hl=en&authkey=CMWGoeEP
    Questions:
    1. Want to change Spry TP tabs to images (see link, above), then make them vertical tabs, with morph effect - How?
    2. How do I change the default TabbedPanels2 instance name? (not easy to rename)
    3. The first section of the code was planted in my index page - shouldn't this be pasted into a CSS file, or just leave it alone?
    ================================================
    FIRST SECTION OF THE CODE: -------------------------------------------------------------------------------
    <style type="text/css">
    /* BeginOAWidget_Instance_2138522: #TabbedPanels2 */
    /* TabbedPanelsTabGroup */
    #TabbedPanels2 .TabbedPanelsTabGroup {
    top: 1px;
    left: 0px;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    border-left: solid 0px inherit;
    border-bottom: solid 0px inherit;
    border-top: solid 0px inherit;
    border-right: solid 0px inherit;
    padding: 0px 0px 0px 0px;
    /* TabbedPanelsTab */
    #TabbedPanels2.TabbedPanels .TabbedPanelsTab,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTab {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #DDD;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 4px 10px 4px 10px;
    #TabbedPanels2.TabbedPanels .TabbedPanelsTab a,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTab a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    /* TabbedPanelsTabHover */
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabHover,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #EEE;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 4px 10px 4px 10px;
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabHover a,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    /* TabbedPanelsTabSelected */
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #EEE;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #EEE;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 4px 10px 4px 10px;
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected a,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    /* TabbedPanelsTabFocused */
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #EEE;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #EEE;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 4px 10px 4px 10px;
    #TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused a,
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    /* TabbedPanelsContentGroup */
    #TabbedPanels2 .TabbedPanelsContentGroup {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: #EEE;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    padding: 0px 0px 0px 0px;
    /* TabbedPanelsContentVisible */
    #TabbedPanels2 .TabbedPanelsContentVisible {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    border-left: solid 0px #CCC;
    border-bottom: solid 0px #CCC;
    border-top: solid 0px #999;
    border-right: solid 0px #999;
    padding: 4px 12px 4px 12px;
    #TabbedPanels2.BTabbedPanels .TabbedPanelsTab {
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    #TabbedPanels2.BTabbedPanels .TabbedPanelsTabSelected {
    border-top: solid 1px #999;
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabGroup {
    width: 10em;
    height: 20em;
    top: 1px;
    left: 0px;
    #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #EEE;
    /* EndOAWidget_Instance_2138522 */
    </style>
    ========================================================
    SECOND SECTION OF THE CODE: ----------------------------------------------------------------------------------------
      <div id="TabbedPanels2">
        <h2>Tab 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien lacus, porttitor vitae pretium eget, sodales sed libero. Maecenas non urna lacus, ac sollicitudin justo. Ut erat mi, hendrerit ac accumsan ac, congue eu dui. Pellentesque consectetur condimentum elit, et eleifend urna porta id.  </p>
        <h2>Tab 2</h2>
        <p>Nulla facilisi. Vestibulum ipsum elit, tincidunt sed tristique sit amet, faucibus in orci. Nunc sit amet elit lorem. Sed eget arcu ipsum, pharetra ullamcorper lectus. Sed ac diam ac tortor mattis mollis. Etiam mattis felis vel augue tempus in rhoncus ligula elementum. Vestibulum ut iaculis risus. Aliquam erat sem, feugiat vel laoreet in, lobortis non mauris. Vestibulum neque nibh, vehicula eleifend tincidunt sed, bibendum id dolor. </p>
        <h2>Tab 3</h2>
        <p>Suspendisse potenti. Proin ut erat sit amet turpis egestas tempor. Integer arcu dolor, aliquam ut egestas nec, pharetra ut mauris. Duis urna mi, aliquam id vulputate et, consequat in dolor. Duis congue sem feugiat nulla malesuada scelerisque. Aenean vitae augue nec diam euismod imperdiet. </p>
      </div>
      <script type="text/javascript">
    // BeginOAWidget_Instance_2138522: #TabbedPanels2
      var TabbedPanels2 = new Spry.Widget.TabbedPanels2("TabbedPanels2", {
       injectionType: "replace",
       widgetID: "TabbedPanels2",
       autoPlay: true,
       defaultTab: 0,
       enableKeyboardNavigation: true,
       hideHeader: true,
       tabsPosition: "top",
       event:"click",
       stopOnUserAction: true,
       displayInterval: 5000,
       minDuration: 300,
       maxDuration: 500,
       stoppedMinDuration: 100,
       stoppedMaxDuration: 200,
       plugIns:[]
    // EndOAWidget_Instance_2138522
      </script>
    ===================================================
    Any help would be much appreciated, Ben. Cheers from another Aussie. Louis Cat!

  • Spry Tabbed Panels - 2 lines of tabs

    I have a "Spry Tabbed Panels" widget on one of my site's
    pages and it works great. Except there are now more tabs than will
    fit side-by-side, so the last one gets moved to a new line, below
    the first 4. That's not that big a deal, except there's now a large
    blank space underneath and to the right of the top-row tabs.
    Is there any way to edit the CSS or page's codes (like adding
    an extra DIV surrounding the widget) so the now empty space gets a
    background color matching inactive tabs?
    To replicate this: create a fixed-width tabbed panels widget
    and simply add more tabs than there will fit in the widget's width.
    Any help on this matter would be appreciated.
    Edit: I've made a slight change to the CSS file so the tabs
    now have a fixed width, filling up 1/3rd of the widget's width
    each. I'd like to have the empty space look better, but this'll do
    for now.

    First add an ID to the tab as follows or similar
    <h2 id="second">Tab 2</h2>
    Then add a style rule to add a background image as follows or similar
    .TabbedPanelsTab#second {
        background:url(myImage.gif);
    Gramps

  • Spry Tabbed Panels - Contribute Error Message

    I created a Web site using  Dreamweaver CS4 that uses a Spry Tabbed Panels.  It works fine, but so  far it fails when it is pulled into Contribute CS5.  I've read the posts  about allowing Spry Widget editing in Contribute, so I've turned on  that capability.
    When I try to launch the Spry Widget Properties from within Contribute, I get this error:
    "This  tabbed panel is missing its content.  Contact your administrator to add  the missing content panel, or delete this panel and insert a new one."
    I've tried creating new generic pages with new Spry tabbed panels, but they always fail with this message.
    Here is a sample page:
    http://www.dougriderconsulting.com/zmcpa/incentives.html
    Any ideas?  Thanks!

    The page http://www.dougriderconsulting.com/zmcpa/incentives.html mentioned here has no issues.
    If there are any missing  codes DW also shows the error as <missing content panel>  or <missing tab> when the Tabbed Panel widget is selected.
    In Contribute the same pops up as a message.
    The issue in page http://www.dougriderconsulting.com/zmcpa/education_in_muskingum_county.html posted in Contribute Blogs is re-solved http://blogs.adobe.com/contribute/2010/06/spry_widget_rendering.html#more-33.

  • Spry tabbed panel in editable region will not allow editing

    Yesterday I was building a spry tabbed panel onto an existing template I created in an editable region, the whole right column is editable.  Today, I get a no editing stop sign instead of a cursor in the whole tabbed panel except the tabs.  However, my tabs are labeled correctly, but the panels need additional information added to them.  Here is the source code:<!-- InstanceBeginEditable name="right_column" -->
        <h2>Hewescraft
        </h2>
        <div id="Hewescraft_boats" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">Sportsman</li>
            <li class="TabbedPanelsTab" tabindex="0">Pro V</li>
            <li class="TabbedPanelsTab" tabindex="0">Sea Runner</li>
            <li class="TabbedPanelsTab" tabindex="0">Ocean Pro</li>
            <li class="TabbedPanelsTab" tabindex="0">Alaskan</li>
            <li class="TabbedPanelsTab" tabindex="0">Pacific Cruiser</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">
              <h3>Sportsman Series</h3>
              <p><img src="imageswebsite/Hewescraft/sportsmancanvasstop.jpg" width="602" height="276" alt="hewescraft sportsman" /></p>
              <p>Insert Text</p>
              <p>Click <a href="Links/HewesCraft_Sportsman[1].pdf">Here</a> for a Printable Brochure.</p>
              <p><img src="imageswebsite/untitled.jpg" width="612" height="792" alt="hewescraft sportsman features and options" /></p>
            </div>
            <div class="TabbedPanelsContent">
              <h3>Pro V Series</h3>
              <p><img src="imageswebsite/Hewescraft/prov.jpg" width="602" height="276" alt="hewescraft pro v" /></p>
              <p>Insert Text</p>
              <p>Clicke <a href="Links/HewesCraft_ProV.pdf">Here</a> for a Printable Brochure.</p>
              <p><img src="imageswebsite/Hewescraft/provfeaturesandoptions.jpg" width="612" height="792" /></p>
            </div>
            <div class="TabbedPanelsContent">
              <h3>Sea Runner Series</h3>
              <p><img src="imageswebsite/Hewescraft/searunnernomotor.jpg" width="602" height="276" alt="hewescraft searunner" /></p>
              <p>Insert Text</p>
              <p>Click<a href="Links/HewesCraft_SeaRunner.pdf"> Here</a> for a Printable Brochure.</p>
              <p><img src="imageswebsite/Hewescraft/searunnerfeaturesandoptions.jpg" width="612" height="792" alt="hewescraft searunner features and options" /></p>
            </div>
            <div class="TabbedPanelsContent">
              <h3>Ocean Pro Series</h3>
              <p><img src="imageswebsite/Hewescraft/hewesoceanpro.jpg" width="602" height="276" alt="hewescraft ocean pro" /></p>
              <p>Insert Text</p>
              <p>Click <a href="Links/HewesCraft_OceanPro.pdf">Here</a> for a Printable Brochure.</p>
              <p><img src="imageswebsite/Hewescraft/oceanprofeaturesandoptions.jpg" width="612" height="792" alt="hewescraft ocean pro features and options" /></p>
            </div>
            <div class="TabbedPanelsContent">Content 5</div>
            <div class="TabbedPanelsContent">Content 6</div>
          </div>
        </div>
        <p> </p>
        <div id="p"> </div>
        <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("Hewescraft_boats");
        </script>
      <!-- InstanceEndEditable --></div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("rockys_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar2 = new Spry.Widget.MenuBar("side_menu", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    <!-- InstanceEnd --></html>
    Any ideas?

    There is nothing wrong with the code that you have shown.
    I do not use templates, in fact I hate them. I use serverside includes which allows me to update any portion of the site without having to re-upload multiple documents.
    You will be better off placing your problem on the DW forum http://forums.adobe.com/community/dreamweaver/dreamweaver_general
    Gramps

  • Spry Tab Panel is not working properly on remote server

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

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

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

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

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

  • Spry Tabbed Panels does not work as I want

    Sorry, but this is an utter NOOB question.
    I tried to use a Gooey ment on my page, but it does not work as intended.
    Here it works OK: http://ppbm5.com/DB-PPBM5-2.php
    Here it does not work: http://ppbm6.com/Planning.html
    I assume it is related to the menu already on this page. Anyway, since this did not work, I tried to replace the Gooey menu with Spry Tabbed panels, but being an utter noob in this area, I have made some mistakes that the experts here can probably help solve easily. What happens:
    It looks OK in DW:
    Go to Live View and it still looks OK:
    but then go to the actual page and it looks like this:
    Why do the tabbed panels not display at the top of the page next to the vertical menu, like it does in DW?
    Second question: How can I add text to each page/ tabbed panel, like here http://ppbm6.com/Planning.html

    Spry Tabbed Panels 2.0 have a number of support files to make them run.
    <!--files for Spry Tabbed panels-->
    <script type='text/javascript' src='../Spry-UI-1.7/includes/SpryTabbedPanels2.js'></script>
    <script type='text/javascript' src='../Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryFadingPanelsPlugin.js'></script>
    <script type='text/javascript' src='../Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryTabbedPanelsKeyNavigationPlugin.js'></script>
    <link type='text/css' href='../Spry-UI-1.7/css/TabbedPanels2/SpryTabbedPanels2.css' rel='stylesheet'/>
    Below, I have a Spry demo page with 3 widgets on it.  If you look at the source code, you'll see how the the various support files are organized.
    Function code is near the bottom of the page.
    http://alt-web.com/DEMOS/Spry-test.html
    Second question: How can I add text to each page/ tabbed panel, like here http://ppbm6.com/Planning.html
    Turn off CSS.  View > Style Rendering > un-tick Display Styles.  You'll see an unstyled HTML page in Design View.  But this won't effect styles in Live View or Preview.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/

Maybe you are looking for