Spry Tabbed Panels2 IE8 Issue

I have a problem where I have Spry Tabbed Panels 2 implemented in a Magento CMS page. In Opera, Firefox, Safari it works exactly as I want. In IE (I have IE8, but I've been told the problem also shows up in IE7) the content displays for the first tab only. The 2nd and 3rd tabs do not show the content. The web page is at http://www.gulfcoastvirtualmall.com. Here is the html for the tabbed panel:
<script src="/js/spry/SpryDOMUtils.js" type="text/javascript"></script>
<script src="/js/spry/SpryDOMEffects.js" type="text/javascript"></script>
<script src="/js/spry/SpryWidget.js" type="text/javascript"></script>
<script src="/js/spry/SpryPanelSet.js" type="text/javascript"></script>
<script src="/js/spry/SpryPanelSelector.js" type="text/javascript"></script>
<script src="/js/spry/SpryFadingPanels.js" type="text/javascript"></script>
<script src="/js/spry/SpryTabbedPanels2.js" type="text/javascript"></script>
<script src="/js/spry/plugins/TabbedPanels2/SpryFadingPanelsPlugin.js" type="text/javascript"></script>
<script src="/js/spry/plugins/TabbedPanels2/SpryTabbedPanelsKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="/js/mapper/mapper.js" type="text/javascript"></script>

<h1 style="text-align: center;"><span style="text-decoration: underline; color: #ff6600;"><strong>Mall Stores</strong></span></h1>
<div id="TabbedPanels2">
<h2>GROUND FLOOR</h2>
<p><img class="mapper" style="border-style: none; display: block;" usemap="#gulf-coast-virtual-mall-map" src="/media/gulf-coast-virtual-mall-map.png" alt="Gulf Coast Virtual Mall Ground Floor" />
<map id="gulf-coast-virtual-mall-map" name="gulf-coast-virtual-mall-map">
<area class="noborder icolorff9900" title="Inspired Silk - Silk florist that produces custom arrangements and has a floral warehouse containing a huge selection of floral supplies." shape="rect" coords="11,151,160,206" href="http://store.inspiredsilk.com" alt="Inspired Silk" />
<area class="noborder icolorff9900" title="The Main Event has very high quality leather belts, buckles and motorcycle leathers including jackets, vests and chaps." shape="poly" coords="275,17,369,17,369,151,343,151,297,104,280,105,276,100" href="http://www.themaineventofflorida.com" alt="The Main Event has very high quality leather belts, buckles and motorcycle leathers including jackets, vests and chaps." />
<area class="noborder icolor00ff00" title="The Atrium is integrated within the Mall and is our Social Network which is open to the public." shape="poly" coords="229,136,242,121,255,120,266,129,276,121,286,121,302,134,303,147,294,157,304,168,3 03,180,291,195,274,195,267,186,260,192,245,194,230,181,229,169,239,158,229,147" href="http://social.gulfcoastvirtualmall.com" alt="The Atrium" />
<area class="noborder icolorff9900" title="VzPrints has very high quality prints of sports, famous people, actors and actresses, movies and much more." shape="poly" coords="390,203,402,203,417,217,470,218,470,233,452,234,452,245,447,250,450,256,462,259,4 48,269,389,269" href="http://www.vzprints.com" alt="VzPrints" />
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="8,14,8,91,159,93,160,83,147,81,148,51,127,31,103,30,103,38,88,38,88,14" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store Here" />
<area shape="default" />
</map>
</p>
<h2>FLOOR 2</h2>
<p><img class="mapper" style="border-style: none; display: block;" usemap="#gulf-coast-virtual-mall-map-floor2" src="/media/gulf-coast-virtual-mall-map-floor2.png" alt="" />
<map id="gulf-coast-virtual-mall-map-floor2" name="gulf-coast-virtual-mall-map-floor2">
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="13,208,12,208,159,208,160,238,158,239,157,250,11,251" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store here" />
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="370,21,369,151,418,151,417,123,419,123,420,114,484,114,484,68,452,68,451,31,460,3 1,461,18" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store here" />
<area class="noborder icolor00ff00" title="The Atrium is integrated within the Mall and is our Social Network which is open to the public." shape="poly" coords="229,135,229,148,239,158,230,168,230,180,242,194,255,195,267,186,275,194,289,195,3 04,181,305,168,293,157,304,148,304,135,289,120,277,120,267,130,256,121,244,121" href="http://social.gulfcoastvirtualmall.com" alt="The Atrium" />
<area shape="default" />
</map>
</p>
<h2>FLOOR 3</h2>
<p><img class="mapper" style="border-style: none; display: block;" usemap="#gulf-coast-virtual-mall-map-floor3" src="/media/gulf-coast-virtual-mall-map-floor3.png" alt="" />
<map id="gulf-coast-virtual-mall-map-floor3" name="gulf-coast-virtual-mall-map-floor3">
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="12,252,12,294,153,295,153,252,156,252" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store here" />
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="306,244,306,229,315,219,316,202,387,203,388,267,386,269,386,296,341,295,342,262,3 45,262,346,255,319,255" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store Here" />
<area class="noborder icolor00ff00" title="The Atrium is integrated within the Mall and is our Social Network which is open to the public." shape="poly" coords="230,135,244,121,255,121,265,130,278,121,289,121,304,136,303,145,295,155,294,158,3 04,167,303,180,291,195,275,195,267,186,258,194,243,194,230,182,229,168,238,158,230,146" href="http://social.gulfcoastvirtualmall.com" alt="The Atrium" />
<area shape="default" />
</map>
</p>
</div>
<script type="text/javascript">// <![CDATA[
var TabbedPanels2 = new Spry.Widget.TabbedPanels2("TabbedPanels2", {
            injectionType: "inside",
            widgetID: "TabbedPanels2",
            autoPlay: false,
            defaultTab: 0,
            enableKeyboardNavigation: true,
            hideHeader: true,
            tabsPosition: "bottom",
            event:"click",
            stopOnUserAction: true,
            displayInterval: 5000,
            minDuration: 300,
            maxDuration: 500,
            stoppedMinDuration: 100,
            stoppedMaxDuration: 200,
            plugIns:[]
// ]]></script>
<p> </p>
<p> </p>
<h1 style="color: #ff9900; text-decoration: underline; text-align: center;">A New Approach to Online Selling</h1>
<table style="width: 594px; height: 290px;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="middle">
<p style="text-align: center;"><a href="http://www.magento-mall.com/" target="_blank"> </a><a href="http://www.magento-mall.com/" target="_blank"><img title="Front End Demo" src="http://www.gulfcoastvirtualmall.com/index.php/admin/cms_wysiwyg/directive/key/ab5bb11d2d7f 999ec514519137cd6011/___directive/e3ttZWRpYSB1cmw9Ii9mcm9udGVuZGRlbW8uanBnIn19/" alt="Front End Demo" /></a></p>
</td>
<td> </td>
<td align="center" valign="middle">
<p style="text-align: center;"><a href="http://demo-admin.magentocommerce.com/index.php/admin/" target="_blank"> </a><a href="http://demo-admin.magentocommerce.com/index.php/admin/" target="_blank"> <img title="Admin Panel Demo" src="http://www.gulfcoastvirtualmall.com/index.php/admin/cms_wysiwyg/directive/key/ab5bb11d2d7f 999ec514519137cd6011/___directive/e3ttZWRpYSB1cmw9Ii9hZG1pbmRlbW8uanBnIn19/" alt="Admin Panel Demo" /></a></p>
</td>
</tr>
<tr style="text-align: center;">
<td>
<h3 style="text-align: center;"><span style="color: #ff9900;">Front End Demo</span></h3>
</td>
<td> </td>
<td>
<h3><span style="color: #ff9900;">Admin Panel Demo</span></h3>
</td>
</tr>
</tbody>
</table>
<p><span style="color: #ffffff;">So many of the choices out there that “claim” they have more features for your money fall short once you’ve signed up. What is actually being offered to you is a plain “vanilla” web site that looks just like many of the others you’ve seen. When you start working to get your store up and running you depend on reading documents from the hosting company’s web site. If you have to call for help you wait on hold and when you finally get someone on the phone they can’t answer your questions. You finally get your web site set up, your products loaded, but no one buys anything. You can’t tell if people are really even able to find your store. After spending hundreds of dollars you’re frustrated and angry. You should be. Now wouldn’t it be great to have a site that was all set up for you, ready for your products to be entered? And of course since you’ve decided to market your products online, it would be great if this site had a way to put your products in front of people looking for them. And last but certainly not least, it would be really nice to be able to pick up the phone and have a real person answer that is knowledgeable and really cares about helping you. It isn’t a dream any more, it has become reality.</span></p>
<p> </p>
<h3 style="text-align: center;"><span style="color: #ff9900;">An Overview of Our Solution Compared to Other Hosting Solutions</span></h3>
<h4> </h4>
<h4 style="text-align: center;"><img src="/media/upload/image/Features1.png" border="0" alt="" hspace="0" width="350" height="211" align="middle" /></h4>
<h4 style="text-align: center;"><img src="/media/upload/image/Features2.png" border="0" alt="" hspace="0" width="350" height="233" align="middle" /> <img src="/media/upload/image/Features3.png" border="0" alt="" hspace="0" width="350" height="243" align="middle" /></h4>
<h4> </h4>
<h3><span style="color: #ff9900;">Enterprise Class e-Commerce</span></h3>
<p><span style="color: #ffffff;">The software running the Mall site and all of the stores is new written by a commercial software company that specializes in e-commerce. Although the software is new it is extremely stable and has features other e-commerce software can’t match.</span></p>
<h4> </h4>
<h3><span style="color: #ff9900;">Feature Rich</span></h3>
<p><span style="color: #ffffff;">Getting past the shopping cart which is the one common thread among all e-commerce software there are many store owner and customer centric features. To start, you need to get your products in front of people that are looking for them. The system uploads your products to Google Merchant Center (formerly Froogle). If you change a price, an item goes out of stock the system automatically updates Google. The software has the ability to use almost any payment gateway. We chose PayPal as our initial offering since almost everyone is familiar with it. The shipping portion of the software allows a customer, in real time to find out (through an interface to the major shipping companies) what it costs for all of the shipping options available. Automated email communication with your customers which is triggered by you processing your orders. Unlike other e-commerce offerings, we do not limit how many products you can market or how many photos you use. The software allows you to create “configurable” products (multiple colors and sizes), bundled products (like custom built computers) where the customer can choose which options or sizes and colors they want. The system takes care of price differences as well with these types of product. And finally, although your online store is a business and businesses require time and energy to be successful the system emails you when you receive an order. You don’t have to stare at the screen waiting for orders. By now you’re probably thinking this is going to cost a fortune. Well, it doesn’t. We charge a $75.00 one time setup fee which also gives you 2 dedicated hours of training when you start. Each month you’ll be billed $50.00 and 3% (cumulative) of your transactions. The only other cost would be for templates to change the look and feel of your store. If you need an e-commerce site you owe it to yourself to talk it over with us.</span></p>
<h4> </h4>
<h3><span style="color: #ff9900;">Why A Virtual Mall?</span></h3>
<p><span style="color: #ffffff;">As with any other venture in life, strength comes in numbers or groups. People want “one stop shopping”, search engines love links and content rich sites. Grouping online stores creates an environment where customers will jump from store to store. Your products will be seen by more people. We also give you a site where you can see not just how many people, but where they are, where they came from, what search terms they used and how long they stayed along with much more information critical to make your business a success. The concept is simple, we do all the configuration and support you. You focus on your business. The link provided below is the front end of the mall. Go have a look, go through the stores. When you’re ready to move forward with a store or want more information, call or email us. The systems running the mall are owned by the company and are located on the company’s property. We have up to 15MB of network bandwidth which is scalable to 30MB (that’s quite a bit). As the mall grows we will monitor and add additional systems and network bandwidth to maintain the same level of service you enjoy today.</span></p>
I've tried everything I can think of to get this woking 100% and am getting a bit frustrated with it. Any help would be really appreciated!!!!
Thanks in advance!

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

Similar Messages

Spry Tabbed Panels Display Issue

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

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

Issue using spry regions in spry tabbed content

I am having a slight issue with making a slideshow in a spry tabbed panel set. I have tested my XML used for the slideshow in a basic blank page, where I created the spry source and detail regions, and it loads fine. When you click on the thumbnail, the detail region loads the image. But when I place the slideshow in my websites page, it is inside a spry tabbed panel set. Where it just doesn't seem to want to work.
Has anyone had this issue?
I posted a copy of the page at the link below. The slideshow is under the portfolio tab
http://www.fscproductions.net/spry/
Thanks
JF

Hi,
On the main forum page you will have read the following.
Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
After you have upgraded and not removed the remarks from the Spry files, we will have another look at it.
Ben

Spry Tabbed Panels: Issue in Safar 4

I am having an issue with Spry Tabbed Panels that only seems to happen in Safari 4. I am using Spry Tabbed Panels 1.4 through Dreamweaver CS3. The tab panel still works great. Now, though, when you select a tab, it put a blue link border around the tab itself. When you load the page the tabs are fine. It only occurs when you select a tab and only on the selected tab. I looked around for any other sites that were using tabbed panels and it happens on those sites as well.
I am including a site I found that has a perfect example:
http://www.daughterskitchen.com/cookiediet.html
Click on one of the tabs where it says about the cookie diet.
I have looked into any way to stop this from happening. Has anyone seen this and come up with a solution?
If you need more info, let me know.
Thanks.

I think your are referring to the css attribute: outline:none;
Added outline:none; to the css rule and it should be gone.

Spry Tabbed Panels issue

I'm having an issue with a footer table that is underneath my spray asset. When you open the site in Safari, this table appears off to the side of the spry content, when I'd like it to appear beneath the content..as it is a footer..This ONLY happens in Safari! It works perfectly fine in IE, Chrome, and Firefox.
I think it may have something to do with the fact that each content area of the tabbed panels is a different height, but I'm not sure how to go about fixing this. Can anyone help me?
Here's the website:
http://www.duffsdepew.com
Thanks so much!

You are using Spry version 1.4. At the very least you should be using Spry version 1.6 which will likely overcome your problem.
Even better is if you switch to Spry Tabbed Panels 2. Have a look here http://labs.adobe.com/technologies/spry/ui/
I hope this helps.
Ben

Spry Tabs displaying all content in IE8

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

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

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

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

Firefox - Spry tabbed panel issue

Hi, need a little trouble shooting help here.
This works fine in ie7 but not Firefox 2 or 3. The Spry
Tabbed Panel just looks like an ordinary unordered list but it's
still clickable.
I've placed the script in the header and the css is imported
in the main style sheet.
The live site is here:
www.precisionhomesanddesign.com
Thanks to all who take a moment to look into this.
- palmtek

Cory C. wrote:
> Hi, need a little trouble shooting help here.
> This works fine in ie7 but not Firefox 2 or 3. The Spry
Tabbed Panel just
> looks like an ordinary unordered list but it's still
clickable.
> I've placed the script in the header and the css is
imported in the main style
> sheet.
> The live site is here:
http://www.precisionhomesanddesign.com/
Cory,
I copied and pasted your code into a new document locally and
then attached the JavaScript and CSS files for the Tabbed panels
and it styled and worked correctly for me. I then noticed that your
live page you have the Spry CSS files imported into your mainStyler
using the following syntax:
@import url ("../includes/SpryTabbedPanels.css");
I tried similar syntax using Dreamweaver to link in the css
file into an attached CSS file and it created code like this:
@import url("../SpryAssets/SpryTabbedPanels.css");
and it then began to work. It took a while, but it finally
struck me that there is a space between url and ( in your code and
none in the code I had created. So I added a space to my code and
then the styling broke, removed it and the styling came back. So
try removing the space (probably for all 3 @imported files) and see
how that works out for you.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry Menu 2.0 issues in IE7..   yes another one!

I have CS4, and have used the widget browser to create a Spry Menu 2.0 and have imported it to my site. It displays fine in every browser except for IE7. I have been reading a LOT of threads on issues similiar to this one, so I'm prepared to tell everyone I know to upgrade to at least IE8!! However, I would like to fix it if possible. The menu bar is located in an include file and is attached to all my pages through the php function. I have made zero changes to the css code since I imported it into the site.
I also am wondering why there are two css pages for the menu bar.??
Any help would be appreciated..
One of the pages on the site is: michaelandrewshairstudio.com/offers.php
That page is: ( I have taken out some meta tags and content, but the div's are all still in place.) I also deleted some commented tags by accident when I imported it..
<!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>Michael Andrews Hair Salon Offers</title>
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBar.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryDOMUtils.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryDOMEffects.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryWidget.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryMenu.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js"></script>
<link href="CSS/stylesA.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="header">
<div id="navbar">
<?php include("Spry-UI-1.7/includes/SpryMenuBar.php"); ?>
</div>
</div>
<div id="mainbody">
<div id="logo">
</div>
<hr />
<div id="content">
</div>
</div>
<div id="footer">
<div id="footernav">
</div>
<div id="footertext">
</div>
</div>
</div>
</body>
</html>
SpryMenuBar.css
#MenuBar {
background-color:#333;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
            MenuItem, and MenuItemLabel
            at a given level all use same definition for ems.
            Note that this means the size is also inherited to child submenus,
            so use caution in using relative sizes other than
            100% on submenu fonts. */
font-weight: normal;
font-size: 14px;
font-style: normal;
padding:0;
border-color: #999999 #999999 #999999 #999999;
border-width:3px;
border-style: outset outset outset outset;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
    For most items, we have to do top or bottom padding or borders only on the MenuItem
    or a child so we keep the entire submenu tiled with items.
    Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 24px 0px 0px;
background-color:#333333;
border-width:1px;
border-color: #cccccc #ffffff #cccccc #999999;
border-style: none none none solid;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none solid;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#cccccc;
background-color:#333333;
padding: 6px 15px 6px 39px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
font-style: normal;
background-color:#666666;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#666666;
color:#cccccc;
padding: 6px 12px 6px 5px;
width: 7em;
width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #333333;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #333333; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #333333;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color: #666666;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #666666;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color:#333;
min-width:100%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
     and your personal taste.
     0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
     on MenuItemContainer and MenuItem on the parent
     menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
     the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #ffffff;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
    vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
    to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #333333; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #666666; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
SpryMenuBasic.css
/* SpryMenuBasic.css - version 0.5 - Spry Pre-Release 1.7 */
/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
/* This is the css for a basic Spry 2 MenuBar.
* The first section is basic layout, and should in general not need to be modified.
* The final section of this file specifies images to use for arrows for the menu. These
* are either down or right-pointing as required by horizonatal or vertical layouts. You
* can either replace the referenced images with your own, or you can modify these rules to
* point to your won images.
* These rules are supplemented by those specified in the OAM file for inclusion in the html document,
* or alternatively, the file SpryMenuBarBasicSkin.css which is included with this widget. */
/* Resets for ul and li in menus */
.MenuBar .MenuBarView, .MenuBar .SubMenuView {
display:block;
list-style:none;
margin:0;
padding:0;
/*** Layout Rules for Basic Menu ***/
/* Top Level MenuBar
* Because we float the MenuItemContainers in the MenuBar, we have to make sure the menubar wrapper expands to hold them all.
* The simplest way is to float the widget wrapper
.MenuBar { /* overridden by .MenuBarVertical version of this rule */
float:left;
width:100%;
.MenuBarVertical {
float:left; /* Used to make menubar shirink to fit contents */
width:auto;
/* SubMenus */
.MenuBar .SubMenu {
display:block;
position:absolute;
top:0;
left:-10000px; /* By default, all non-visible submenus are hidden by moving way to the west */
padding:0;
/* First level of submenus - pulls down from horizontal menubar, right from vertical */
.MenuBar .SubMenuVisible{ /* overridden by .MenuBarVertical version of this rule */
top:100%;
left:0px;
.MenuBarVertical .SubMenuVisible {
top:0px;
left:100%;
/* All submenus below level 1. All pullout to the right */
.MenuBar .SubMenu .SubMenuVisible {
display:block;
position:absolute;
top:0px;
left:100%;
/* MenuItems, MenuItemLabels, and MenuItemContainers */
.MenuBar .MenuItem {
display:block;
text-decoration:none;
.MenuBar .MenuItemLabel {
display:block;
.MenuBar .MenuItemContainer {
position:relative;
white-space:nowrap;
float:left; /* overridden by .MenuBarVertical version of this rule */
display:block;
margin:0;
padding:0;
.MenuBarVertical .MenuItemContainer {
float:none;
.MenuBar .SubMenu .MenuItemContainer {
float:none;
/* Layout Rules needed by IE6 - excluded from other browsers */
.SpryIsIE6 .SubMenu .SubMenu {
width:100px;
height:1%;
.SpryIsIE6 .MenuBar .SubMenuVisible .SubMenuVisible {
width:auto;
/* End Layout section */
* Arrows - This section specifies arrow images for a submenu dropdowns in Basic SpryMenu.
.MenuBar .MenuItemLabel{
background-image:none;
/* For all arrows used here, we depend upon the image to push itself away from right edge, or the user can add right padding to the MenuItem */
.MenuBar .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuDownGrey.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuDownWhite.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBarVertical .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
/* IE6 rules for Arrows */
.SpryIsIE6 .MenuBar .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuDown.gif");
background-position:right center;
background-repeat:no-repeat;
.SpryIsIE6 .MenuBarVertical .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.SpryIsIE6 .MenuBar .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;

I love your subject line
Spry Menu 2.0 issues in IE7..   yes another one!
It is us as designers/developers that need to create websites for all current browsers. No sense in blaming the browsers, although in this case we could blame Spry Menu 2.0.
Problem with that is that Spry Menu 2.0 has been successfully tested in all modern browsers.
This leaves us with just one possibility, the designer/developer has erred somewhere along the line. After having checked the support files (JS and CSS) and looked at the markup, we now go to the constructor and see the following
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
    widgetID: "MenuBar",
    widgetClass: "MenuBar MenuBarLeftShrink",
    insertMenuBarBreak: true,
A comma after the last value.
I also am wondering why there are two css pages for the menu bar.??
One is the standard CSS for the menubar and under normal circumstances, should not be touched; the other is for the convenience of the designer/developer so that he/she can tweak the menubar to suit. If you wish, you can combine both. In all cases, keep in mind that the CSS for the standard (basic) menubar should come first, so that the other CSS can override the first.
This needs to be corrected in your document
Gramps

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

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

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

Spry tabbed panels - Different Hover Class for each tab

Already posted this in the general Dreamweaver section, but just realized there was a specific Spry section. So, my apologies for the repost.
I'm setting up spry tabbed panels, and I'm wanting to use an image for each tab, with the text already on it. I've figured this much out by creating a different class for each in the spry tabbed panel css.
However, I'd also like to have a second hover image for each tab. I'm having trouble figuring out how to set up separate classes for each tab's hover state.
Any help?
Thanks.

Just in case you did not notice the announce at the top of this forum's main page, I have copied it here.
Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Your question was not asked before
Using the search functionality on forums you can easily find out if your question has been answered before. While you are in search, you can specify the search locations. The Spry forum can be found under:
Adobe Labs > Spry Framework for Ajax
Yoru question can not be found in the existing documentation
Spry provides you with allot of documentation this can found on different locations. In the sidebar of this forum you can find a small summary of resources that will help you on your way.
If these options do not apply to your question, please be so kind to also supply the following information in your topic together with a clear description of your issue:
What browsers does this issue occure:
example: Internet Explorer 8 on Window 7 and Firefox 3.0 on Mac OSX
What version of Spry are using:
example: Spry 1.6.1 ( the version number can be found in license header of the .css and .js files )
What is the url of your website or page in issue:
example: http://www.example.com/page/in/issue.html
Step to reproduce the issue:
example: Scroll down till you find the header "help", there you will see a Spry Accordion. When you click on it it will not open or close.
So users can provide you with a better answer, without having to ask you for further details.
by Arnout Kazemier at Oct 23, 2009 2:47 PM
landon_tc wrote:
Actually, I do remember posting that, and have updated it with what worked for me. However, I could not recall posting it in a specific ajax spry forum, so I assumed I just posted in the general forum. Hence the current situation.
Yeah and my name is not Ben Pleysier.
landon_tc wrote:
Any help with the current problem?
Please have a look at this thread http://forums.adobe.com/message/2662019#2662019
I hope this helps.
Ben Pleysier

Spry Tab link only works once... why?

Hi all,
I have a spry tabbed area with 4 tabs on my page. Each tab contains data that is dragged from an MSAccess table. A couple of the tabs have repeat regions. This all works fine. One of my tabs has a repeat region where I can click on a button image to change a record status from True to False (or visa versa). The click runs the associated vbscript which executes the SQL update statement no problem. However I noticed that when I changed the data on this tab and reloaded the page using a Response.redirect after the sql update was executed, it would default to the 1st tab and not the one I was viewing that contains the repeat region. A quick search led me to the SpryURLUtils.js file which solved that problem by allowing me to specify which tab to load. I appended the relevant code to give me this:
Response.Redirect("myrecord.asp?" & Request.QueryString & "&tab=1#TabbedPanels1"
As I mentioned, the tab contains a repeat region. If I click on a button to change the status of that record the page reloads fine and displays the correct tab. But this only happens once... each subsequent time I try to change another record my tab contents disappear. The tabs are still visible and if I click on the tab where I've changed the data the tab content is dispalayed, but obvioulsy this isn't right... it should reload and display the correct tab with each call of the code.If I navigate away from this page and then come back to it I can successfully chnage one record and the results are displayed. Change another record and the changes are made, but the tab contents are not displayed again. The interesting thing is that if I reload/refresh the page the problem occurs staright away on the first record change.
So my question is 2-fold... Why is this happening and how do I solve the problem?
Here is the vbscript that updates the record and does the Response.redirect
<%
'Change Notification
If (CStr(Request("ToggleNotify")) = "ToggleNotify") Then
dim strSQL
'check to see if notification is currently true or false
    If cstr(Request.Form("NotifyChanges")) = Cstr("True") Then
    'change notifiaction to false
        strSQL = "UPDATE tblUserAccess SET NotifyChanges=0 WHERE AccessID = " & Request.Form("hiddenAccessID")
    else
        strSQL = "UPDATE tblUserAccess SET NotifyChanges=-1 WHERE AccessID = " & Request.Form("hiddenAccessID")
    end if
    Set MM_editCmd = Server.CreateObject ("ADODB.Command")
    MM_editCmd.ActiveConnection = MM_VBUsers_STRING
    MM_editCmd.CommandText = strSQL
    MM_editCmd.Execute
    MM_editCmd.ActiveConnection.Close
    Response.Redirect("myrecord.asp?" & Request.QueryString & "&tab=1#TabbedPanels1" )
End If
%>
Here is my Repeat region with the associated form
<%
While ((Repeat3__numRows <> 0) AND (NOT rsAccessRights.EOF))
%>
<form name="frmNotifications" method="post" action="">
<tr class="PageText">
    <td width="200"><%=(rsAccessRights.Fields.Item("SectionTitle").Value)%>
        <input type="hidden" name="hiddenAccessID" id="hiddenField2" value="<%=(rsAccessRights.Fields.Item("AccessID").Value)%>">
    </td>
    <td width="200">
                <%If (CStr((rsAccessRights.Fields.Item("NotifyChanges").Value)) = CStr("True")) Then %>
          <input type="image" src="../sitegraphics/accept.png" alt="Submit button">
        <%else%>
          <input type="image" src="../sitegraphics/cross.png" alt="Submit button">
        <%end if%>
    <input type="hidden" name="ToggleNotify" value="ToggleNotify">
    <input type="hidden" name="NotifyChanges" id="test" value="<%=cstr((rsAccessRights.Fields.Item("NotifyChanges").Value))%>">
   </td>
</tr>
</form>
<%
Repeat3__index=Repeat3__index+1
Repeat3__numRows=Repeat3__numRows-1
rsAccessRights.MoveNext()
Wend
%>
And here is the bit at the bottom that specifies the default tab if nothing is passed in the URL
<script type="text/javascript">

</script>
Sorry for the long post!
This is my first dabble with Spry stuff, so I'm a bit green. If anyone can explain to me why this is happening that would be most apopreciated. If anyone can tell me how to solve the problem I'll send them a big e-kiss!
Not sure how impotant this is but it happens in both Firefox and IE8.
Thanks in advance
Dan

Hi Ben, thanks for taking the time to read my query.
The site in question is an intranet site, so I am unable to give you a link to the page. Would the entire page of code rather than just the odd bits help?
Cheers
Dan

Help with spry tabbed menu bar

Hi.
I need help with the spry tabbed menu panel (horizontal) It
works fine in dreamweaver ( pressing f12 ) but when i goto my
website www.so-nouveau.com it puts it all over and not in boxes
either just the writing.
I ahve double checked all uploading is correct and files are
located but it wont work.
Here is what i did >
new> html> 1 column elastic,centered. i have not
changed any other settings at all. Do i need to change the doc type
or css layout in the drop down menus before starting (doc
type=xhtnl 1.0 transitional and layout css=add to head)
I am still on cs3 , does this matter ? or is 4 easier ?
any help out there guys is much appreciated but please bear
in mind that i am not a web designer or pc expert at all , this is
just me building my own site , until nowit has been an enjoyable
experience but grrrrrr when it dont work
Thanks
Jay

so-nouveau wrote:
> Hi.
> I need help with the spry tabbed menu panel (horizontal)
It works fine in
> dreamweaver ( pressing f12 ) but when i goto my website
www.so-nouveau.com it
> puts it all over and not in boxes either just the
writing.
Please post links directly to the page having an issue. I saw
no tabs on the home page, but I noticed that there is a link on the
bottom of the page to this page that has a Spry tab on it:
http://www.so-nouveau.com/test%208.html
> I ahve double checked all uploading is correct and files
are located but it
> wont work.
That page refers to a Spry JavaScript file and a Spry CSS
file, which should be at the following locations but are not
present:
http://www.so-nouveau.com/SpryAssets/SpryTabbedPanels.js
http://www.so-nouveau.com/SpryAssets/SpryTabbedPanels.css
Make sure you upload the SpryAssests folder and see where
you're at after that.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry accordion and #wrapper issue

Hi
I am in the process of trying to put together a portfolio site as part of a CIW course. If you look at the current site www.jmacphot.com you will see on the equipment page I have tried to add a spry accordion and then a spry tabbed menu inside the accordion. However you will see that when I insert a large amount of information into the content area it pushes the tab over the footer and does keep the footer at the very bottom of the page... I am stumped as I have not set any specific height on my CSS to keep moving.
Can someone please advise where I might be going wrong here. Sorry if this question has been asked repeatedly but I am very new to web design.
Your help with this is greatly appreciated!
Regards
John

Thanks ben, I initially thought if I left the height of my wrapper blank and also the height of the spry content blank they would expand as more information was entered? Is there possibly and issue with CSS hierarchy?
Thanks again for your help!!
John

Spry tabbed panels java script error screwing up whole page when I reopen document in dreamweaver

I need help!
I am creating a site in dreamweaver and I am using spry tabbed panels for my content on every page. I've created 4 pages. When I go to reopen the pages after quitting dreamweaver 2 open and work just fine. However, for the other two I receive a window that says,
this document contains javascript code for a widget that no longer exists. If you don't remove the code, the browser may display javascript errors when loading the page. Would you like dreamweaver to find all instances of this code for you.
I've selected both yes and no options and either way my entire page becomes all jumbled. I've tried deleting the script in code view and it doesn't help?

<!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>LEAP 2 GROW</title>
<style type="text/css">

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<style type="text/css">

</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColFixLtHdr" onload="MM_preloadImages('HS-MENTOR-OVER.png')">
<div id="container">
<div id="header">
    <h1><a href="index.html"><img src="web-banner.png" width="514" height="127" /></a>
    </h1>
    <ul id="MenuBar2" class="MenuBarHorizontal">
      <li><a href="volunteer.html">VOLUNTEER</a> </li>
      <li><a href="parentcollege.enroll.html">PARENT COLLEGE: ENROLL</a></li>
      <li><a href="https://leapfrog-usa.com/AOE/Parent-Resources/Enrollment-Form.aspx">AFTER SCHOOL: ENROLL</a> </li>
    </ul>
</div>
<div id="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
        <ul>
          <li><a href="mission.html">mission/overview</a></li>
          <li><a href="ourteam.html">OUR team</a></li>
        </ul>
      </li>
      <li><a href="problem.html">THE PROBLEM</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">THE SOLUTION</a>
        <ul>
          <li><a href="solution.overview.html">overview</a></li>
          <li><a href="solution.structure.html">structure</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">PROGRAMS</a>
        <ul>
          <li><a href="parentcollege.html">parent college</a></li>
          <li><a href="mentor.html">MENTOR program</a></li>
          <li><a href="farming.html">urban farming</a></li>
          <li><a href="afterschool.html">CHARTER AFTER SCHOOL</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">LOCATIONS</a>
        <ul>
          <li><a href="location.fulton.html">fulton county ga</a></li>
          <li><a href="location.haiti.html">haiti</a></li>
          <li><a href="location.tribe.html">native american tribe</a></li>
        </ul>
      </li>
      <li><a href="news.html">NEWS|RESOURCES</a></li>
      <li><a href="contact.html">CONTACT US</a></li>
      <li><a href="#">DONATE</a></li>
    </ul>
</div>
<div class="style3" id="mainContent">
    <div align="left" class="style4">
      <p class="style5">MENTOR PROGRAM</p>
      <div id="TabbedPanels2" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
          <li class="TabbedPanelsTab" tabindex="0">PROGRAM DIRECTOR</li>
          <li class="TabbedPanelsTab" tabindex="0">L2G CERTIFICATION</li>
          <li class="TabbedPanelsTab" tabindex="0">PHOTO GALLERY</li>
          <li class="TabbedPanelsTab" tabindex="0">HIGH SCHOOL ACADEMIC MENTOR</li>
          <li class="TabbedPanelsTab" tabindex="0">COMMUNITY-LEADER MENTOR</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
            <blockquote>
              <p><em>“Those who have the ability, have the responsibility”</em></p>
              <p><u>Avenue of attention:</u> <strong>                        MENTOR PROGRAM</strong> <br />
                Unites local society, by focusing the <u>attention</u> of the community’s talent, on children (ages 7 – 12) who are in need of positive role models. </p>
              <p>Two levels of involvement: </p>
              <ol>
                <li>High School Academic Mentors</li>
                <li>Community-Leader Mentors</li>
              </ol>
              <p><u>Program title:</u>                         <strong>Talent 2 Kids</strong> </p>
              <p><u>Why Program Important</u><strong>:</strong> </p>
              <ol>
              <ul>
                <li><strong>Motivates</strong> children by providing successful, caring role models into their lives, and in accordance, exposing them to realistic paths towards financial success. </li>
                <li>High school juniors and seniors on the honor roll are eligible to tutor elementary school children, utilizing their skills in helping with homework and comprehension.</li>
                <li>Community business leaders will act as “big brother/big sisters,” mentoring and monitoring a child’s well being and academic progress. Also, sharing career information and the associated path to success, along with teaching real-life problem solving skills.</li>
              </ul>
            </blockquote>
          </div>
          <div class="TabbedPanelsContent">Content 2</div>
          <div class="TabbedPanelsContent">Content 3</div>
          <div class="TabbedPanelsContent">Content 4</div>
          <div class="TabbedPanelsContent">Content 5</div>
          <div class="TabbedPanelsContent">Content 6</div>
        </div>
      </div>
      <p> </p>
    </div>
    <p> </p>
    <p> </p>
</div>
<div id="footer">
<table width="1200" border="0">
      <tr>
        <td><div align="left"><a href="parentcollege.html">parent college</a></div></td>
        <td><div align="center"><a href="mentor.html">MENTOR program</a></div></td>
        <td><div align="center"><a href="farming.html">urban farming</a></div></td>
        <td><div align="right"><a href="afterschool.html">charter after school</a></div></td>
      </tr>
    </table>
    <p align="center" class="style2">A NON-PROFIT ORGANIZATION, EMPOWERING COMMUNITIES TO MOTIVATE THEIR CHILDREN, CREATING LASTING CHANGE</p>
    </div>
</div>
<script type="text/javascript">

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

Spry Tabbed Panels overwritting Flash drop down menu in IE

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 tried adding “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 Panels2 IE8 Issue

Similar Messages

Maybe you are looking for