Spry Accordion IE6 issue

I have created an image for the accordion tab panel (c.g the heading of the accordion menu). I then created a hotspot on the image to go directly to that site without having to open the accordion menu. However in IE6 the hotspot is ignored and the panel just opens up and down it doesn't go to the respected link. I tried it in Firefox and it works as designed. I am curious if there is an IE 6 fix.
Thanks

Ben, it is more then just a hotspot it is a hotspot on the accordion panel. Here is the code. As I mention before it works in firefox just not IE6.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>None</title>
<link href="_css/stylesj.css" rel="stylesheet" type="text/css" />
<link href="_css/NoeditN.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBarprocess.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<link href="SpryAssets/SpryAccordionprocessjk.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
</head>
<body>
<td width="299" align="center" valign="top" bgcolor="#FFFFFF">
                         <div id="Accordion1" class="Accordion" tabindex="0">
                           <div class="AccordionPanel">
                             <div class="AccordionPanelTab2">
                               <a class="MenuBarItemSubmenu" href="#"><img src="_images/brown_btn1.jpg" width="240" height="36" border="0" />
                                 </a>
                               </div>
                             <div class="AccordionPanelContent">
                                <br /> <br /> <br /> <br /> 
                             </div>
                             </div>
                           </div></td>
                       <td width="299" align="center" valign="top" bgcolor="#FFFFFF"><div id="Accordion2" class="Accordion" tabindex="1">
                         <div class="AccordionPanel">
                           <div class="AccordionPanelTab2">
                             <a class="MenuBarItemSubmenu" href="#"><img src="_images/brown_btn2.jpg" width="240" height="36" border="0" usemap="#Map2"/></a>
                </div>
                           <div class="AccordionPanelContent"> -<a href="r">Define Test Requirements</a><br />
                             - <a href="#">Specification</a><br />
                             - <a href="y">Maintenance Requirements</a><br />
                             - <a href="w">Customer Requirements</a><br>
                           </div></div></div>
                         </td>
                       <td width="249" align="center" valign="top" bgcolor="#FFFFFF"><div id="Accordion3" class="Accordion" tabindex="2">
                         <div class="AccordionPanel">
                           <div class="AccordionPanelTab2"><a class="MenuBarItemSubmenu" href="#"><img src="_images/brown_btn3.jpg" width="240" height="36" border="0" /></a></div>
                           <div class="AccordionPanelContent">
                             - <a href="#">Deliver Parts</a><br />
                  - <a href="#">Perform</a><br />
                  - <a href="#">Configuration</a><br />
  </div>
                           </div>
                         </div>
                         </td>
<map name="Map2" id="Map2">
  <area shape="rect" coords="15,11,41,26" href="http://http://www.Hollywood.com"/>
                            </map>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {useFixedPanelHeights:false, defaultPanel:-1} );
var Accordion2 = new Spry.Widget.Accordion("Accordion2", {useFixedPanelHeights:false, defaultPanel:-1});
var Accordion3 = new Spry.Widget.Accordion("Accordion3", {useFixedPanelHeights:false, defaultPanel:-1 });
//-->
</script>
</body>
</html>

Similar Messages

  • Spry Accordion Display Issue

    Hi guys
    I have tried to implement a Spry Accordion function using DW CS3 to allow me to display current and previous news on a website, however I am having issues with getting it to display properly. You can view the page here: http://www.amiante.co.uk/news.html
    When testing the site in various browsers I noticed a glaring issue, underneath the According there is a massive white space, which to me appears to be the space that would be taken up if each panel of the according were to be opened at the same time....
    This issue occurs in Firefox 3.5.3, Safari 4.0.3, Opera 10.0 and Google Chrome 3.0.195. It seems to work faultlessly in IE 8, IE 7 and IE 6.
    The confusing aspect is that if you zoom in (ctrl +) and zoom out (ctrl -) it seems to remove the white spacing.
    If anyone has any idea of what is causing this I would be delighted to hear from you!
    Thanks in advance.
    Mackenzie

    Thank you so very much, I appreciate the quick response. However, I still have one small issue. For some unknown reason the bluestar tab does not show the star. It shows the tab, but no star. I've got it labeled correctly and it's pointing to the correct files, but I get the blue by itself. I know it must be a very simple solution and I must be doing something incorrect.
    the files are under:
    images/accordion/accordion_tabs_bluestar.jpg, and accordion_tabs_redwhite.jpg. The redwhite shows up. This is driving me nuts! I even went back and re-did the image file and saved it again, but all I get is the blue without the star. Can it be that the image is too big and cutting off the star that is to the right of it?
    Thank you so much, I do greatly appreciate your kind help.
    the other one is
    The code was copied and pasted exactly as was suggested. There is no other blue tab file on the server, so I am confused just a bit.
    Thanks again for helping an newbie, I appreciate it.

  • Spry Accordion Image Issue

    I have inserted a Spry Accordion in Dreamweaver CS5, however, I'm having issues with the viewing of the tabs on load, on hover, etc. I want a dark blue tab on load, have it change to a wavy red white tab, and when opened go to a dark blue tab with a star. I can never get this to work as I want. I've checked the image files and they are labeled correctly. The test site is www.sbcvote.us/index_spry.html
    I am a novice, and really have a hard time on this issue, that no doubt is not that complicated to those that know.
    Thank you in advance for your help.
    On my index page I have the css page reference.
    <link href="/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    the css code is:
    .AccordionPanelTab {
    border-top: solid 1px black;
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    font:Verdana, Geneva, sans-serif;
    color:#FFF;
    font-weight:bold;
    background:(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
    /* This is the selector for a Panel's Content area. It's important to note that
    * you should never put any padding on the panel's content area if you plan to
    * use the Accordions panel animations. Placing a non-zero padding on the content
    * area can cause the accordion to abruptly grow in height while the panels animate.
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    * The name of the class ("AccordionPanelContent") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel content container.
    .AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: 200px;
    background-color:#EEE;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open. The class "AccordionPanelOpen" is programatically added and removed
    * from panels as the user clicks on the tabs within the Accordion.
    .AccordionPanelOpen .AccordionPanelTab {
    background:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
    /* This is an example of how to change the appearance of the panel tab as the
    * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
    * and removed from panel tab containers as the mouse enters and exits the tab container.
    .AccordionPanelTabHover {
    background:url(/images/accordion/accordion_tabs_redwhite.jpg) no-repeat;
    .AccordionPanelOpen .AccordionPanelTabHover {
    background: url(/images/accordion/accordion_tabs_redwhite.jpg) no-repeat;
    /* This is an example of how to change the appearance of all the panel tabs when the
    * Accordion has focus. The "AccordionFocused" class is programatically added and removed
    * whenever the Accordion gains or loses keyboard focus.
    .AccordionFocused .AccordionPanelTab {
    background:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open when the Accordion has focus.
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    background:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
    /* Rules for Printing */
    @media print {
      .Accordion {
      overflow: visible !important;
      .AccordionPanelContent {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    background-color: #EEE;

    Thank you so very much, I appreciate the quick response. However, I still have one small issue. For some unknown reason the bluestar tab does not show the star. It shows the tab, but no star. I've got it labeled correctly and it's pointing to the correct files, but I get the blue by itself. I know it must be a very simple solution and I must be doing something incorrect.
    the files are under:
    images/accordion/accordion_tabs_bluestar.jpg, and accordion_tabs_redwhite.jpg. The redwhite shows up. This is driving me nuts! I even went back and re-did the image file and saved it again, but all I get is the blue without the star. Can it be that the image is too big and cutting off the star that is to the right of it?
    Thank you so much, I do greatly appreciate your kind help.
    the other one is
    The code was copied and pasted exactly as was suggested. There is no other blue tab file on the server, so I am confused just a bit.
    Thanks again for helping an newbie, I appreciate it.

  • Spry Accordion browser issue

    When I preview my page in browser, there is a dotted line all
    around the spry accordion widget. I've looked through the css and
    can't find where that is. Any idea how to eliminate this?

    Malinki8 wrote:
    > When I preview my page in browser, there is a dotted
    line all around the spry accordion widget. I've looked through the
    css and can't find where that is. Any idea how to eliminate this?
    I believe what you're talking about can be fixed by adding
    the following line to the .Accordion selector in the
    SpryAccordion.css file:
    outline:none;
    FWIW, you should Spry questions over in the Spry forum as
    there are more folks with Spry experience that hang out there:
    http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

  • Spry Accordion issue in IE6/IE7

    I'm having a problem with the Spry Accordion widget that I
    placed on this page:
    WireCare Customer
    Support
    It works flawlessly in Firefox, but the tab expansion is
    erratic in IE 6 and IE7.
    If anyone has a solution, I'd love to hear it.
    Thanks in advance.
    Ken
    Edit to add:
    I'm using CS3 with the version of Spry that installed with
    the original software. I don't know if that's the latest version,
    or if the new version has a fix for this problem. I'll upgrade to
    the latest Spry version and hope that helps.
    K
    Edit 2:
    I am using the latest version of Spry, so it may not be a
    version issue.
    K

    Found the problem.
    The solution was in a previous post on a similar subject.
    I added a DOCTYPE declaration to the page, and it works much
    smoother now. Not as nice as in Firefox, but acceptable.
    Ken

  • SPRY accordion and tabs not displaying in IE6

    Hi everyone:
    Even after clearing up some validation errors in my HTML, I
    am experiencing issues with a SPRY accordion and another page with
    a Tabbed SPRY widget not appearing in IE6. The pages all work fine
    in IE7, Firefox and Safari. I would greatly appreciate anyone
    taking a look (link below) and letting me know if you see any
    errors or know of a bug I have not found the fix for. My CSS
    validates 100% so I don't think I have made any style sheet errors.
    Thanks very much.
    www.ducksroofing.com
    K.

    Hi all:
    After some more tinkering, I have discovered the real issue
    is that my containing element is not containing the entire page and
    therefore cutting off my SPRY elements on the pages which have
    them. This is causing the SPRY widgets to fall apart and, of
    course, for the page to only scroll partially down.
    Does anyone have a suggestion as to why the SPRY tabbed
    element and accordion element on my pages is not nesting within
    document flow and remaining with the containing div? I appreciate
    your help.
    Once again, url is: www.ducksroofing.com
    K.

  • Spry Accordion Hover/Active Issue

    I have designed a spry accordion widget for a FAQ page and within Dreamweaver CS6 it is fully functional.  The color I've selected doesn't occur with a hover or an active tab once EVERYTHING is uploaded.  Below is a live link to the problem page, my Spry CSS and layout CSS as well as a screenshot of the proper functionality occuring in Dreamweaver.  Thoughts?
    The problem page:
    http://pauldhart.com/RideTTF_website/faq.html
    Spry CSS
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* This is the selector for the main Accordion container. For our default style,
    * we draw borders on the left, right, and bottom. The top border of the Accordion
    * will be rendered by the first AccordionPanelTab which never moves.
    * If you want to constrain the width of the Accordion widget, set a width on
    * the Accordion container. By default, our accordion expands horizontally to fill
    * up available space.
    * The name of the class ("Accordion") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style the
    * Accordion container.
    .Accordion {
        overflow: hidden;
    /* This is the selector for the AccordionPanel container which houses the
    * panel tab and a panel content area. It doesn't render visually, but we
    * make sure that it has zero margin and padding.
    * The name of the class ("AccordionPanel") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel container.
    .AccordionPanel {
        margin: 0px;
        padding: 0px;
    /* This is the selector for the AccordionPanelTab. This container houses
    * the title for the panel. This is also the container that the user clicks
    * on to open a specific panel.
    * The name of the class ("AccordionPanelTab") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel tab container.
    * NOTE:
    * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
    * user from selecting the text in the AccordionPanelTab. These are proprietary browser
    * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
    * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
    * validate, and don't care if the user can select the text within an AccordionPanelTab,
    * you can safely remove those properties without affecting the functionality of the widget.
    .AccordionPanelTab {
        border-top: solid 1px black;
        border-bottom: solid 1px gray;
        margin: 0px;
        padding: 2px;
        cursor: pointer;
        -moz-user-select: none;
        -khtml-user-select: none;
        background-image: url(/content-opaque.png);
        background-attachment: fixed;
        background-repeat: repeat;
        font-family: Verdana, Geneva, sans-serif;
        color: #FFF;
        background-color: #300;
        font-size: 12px;
    /* This is the selector for a Panel's Content area. It's important to note that
    * you should never put any padding on the panel's content area if you plan to
    * use the Accordions panel animations. Placing a non-zero padding on the content
    * area can cause the accordion to abruptly grow in height while the panels animate.
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    * The name of the class ("AccordionPanelContent") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel content container.
    .AccordionPanelContent {
        margin: 0px;
        padding: 2px;
        background-image: url(../infobkgd.png);
        background-attachment: fixed;
        background-repeat: repeat;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        color: #FFF;
        overflow: hidden;
        height: 40
    [x;
        height: 100%;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open. The class "AccordionPanelOpen" is programatically added and removed
    * from panels as the user clicks on the tabs within the Accordion.
    .AccordionPanelOpen .AccordionPanelTab {
        background-color: #000033;
    /* This is an example of how to change the appearance of the panel tab as the
    * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
    * and removed from panel tab containers as the mouse enters and exits the tab container.
    .AccordionPanelTabHover {
        color: #FFFFFF;
        background-color: #003;
    .AccordionPanelOpen .AccordionPanelTabHover {
        color: #FFFFFF;
    /* This is an example of how to change the appearance of all the panel tabs when the
    * Accordion has focus. The "AccordionFocused" class is programatically added and removed
    * whenever the Accordion gains or loses keyboard focus.
    .AccordionFocused .AccordionPanelTab {
        background-color: #003;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open when the Accordion has focus.
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
        background-color: #000033;
    /* Rules for Printing */
    @media print {
      .Accordion {
      overflow: visible !important;
      .AccordionPanelContent {
      display: block !important;
      overflow: visible !important;
      height: auto !important;
    Layout CSS
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Donate Today!</title>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="_css/donatepage.css" rel="stylesheet" type="text/css">
    <link href="SpryAssets/SpryMenuBarDonate.css" rel="stylesheet" type="text/css">
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="respond.min.js"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="gridContainer clearfix">
      <div id="header"><img src="RTTF-banner.jpg" alt="Ride to the Flags VI"></div>
      <div id="navigation">
        <ul id="donatemenu" class="MenuBarHorizontal">
          <li><a href="profile.html">home</a>      </li>
          <li><a href="theride.html">the ride</a></li>
          <li><a href="donate.html">donate</a>      </li>
          <li><a href="#" class="MenuBarItemSubmenu">gallery</a>
            <ul>
              <li><a href="photo-gallery.html">photo</a></li>
              <li><a href="video-gallery.html">video</a></li>
            </ul>
          </li>
          <li><a href="faq.html">FAQs</a></li>
          <li><a href="contact.html">contact</a></li>
        </ul>
      </div>
      <span class="AccordionPanel">
      <div class="AccordionPanelTab"></div>
      </span>
      <div id="faq-content">
        <div id="faq-accordion" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Is this ride still going on?</div>
            <div class="AccordionPanelContent">A: Yes</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is the date for this year’s ride?</div>
            <div class="AccordionPanelContent">A: Saturday, September 7th.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What time does check-in/registration open?</div>
            <div class="AccordionPanelContent">A: Online registration will begin in May.  Check-in at 8:00am on September 7th.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Where is check-in?</div>
            <div class="AccordionPanelContent">A: Check-in will be just south of PCH on Las Posas Rd (right before Gate 3 of the Naval Base).</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Will the route be the same?</div>
            <div class="AccordionPanelContent">A: We have changed the route this year few a few reasons.  You can visit the route map to see.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: We’re not doing the ride but we would like to come out and watch the bikes as they drive by.  What time will you be on our street?</div>
            <div class="AccordionPanelContent">A: Given our start at 10:30am, we will be reaching the following streets at these times:</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is the minimum amount to give to ride in this ride?</div>
            <div class="AccordionPanelContent">A: $35/rider $20/passenger</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What does that give me?</div>
            <div class="AccordionPanelContent">A: Patch, Food ticket, and drink ticket</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Why must we raise/give a minimum amount this year?</div>
            <div class="AccordionPanelContent">A: As you know, for the first five years, the Ride to the Flags ran on an any-donation-goes basis.  However, as we got larger, the costs associated with putting the ride together grew immensely.  The minimum donation allows for us to cover the costs for the ride.  However, we try our best to bring on as many sponsors as possible to help cover our costs so that we can ensure that your donation is going to good use.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Can I give more money than the registration fee?</div>
            <div class="AccordionPanelContent">A: Of course. </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What if we raise a lot of money for the cause?</div>
            <div class="AccordionPanelContent">A: The White Heart Foundation is giving out some small prizes for our top donors.   Those will be announced at a later date.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: How will check-in be different now that there is pre-registration?</div>
            <div class="AccordionPanelContent">A: There will be a pre-registered check-in line and another line for those looking to just show up the day of.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What kinds of payments are accepted?</div>
            <div class="AccordionPanelContent">A: We prefer you use our online fundraising application Razoo.com that can be found on this website for your pre-registration. </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I ride a trike, can I participate?</div>
            <div class="AccordionPanelContent">A: Yes</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Are scooters allowed?</div>
            <div class="AccordionPanelContent">A: Eh, sure, why not?</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Will there be celebrities in attendance?</div>
            <div class="AccordionPanelContent">A: Probably.  We usually do not know about their appearance ahead of time. </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Are you getting tired of all of my questions?</div>
            <div class="AccordionPanelContent">A: A little</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is happening on the base now that the Celebration of Freedom is at the end of the ride?</div>
            <div class="AccordionPanelContent">A: Memorial service and wreath laying and maybe a special guest.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Will there be live music at the Celebration of Freedom?</div>
            <div class="AccordionPanelContent">A: There will.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I don’t ride a motorcycle but can I still come to the Celebration of Freedom?</div>
            <div class="AccordionPanelContent">A: Yes.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is my cost?</div>
            <div class="AccordionPanelContent">A: General Public $40. Student $20.  Bikers the day of $40.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: If I preregister for the ride and decide to just come to the Celebration of Freedom at the end of the ride, will I get my free patch, food ticket, and drink ticket?</div>
            <div class="AccordionPanelContent">A: No.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What are costs of food and drink tickets?</div>
            <div class="AccordionPanelContent">A: Food - $5,  Drink - $2,  Beer - $5</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: WAIT?! THERE’S GOING TO BE BEER?!!!!</div>
            <div class="AccordionPanelContent">A:  Yes.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: That’s awesome.  I love you.</div>
            <div class="AccordionPanelContent">A: Control yourself.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Will there be vendors during the Celebration of Freedom?!</div>
            <div class="AccordionPanelContent">A: Yes! For the first time ever, we give to you….motorcycle vendors.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I'm a vendor, how do I reserve a spot?</div>
            <div class="AccordionPanelContent">A: Click here and fill out our application.  It’s a lot easier than taking the S.A.T.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Can I sponsor the Celebration of Freedom?</div>
            <div class="AccordionPanelContent">A: Certainly!  Click here for our sponsorship packet.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Can my motorcycle club ride together?</div>
            <div class="AccordionPanelContent">A: If you come together, sign in together, and hold hands.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Are we doing big flags up front this year?</div>
            <div class="AccordionPanelContent">A: Yup</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Last year the riders got split up, how are you fixing that this year?</div>
            <div class="AccordionPanelContent">A:  We’re filing certain permits and paying astronomical fees to shut down traffic for 30 minutes on a Saturday so that we don’t get split up.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Last year the ride ended up being really slow, will it be slow this year?</div>
            <div class="AccordionPanelContent">A: We admit it was slow.  We know, we know.  Now that we are closing the roads as we all move through, we’ll be allowed to pick up the pace a little.  Also, the new route allows us go faster through town.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I'm a police officer but will be riding as a civilian. Can I bring my firearm on base?</div>
            <div class="AccordionPanelContent">A: The base will not allow that.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I want to create a donating team, where do I start?</div>
            <div class="AccordionPanelContent">Content 34</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Can I start a donating team for my motorcycle group to cover all our registration costs?</div>
            <div class="AccordionPanelContent">A: Negatory.  Every individual is his/her own team. </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I don't have a motorcycle, can I still attend?</div>
            <div class="AccordionPanelContent">A: Yes, you can attend both the event at the Naval Base and the Celebration of Freedom in Malibu.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is the WHF?</div>
            <div class="AccordionPanelContent">A: The White Heart Foundation was created to help support our community military, police, and fire.</div>
          </div>
        </div>
      </div>
      <div id="footer">This is the content for Layout Div Tag "footer"</div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("donatemenu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var Accordion1 = new Spry.Widget.Accordion("faq-accordion");
    </script>
    </body>
    </html>
    Screenshot of how it looks locally in Dreamweaver:

    SpryAccordion.css
    You have an error that is killing the rest of your code shown below in red.  Remove it.
    .AccordionPanelContent {
        margin: 0px;
        padding: 2px; /**suggest using 12px or more**/
        background-image: url(../infobkgd.png);
        background-attachment: fixed;
        background-repeat: repeat;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;  /**suggest using 16px or more**/
        color: #FFF;
        overflow: hidden;
        height: 40
    [x;
        height: 100%;
    Nancy O.

  • Spry Accordion Jerky/Jumping movement Issues in IE

    I am having a difficult time trying to debug the accordion in IE. You can see the accordion here in IE I am having two issues.
    1. When at the top of the site and clicking on a tab to open it jumps down the page as if it were an anchor point, and I find this very annoying.
    2. The movement below the tab clicked is jumping around and this also is incredibly annoying to me, its more subtle than the above issue but it still bothers me. I am having this issue in GC as well.
    I have searched quite a few forums and have not found a solution for this but this must be a fairly common issue? I am not that familaur with spry yet this is my first real project using it so my knowledge is very limited to this point. This dose work perfect in FF.
    Thanks in advance,

    I will put together a gutted version of this and send it over if you have the time that would be fantastic. Making a gutted version may be the best thing at this point so I can slowly add stuff back and see what causes the problem. If i cant fix it by doing that I will zip and send the files.
    Date: Tue, 27 Oct 2009 15:23:40 -0600
    From: [email protected]
    To: [email protected]
    Subject: Spry Accordion Jerky/Jumping movement Issues in IE
    Can you provide me with files where I can reproduce your issue with 
    out any other scripts on the site? This gives me a better debugging 
    area. If you do not feel comfy with posting it online. You can e-mail 
    it to mailto:[email protected]
    >

  • SPRY accordion widget IE8 ONLY issue

    hello everybody,
    i noticed a strange "jumpy" behavior while using the spry accordion widget -- this affects IE8 only (currently using 8.0.6001.18882 on vista), other browsers (including IE7 and IE8 forced into IE7 mode) work as expected. this issue seems to be related to the margin property of the accordion container...
    not shure whether this behavior is related to IE rendering or the spry javascript code itself... anyway i made NO changes to the spry script (my version is 0.15, 1.6.1, which i believe to be most recent one).
    the xhtml (strict) and css are perfectly valid (there might be some MINOR css hacks which are not related to the accordion itself). i do NOT use ANY padding on the inner container of the accordion (which would definetely make the spry js count the tween in odd way). the accordions (especially the main menu on the left) are little more complex, but they were built according to the spry widget document, found on the adobe spry website.
    so, here it is -- check the accordion on the left side (the bug seems to happen almost always while opening/closing the last BLUE "section" of the accordion, please play with the accordion for a while to reproduce it -- while the accordion closes, it "loses" it's bottom margin (i guess), what's even more wierd, everything gets back to place after you move a mouse):
    http://www.prazskematky.cz/home.php
    PLEASE NOTICE: since the website is still under development and i'm using a IE meta tag to force it into IE7 rendering, to reproduce this behavior please be shure to switch IE engine to IE8 standards mode
    well, we all now how IE handles css... so it's propably an IE bug -- anyway if you have encountered a similar issue of even better found a fix, please let know. (i don't consider a fix switching to another js library, i would like to use the spry, because of it's DW integration)
    many thanks,
    p.s.

    ross m. greenberg wrote:
    > Now however the entire .gif is not appearing in the
    accordion panel is expanded. I insert the graphic using a standard
    "menu insert/graphic/browse and select"
    >
    > the graphic file is not showing up properly on such an
    insert...
    Are you referring to what it looks like in Design view? If
    so, that's
    correct. Accordion panels have a fixed height. From memory, I
    think it's
    200px. However, if you test the page in a browser, you should
    see a
    scrollbar automatically generated on panels that have content
    that
    exceeds the height of the panel.
    If you want flexible-height panels in the accordion, you need
    to adjust
    both the CSS and the script that initializes the accordion. I
    have
    covered all the details in my "Essential Guide to Dreamweaver
    CS3" (and
    the forthcoming CS4 edition). You can probably find online
    tutorials as
    well. Try a Google search for Spry flexible height accordion.
    The accordion widget has been around since CS3, and it hasn't
    changed in
    CS4, so a Google search should bring up a lot of information.
    David Powers, Adobe Community Expert
    Author, "The Essential Guide to Dreamweaver CS3" (friends of
    ED)
    Author, "PHP Solutions" (friends of ED)
    http://foundationphp.com/

  • 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

  • IE7 + DWCS3 + Spry Accordion = Issues

    I'm using the Spry accordion feature in DW. The page is
    displaying fine in FF2 on PC. In IE7 each section is expanded
    fully. When I select any of the sections they contract rather than
    expand. It's weird. I thought that maybe it was something that I
    had done with my CSS. So, I replaced my CSS with the default CSS
    and inserted a temporary accordion to test with. It had the same
    effect. Does anyone know how to fix this? The link to the page to
    view what's going on is
    http://www.pappasdg.com/jose/NEWSITEPROJECTS/teamforceinc.com/teamforceinc.com/services.ht ml

    I've figured out the problem for my issue. I had to insert
    .AccordionPanelClosed {
    overflow:hidden;
    height:20px;
    into my css. I would think that when DW creates the css file
    it would automatically insert all the required css coding.

  • Strange issue with Spry Accordion Panels

    Hi, I'm having some strange issues with the Spry Accordion
    Panels.
    Here is the page:
    http://www.bellaclientcenter.com/browncollege/aboutus.html
    For some reason when I preview this message it adds extra
    characters to the url above, so just delete those off to see the
    correct url.
    The only browser this does NOT happen in is safari, I'm
    seeing it all of my other browsers. You'll notice when you first
    load up the page, you'll see that the active panel header
    background is green, and the non active is a dark grey. But when
    you click one of the other panels they all turn a strange neon blue
    color. This is very apparent in firefox.
    Any thoughts on this? I've attached the spry css code in case
    the problem is there.
    thanks so much!!
    Jeff

    That is because your page is currently invalid. And renders in IE quirksmode..
    <base href="http://www.industrialwebsearch.com/">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    So make sure your page is valid, and the animations will go smooth in ie

  • Spry Accordion not working in IE7 and IE6

    My spry accordion is working great in Chrome, Safari, Firefox, and IE8, but not in IE7 or 6. The panels are expanded and not hiding.
    The site is www.christendom.edu/n. It is there on the left.  I am using Spry 1.6 and have googled this question to the ends of the internet and can't figure out why.
    Please help!

    Remove the offending comma (marked in red)
    var Accordion1 = new Spry.Widget.Accordion("LeftMenu", {useFixedPanelHeights: false, defaultPanel: -1, duration: 250, fps: 90, });
    FYI, you do have other problems with your code which is made evident by the yellow triangle in the left bottom corner of IE.
    I hope this helps.
    Ben

  • Spry Accordion Issue

    Spry Accordion appears to snap shut to its default setting
    the moment you use it to navigate to a linked page.
    I want to keep the accordion open on the page that it
    represents rather than having the user open up the accordion each
    time they wish to navigate to the next page.
    Can this be done - if of course I have explained myself well
    enough which frankly i doubt!
    Thanks in advance
    Neil

    Al Sparber- PVII wrote:
    > "eclipsme" <[email protected]> wrote in message
    > news:fcjsoh$3m1$[email protected]..
    >> Al Sparber- PVII wrote:
    >>> "skipiouk" <[email protected]>
    wrote in message
    >>> news:fciqsg$t8i$[email protected]..
    >>>> Thanks Al
    >>>> is there no way to do this inside CS3 or is
    the purchase of piece of
    >>>> software necessary?
    >>>> Neil
    >>>
    >>> I don't know. We do not use Spry because it's
    just not compatible
    >>> with our approach towards markup, CSS, or
    scripting. If you are a
    >>> casual web developer and don't have a
    professional budget, perhaps
    >>> someone who is "into" Spry can help you hack a
    solution.
    >>>
    >>>
    >> See if this helps.
    >>
    >>
    http://labs.adobe.com/technologies/spry/articles/accordion_overview/
    >>
    >> Harvey
    >
    > Hi Harvey,
    >
    > I don't need "help" understanding how Spry widgets work.
    We have
    > analyzed the code and methodology and it's just an
    approach that we
    > would never take, hence we have no interest in it.
    Perhaps you meant
    > your post to be in response to someone else and not me
    >
    >
    Right, Al. Niel was asking the question. Your's wasn't the
    only post.
    Sorry if you got confused. The link provides information on
    configuring
    the widget. I thought this could be useful to Niel.
    Harvey

  • Spry Accordion Issues

    Hello,
    I am trying to get a very basic Spry Accordion to work on a website I am creating and just cannot seem to get the panels to work properly. They all stay open all the time. I would rather have only one open and then click on the others to see the content. Any suggestions are greatly appreciated. The website is HBHS Boy's Water Polo.
    Thank you,

    Lines 13 and 14 shows
    <body id="boyspolo">
    <body link="#000033" vlink="#F27817" alink="#000">
    Get rid of the second body tag.
    Line 79 shows
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
    You do not have a collapsible panel, get ris of the line

Maybe you are looking for

  • How do I consolidate backed up music from an external drive into itunes?

    I had to replace my ipod and am trying to consolidate my old music from an external drive with the itunes library on our home computer. My gf has music there already. I have tried consolidate library, edit/prefereces/change, copied my music in itunes

  • Sender JMS content conversion

    Hi    In the sender JMS content conversion, I do not want Recordset name hence I specified, Parameter Name: xml.ignoreRecordsetName Parameter Value: true But am still getting the Recordset name in the payload... Is this working for someone or a bug?

  • XI J2ee roles

    On the UME side, do user groups like sap_xi_adminstartor_j2ee, sap_xi_configurator_j2ee...etc have any roles or actions assigned to them? I'm confused because when i look at sap_j2ee_admin & sap_sld_ administrator user groups on the UME, I see tht th

  • I can't download Safari 5 or anything more recent then iTunes 3

    I can't download Safari 5 or any of the iTunes updates. It says there is an error and it can't install.

  • Edit mp4

    hello to those people that have the mercury play back engine i wonder if you can edit mp4 without rendering and export it to mpeg2 format please try this for me and let me know if it work i would like to buy the card right away thanks guys