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

Hi there,
I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DND Perspective</title>
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #2B3856;
.style1 {
color: #FFFFFF;
.style4 {
color: #FFFFFF;
font-size: 36px;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
margin-left: 250px;
.style5 {color: #CCCCCC}
.style11 {
font-size: 18pt;
font-style: italic;
a:link {
color: #FFFF00;
a:visited {
color: #000000;
a:hover {
color: #000033;
-->
</style></head>
<body>
<div align="center">
  <p align="left" class="style4">DND  </p>
</div>
<p align="left">
<img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" />  </p>
<p align="center">
<p align="center">
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup" >
    <li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
    <li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
    <li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent style1">
      <div align="center">
        <p class="style11">Welcome to DND </p>
        <p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
        <p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
        <p>Please visit our services page to discover all photography sessions we have available such as:</p>
        <p>Wedding Photography</p>
        <p> Engament Photos</p>
        <p>Senior Portraits </p>
        <p>Anniversary</p>
        <p>&amp; More!!!</p>
        <p> </p>
      </div>
    </div>
    <div class="TabbedPanelsContent">
      <p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
    </div>
    <div class="TabbedPanelsContent">Under Construction...</div>
    <div class="TabbedPanelsContent">Under Construction....</div>
    <div class="TabbedPanelsContent style1">
<p>We hear at DND  understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &amp;
packages, custom videos, thank you cards and albums.</p>
           <hr width="50%" align="left" />
      <p><strong>Package 1 - $500.00</strong></p>
      <p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
      <p><strong>Package 2 - $575.00</strong></p>
      <p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
      <p><strong>Package 3 - $700.00</strong></p>
      <p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
      <p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
           <hr width="50%" align="left" />
      <p><strong>Prints</strong>: (Fine Art High Quality)**</p>
      <p>Individual prices: 8&quot;x10&quot; = $12.99; 10&quot;x13&quot; = $19.99; 2 - 5&quot;x7&quot; = $12.99; 4 - 4&quot;x6&quot; = $11.99</p>
      <p>(Custom sizes available - Custom framing available)</p>
      <p><strong>Package 1:</strong></p>
      <p>3 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $50.00</p>
      <p><strong>Package 2:</strong></p>
      <p>5 - 8&quot;x10&quot;; 6 - 5&quot;x7&quot;; 6 - 4&quot;x6&quot; = $90.00</p>
      <p><strong>Package 3:</strong></p>
      <p>8 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $125.00</p>
      <p><strong>Package 4:</strong> (Basic Prints)</p>
      <p>Any 100 photos printed 4&quot;x6&quot; = $100.00</p>
           <hr width="50%" align="left" />
      <p><strong>Custom video:</strong>**</p>
      <p>Any 100 photos put to royalty-free music = $50.00</p>
          <hr width="50%" align="left" />
      <p><strong>Custom thank you cards for your guests:</strong>**</p>
      <p>300 cards - 4&quot;x6&quot; = $350.00</p>
      <p>100 cards - 4&quot;x6&quot; = $150.00</p>
     <hr width="50%" align="left" />
      <p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
      <p>Bride &amp; Groom Albums</p>
      <p>Parent Albums</p>
           <hr width="50%" align="left" />
      <p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
    </div>
    <div class="TabbedPanelsContent style5">
      <p> Contact DND Perspective:</p>
      <p>The best way to reach us is via email .</p>
      <p>You can alternately reach us anytime at ...!</p>
    </div>
    <div class="TabbedPanelsContent">
      <div align="center">
        <p><span class="style1">About Info</span></p>
        <p> </p>
      </div>
    </div>
  </div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
  </script>
</body>
</html>

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

Similar Messages

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

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

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

  • I am working on big project and in accidentally flatten the file and i saved it as PSD in then I exited Photoshop. the next time when i open the file it is merged on one page. please help!

    I am working on big project and in accidentally flatten the file and i saved it as PSD in then I exited Photoshop. the next time when i open the file it is merged on one page. please help!

    Flattening and merging are very similar. The main difference is merging keeps the transparent areas, whereas flattening removes all transparent areas by giving it a white background. A good example of flattening is a jpg image.
    Since you have closed the file by closing photoshop, that means that the history is now gone, no way of undoing.
    So that leaves you with two choices.
    You can either recreate the whole document.
    Or you can make selections of areas you are keeping and moving them one at a time to new layers. Keep each object on a separate layer. Then redo the area behind those objects.

  • Spry Tabs displaying all content in IE8

    Hi,
    I have been looking at using the spry tabs panel to display content, it works perfectly fine in Safari and Firefox, but in explorer 8 all the panels display one underneath the other?
    I have played around with the layout and am probably out of my depth...
    If anyone knows a way I can fix this, otherwise I will use a simpler display.
    Thanks
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="CSS/css.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab1">
          <h1>$500 </h1>
         <p> Starter pack.</p>
          </li>
          <li class="TabbedPanelsTab" >
    <h1>$900 </h1>
            <p>A bit more special.</p>
          </li>
          <li class="TabbedPanelsTab">
    <h1>Custom </h1>
            <p>For something extra.</p>
          </li>
          <li class="TabbedPanelsTab">
            <h1>Design Services</h1>
            <p>content.</p>
          </li>
          </li>
        </ul>
        <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent1">
          <div class="contentimage"><img src="images/page-design.gif" width="400" height="312" alt="example of designs" longdesc="images/page-design.gif" /></div>
          <div id="content">
    <ol>
    <li>option 1.</li>
                        <li>option 2.</li>
                  <li>option 3.</li>
                  <li>option 4.</li>
                  <li>option 5.</li>
                    </ol>
    <p>Create an interesting space.</p>
        <div align="center"><a href="web me.html#pageinfo"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
          </div>
    </div><!--TabbedPanelsContent1 ends here-->
    <div class="TabbedPanelsContent2">
          <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
          <div id="content">
    <ol>
    <li>option 1.</li>
                        <li>option 2.</li>
                  <li>option 3.</li>
                  <li>option 4.</li>
                  <li>option 5.</li>
                    </ol>
    <p>Create an interesting space.</p>
          <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
          </div>
    </div><!--TabbedPanelsContent2 ends here-->
    <div class="TabbedPanelsContent3">
         <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
          <div id="content">
    <ol>
    <li>option 1.</li>
                        <li>option 2.</li>
                  <li>option 3.</li>
                  <li>option 4.</li>
                  <li>option 5.</li>
                    </ol>
    <p>Create an interesting space.</p>
          <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
          </div>
    </div><!--TabbedPanelsContent3 ends here-->
    <div class="TabbedPanelsContent4">
          <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
          <div id="content">
    <ol>
    <li>option 1.</li>
                        <li>option 2.</li>
                  <li>option 3.</li>
                  <li>option 4.</li>
                  <li>option 5.</li>
                    </ol>
    <p>Create an interesting space.</p>
          <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
          </div>
    </div><!--TabbedPanelsContent4 ends here-->
        </div>
      </div>
    <div id="design">
      <div class="topline"></div>
      <div id="leftcoloumn">
      <h1> Simple affordable website design in Auckland</h1>
         <p>As designers on Auckland's North Shore we set out to offer an affordable easy way to create special spaces etc..</p>
        </div><!--left coloumn ends here-->
    <div class="centerline"></div><div id="rightcoloumn">
        <h1>Specialising in creating special spaces. </h1>
       <ol>
          <li>Create a space you'll love.</li>
          <li>Fit your budget.</li>
                             </ol>
        </div><!--right coloumn ends here-->
      </div><!--design column ends here-->
    <div id="footer"> 
    </div><!--footer ends here-->
    </div><!--container ends here-->
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    //-->
    </script>
    </body>
    </html>
    @charset "UTF-8";
    .TabbedPanels {
    margin: 0px;
    padding: 0px;
    float: left;
    clear: none;
    width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    #container #TabbedPanels1 .TabbedPanelsTabGroup .TabbedPanelsTab1 h1 {
    font-size: 18px;
    color: #52542D;
    #container #TabbedPanels1 .TabbedPanelsTabGroup .TabbedPanelsTab h1 {
    font-size: 18px;
    color: #52542D;
    .TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
    margin-left: 30px;
    .TabbedPanelsTab {
    position: relative;
    top: 435px;
    float: left;
    width: 203px;
    padding: 12px 10px;
    margin: 0px 1px 0px 0px;
    background-color: #CCC;
    list-style: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #666633;
    border-bottom-color: #666633;
    border-left-color: #CCC;
    overflow: visible;
    .TabbedPanelsTab1 {
    position: relative;
    top: 435px;
    float: left;
    width: 203px;
    padding: 12px 10px;
    margin: 0px 1px 0px 0px;
    background-color: #CCC;
    list-style: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #666633;
    border-bottom-color: #666633;
    border-left-color: #666633;
    overflow: visible;
    .TabbedPanelsTabHover {
    background-color: #FFF;
    .TabbedPanelsTabSelected {
    background-color: #FFF;
    border-bottom: 1px solid #666633;
    .TabbedPanelsTab a {
    color: black;
    text-decoration: none;
    .TabbedPanelsContentGroup {
    position: relative;
    bottom: 90px;
    clear: both;
    min-height: 430px;
    height: auto;
    margin-right:27px;
    margin-left: 30px;
    background-image: url(../images/content-box.gif);
    background-repeat:no-repeat;
    .TabbedPanelsContent {
    padding: 4px;
    .TabbedPanelsContentVisible {
    .VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #EEE;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    .VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
    .VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
    .VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;
    #container #content {
    width: 395px;
    float: right;
    margin-top: 35px;
    padding-right: 20px;
    #container #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent1.TabbedPanelsContentVisible #content .image {
    margin-top: 27px;
    #container .contentheaders {
    margin-right: 8px;
    #container .contentimage {
    float: left;
    margin-top: 35px;
    padding-left: 40px;

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

  • Spry Tabbed Panels: Title Tabs shift left, Content Tabs stay positioned correctly, right.

    I inserted a clean Spry Tabbed Panel into a virtually empty HTML page (no content). I have a content div (624 px , float left) and sidebar (336 px, float right). When I insert the tabbed panel widget into the sidebar, the Spry Title Tabs go or float to te left, while the content portion of the Spry Tabbed panel stays correctly positioned within the sidebar on the right. I looked at the Spry CSS notes, and mentions something of by default they float the tabs left to allow for future divs without problems?? This problem only shows in Design View (leading me to think I've done something wrong). When viewed in Live View or Browser it looks fine, perfect! I have tried several float and clear combinations, none ave helped. I also deleted the Spry Tabbed CSS as to reset to default. Any Help or Advice would be greatly appreciated. Thank you

    Design View is not an accurate representation. Don't rely on it.  Use Live View and Preview in Browsers.
    Incidentally, the Spry framework is gone from DW now.  Most people have moved away from Spry to  jQuery or commercial widgets.
    JQuery UI Tabbed Panels
    http://jqueryui.com/tabs/
    jQuery Easy Tabs
    http://os.alfajango.com/easytabs/
    Nancy O.

  • Set Default Spry Tabbed Panel As Close Until Mouse Over

    Dear All,
    Is there a way to set the default spry tabbed panel to be closed when the page load untilI mouse over it??
    here is the link to my page http://www.senhuiauto.com/model_code_link.html. As you can see, it roll down by default.
    How to fix??
    Below is my SpryTabbedPanel.js
    var Spry;
    if (!Spry) 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.bindings = [];
    this.tabSelectedClass = "TabbedPanelsTabSelected";
    this.tabHoverClass = "TabbedPanelsTabHover";
    this.tabFocusedClass = "TabbedPanelsTabFocused";
    this.panelVisibleClass = "TabbedPanelsContentVisible";
    this.focusElement = null;
    this.hasFocus = false;
    this.currentTabIndex = 0;
    this.enableKeyboardNavigation = true;
    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.onTabClick = function(e, tab)
    this.showPanel(tab);
    Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
    this.addClassName(tab, this.tabHoverClass);
    Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
    this.removeClassName(tab, this.tabHoverClass);
    Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
    this.hasFocus = true;
    this.addClassName(this.element, this.tabFocusedClass);
    Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
    this.hasFocus = false;
    this.removeClassName(this.element, this.tabFocusedClass);
    Spry.Widget.TabbedPanels.ENTER_KEY = 13;
    Spry.Widget.TabbedPanels.SPACE_KEY = 32;
    Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
    var key = e.keyCode;
    if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))
      return true;
    this.showPanel(tab);
    if (e.stopPropagation)
      e.stopPropagation();
    if (e.preventDefault)
      e.preventDefault();
    return false;
    Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
    var stopTraversal = false;
    if (root)
      stopTraversal = func(root);
      if (root.hasChildNodes())
       var child = root.firstChild;
       while (!stopTraversal && child)
        stopTraversal = this.preorderTraversal(child, func);
        try { child = child.nextSibling; } catch (e) { child = null; }
    return stopTraversal;
    Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
    var self = this;
    Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { 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);

    You may be better off asking this question over at the forum dedicated to the Spry Widgets:
    Spry forum.

  • Spry tabbed panels with a Google map?

    I am building a website with a CS4 Spry tabbed panel (fixed size).  On one of the tabs I have a Google map.  All works well except....   When I am on a tab different from the map tab and resize the browser window, when I go to the map tab the map does not display or work correctly.  A small amount of the map will display in the upper left of the tab panel.
    Any ideas?
    Thanks, any help is appreciated.
    -David
    <div id="mainContent">
    <h2 id="pageheader">Garden Tours and Events</h2>
    <div>
    <div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Map</li>
    <li class="TabbedPanelsTab" tabindex="0">Text</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent" id="map" style="height: 500px; width: 770px;">
    <script type="text/javascript">
    </script>
    </div>
    <div class="TabbedPanelsContent"  style="height: 500px;">
    <p> </p>
    <p> </p>
    <table border="0" id="gardenTourData">
    <tr>
    <th scope="col">Date</th>
    <th scope="col">State</th>
    <th scope="col">City</th>
    <th scope="col">Event Type</th>
    <th scope="col">Id</th>
    <th scope="col">Coordinates</th>
    </tr>
    <?php do { ?>
    <tr onClick="window.open('http://localhost/details.php?id=<?php echo $row_rsListGardenTours['id'] ?>','detailsWindow','width=656,height=600,scrollbars=yes')" >
    <td><?php echo $row_rsListGardenTours['tour_date']; ?></td>
    <td><?php echo $row_rsListGardenTours['state']; ?></td>
    <td><?php echo $row_rsListGardenTours['town_city']; ?></td>
    <td><?php echo $row_rsListGardenTours['event_type']; ?></td>
    <td><?php echo $row_rsListGardenTours['id']; ?></td>
    <td><?php echo $row_rsListGardenTours['start_location_coordinates']; ?></td>
    </tr>
    <?php } while ($row_rsListGardenTours = mysql_fetch_assoc($rsListGardenTours)); ?>
    </table>
    </div>
    </div>
    </div>
    </div>
    </div> <!-- end #mainContent -->

    It is best to check the forum first before asking for assistance.
    Have a look here http://forums.adobe.com/message/33236#33236
    or here http://forums.adobe.com/message/2654715#2654715
    I hope this helps.
    Ben

  • Google Analytics on Spry Tabbed Panels

    I have created a website where I am using a few main html pages and have vertical Spry Tabbed panels for sections of information within most of the pages.  I wish to track the clicks on the vertical Tabbed panels, but I am not having much luck implementing it.  I could probably figure it out if I saw an example somewhere.  I have also implemented a "back button" feature (thanks to Arnout Kazemier!) and clicking to go directly to a tab on a page using the SpryUtils into the default tab option for Spry Tabbed Panels.  The Google Analytics web pages have information on gadget tracking, and one on tracking AJAX,  and one on using the newer asynchronous tracking (which is supposed to be better for Ajax, etc).   I have tried to implement asynchronous tracking along with the "Tracking AJAX" recommendation by Google with no information being posted in a couple of days.
    My website page where I have tried to implement it is here:
    http://www.phostech.com/opt_con_v2.html
    I have also seen examples where a counter is used just to count, but I would like the information on which pages were clicked.
    I would rather not do this using the event tracking (but if that's the only way I'm OK), partly because the event tracking would be separate from the page tracking and the other features woudn't be as useful (exit page, sorting based on content, etc.).
    I am not a great programmer, but I could probably manage it I saw an example close enough to what I need.
    If anyone has any ideas, solutions, implemented examples that could help me, I would greatly appreciate it.
    Thanks!

    I have checked out your page using Firefox, firebug net panel that monitors requests from and to your page. And i do see a successful call to the google servers. But I also noticed a JavaScript error on your page caused by these lines of code:
      http_request.onreadystatechange = sendAlert;
           http_request.open('GET', url, true);
           http_request.send(null);
    You might want to remove those.

  • Spry Tabbed Panels and Pop Up Link from Image Hotspot

    I've created an image map with Hotspot links to either send to another web page or to open a previously created Pop Up window with information.
    I've imported my image, image map and Hotspots into a tab
    The issue I'm having is when clicking on the hotspot (within the Spry tabbed panel), to open the pop up page; it doesn't work
    If I select a Hotspot which sends users to another web page, that works ok.
    Would appreciate it if someone else who has run into this and what your recommendation is for a fix.
    thanks, R Silva

    Hi,
    Unable to post to a public server; however I've attached the files so the code can be reviewed.
    thanks

  • More than one spry tabbed panels

    Hi,
    On my index page I have a tabbed panel with it own css (size,
    color, etc.)
    I would like to insert another tabbed panel on another page
    (tabbed panel2). I would like this to have its own css style
    (different size, color scheme, etc.)
    When I insert a spry tabbed panel in dreamweaver it
    automatically takes on the css of my original tab panel design! How
    can I let the second tabbed panel take on its own life, completely
    independent of the first one?
    Thank you.

    "chris.cavage" <[email protected]> wrote in
    message
    news:gnuk7l$hoj$[email protected]..
    > How can I let the second tabbed panel
    > take on its own life, completely independent of the
    first one?
    Create a second set of CSS rules for it. The easiest way is
    to make a
    copy of SpryTabbedPanels.css, and call it
    SpryTabbedPanels2.css. Link
    SpryTabbedPanels.css to the original page, and
    SpryTabbedPanels2.css
    to the page that you want to look different.
    David Powers
    Adobe Community Expert, Dreamweaver
    http://foundationphp.com

  • Dividing Spry Tabbed Panels content area into columns?

    Hi there.
    I am building a website and I want to divide the content area of a Spry Tabbed Panel into 3 columns for text.
    How can I do this?
    I thought about making divs inside the Panel but it would be too messy.
    Please let me know if there is a simple way to do this.
    Thanks in advance.

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryTabbedPanels.js"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
    <style>
    * {box-sizing: border-box;}
    body {width: 960px; margin: auto;}
    .TabbedPanelsContentVisible {overflow: auto;}
    .col33 {width: 33.3333%; float: left; padding: 15px;}
    </style>
    </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 class="col33">
              <h3>Column 1</h3>
            <p>Content 1</p>
            <p>Dicta sunt explicabo. Nisi ut aliquid ex ea commodi consequatur? Neque porro quisquam est, aut odit aut fugit, ut aut reiciendis voluptatibus maiores alias. Iste natus error sit voluptatem dicta sunt explicabo. Sed quia consequuntur magni dolores eos itaque earum rerum hic tenetur a sapiente delectus, cum soluta nobis est eligendi optio. Omnis voluptas assumenda est, nemo enim ipsam voluptatem neque porro quisquam est.</p>
            <p>Eaque ipsa quae ab illo inventore veritatis totam rem aperiam, qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, aut odit aut fugit, ut enim ad minima veniam. Id est laborum et dolorum fuga. Atque corrupti quos dolores et quas molestias qui ratione voluptatem sequi nesciunt. Temporibus autem quibusdam saepe eveniet ut et voluptates repudiandae sint sed quia non numquam eius modi.</p>
          </div>
            <div class="col33">
              <h3>Column 2</h3>
            <p>Content 1</p>
            <p>It is the star to every wand'ring bark, which alters when it alteration finds, love alters not with his brief hours and weeks. Or bends with the remover to remove. That looks on tempests and is never shaken; admit impediments; love is not love let me not to the marriage of true minds.</p>
          </div>
            <div class="col33">
              <h3>Column 3</h3>
            <p>Content 1</p>
            <p>The three cs - customers, competition and change - have created a new world for business while those at the coal face don't have sufficient view of the overall goals. In order to build a shared view of what can be improved, building a dynamic relationship between the main players. Highly motivated participants contributing to a valued-added outcome.</p>
            <p>Whether the organization's core competences are fully in line, given market realities the components and priorities for the change program an important ingredient of business process reengineering. Taking full cognizance of organizational learning parameters and principles, organizations capable of double-loop learning, working through a top-down, bottom-up approach. In order to build a shared view of what can be improved, maximization of shareholder wealth through separation of ownership from management measure the process, not the people. Presentation of the process flow should culminate in idea generation, taking full cognizance of organizational learning parameters and principles, the components and priorities for the change program. An investment program where cash flows exactly match shareholders' preferred time patterns of consumption from binary cause and effect to complex patterns, working through a top-down, bottom-up approach.</p>
          </div>
        </div>
        <div class="TabbedPanelsContent">Content 2</div>
      </div>
    </div>
    <script>
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>

  • Spry tabbed panels: Shows everything when it shouldn't

    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.
    Any suggestions.

    The problem is with the tag name "s_phone".
    If iPhone Safari sees a tag name containing "phone", it automatically assumes you need the phone keypad. (Something similar goes for "zip".)
    Here's a test case setup someone made:
    http://www.iphonewebdev.com/examples/input.html

  • Anchor tag inside Spry Tabbed Panel Content

    I have successful been able to use code I found listed on
    here to open a specific tab in a Spry Tabbed Panel form a link. Now
    I am wondering if anyone has found out how to add an anchor tag
    code this so that is goes to a specific location inside that Tabbed
    Panel Content?

    I was looking for an answer on how to open a tab from another tab and found it!
    In return I'll give you a hint on how to open a tab from another tab using an anchor
    for example,
    if you were working on a file named "projects.php"
    create an anchor in tab 2
    <a name="anchor1" id="anchor1"></a>come next to me
    in tab 1 create the link to the anchor in tab 2
    <a href="projects.php#anchor1" onclick="TabbedPanels1.showPanel(1); return false;">open tab 2 and go to its anchor 1</a>
    In your case you are overlooking the file name and jumping directly to the anchor name.....am I right??
    cheers from Lima, Perú

  • Tabbed panels no longer showing up

    Hi folks, for quite some time I have used the widge Spry Tabbed Panels 2.0 in this page: www.arrowmark.co.nz/clients  and on this pagehttp://tatlerprime.co.nz/conference.html but the tabs no longer show up and all the content is laid out vertically down the page. With Altruistic Gramps' help I have customised my pages to enable quick links to tabs and named anchors and other helpful tweaks to help visitors navigate around the tabs and their contents.
    Several things have happened since I built those pages: my Windows 7 profile became corrupted and I had to start a new profile which meant I lost access to app data. I also upgraded to DW cs6. And I also lost access to my widgets panel.
    Any one of these issues could have caused the problem but it may also be that this widget no longer works in Cs6.
    However, there is a further possibility: that I have inadvertently made a change in code which is preventing the tabs from appearing. Is anyone able to take a quick look and let me know which is the most likely before I start a rebuild from scratch?
    Thanks in advance,
    Jo
    [update: I have narrowed down the problem. The panels fall apart when I change the defaultTab value from 0 to "params.tab ? params.tab : 0", (which I am using as part of a script that enables me to send email links and set menu bar links to particular tabs and their contents. If anyone knows another way to achieve this aim without affecting tab behaviour, I'd be really grateful. As Altruistic Gramps kindly provided me with the code I have messaged him but am also asking here in case anyone is able to help me before he gets on line next]
    Message was edited by: BoppyW to provide update

    The problem is because you're linking to Adobe Labs for SpryURLUtils.js:
    <script src="http://labs.adobe.com/technologies/spry/includes/SpryURLUtils.js"></script>
    Adobe announced a couple of weeks ago that it was no longer investing in the development of Spry (see
    http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l). As a consequence, the files are no longer available on Adobe Labs.
    You need to download the Spry files from GitHub. Copy SpryURLUtils.js into your local site, and link to the local version rather than the one on Adobe Labs.

  • 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 &quot;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 &quot;Tourism Status&quot;  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 &amp; 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 &quot;Right Of Use&quot; 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><!-- this stays empty to put dotted line under listings block -->
         </div>
         <div class="cleaner"></div>
        </div> <!-- end of main column -->

    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.

Maybe you are looking for

  • A better way to do ChangeListeners?

    I find myself having to implement multiple change listeners in a single class, and I was wondering if there was a way to do this that wouldn't trigger compilation problems. For example, let's say you have a LineChart, and you want the chart to listen

  • How can i stream some files via my macbook pro

    how can i stream some files via my macbook pro and my WD TV LIVE

  • Incorrect Battery Time

    I recently started having a problem with my battery time display. The battery still lasts about two hours on a full charge, however, the time and percentage displayed are very wrong. As of right now, it says I have 11:39 remaining or 93%. In reality,

  • How to use the "IN"  method in ejb3ql  -------variable of LIST

    public List findExamScoreinterface(List userid){ String connselect="select o from TCJExamScore o where o.userID IN(:userID)"; Query query=em.createQuery(connselect); query.setParameter("userID",userid); return query.getResultList(); It can not perfor

  • Cannot download from iTunes Match

    I have a smart playlist that displays all the tracks I have locally that are Matched with iTM, but are a lesser bit-rate than their 256kbs. Every so often i go through the tracks I have that are in this playlist, delete them locally and then re-downl