Spry Accordion gains scroll bars in IE7

Can anyone suggest a fix for a problem I've encountered on a
spry accordion? The accordion has eight panels, each containing an
image. Each image has a hot spot linking the image on that
particular accordion panel to another web page. When I view in
different browsers, FF and IE6 look fine and work fine. When viewed
in IE7, each of the panels has scroll bars on the bottom and right
side, as if the image is too large.
What is causing the scroll bars to appear only in IE7?
Thanks!

Same problem here too. Also, I can't get a Spry horizontal
menu bar to center within the accordion. As with the extra spacing
glitch, it looks fine in everything except IE7. Is IE still the
browser of choice these days? I don't use it, but I do try to get
things to look correct in it.
Thanks

Similar Messages

How do I make my Spry Accordion menu scroll *with* my webpage?

Afternoon,
I'm a newbie designer, just helping a friend build a website that will incorporate her blog and other stuff, but what I'm trying to do is set up my Spry Menu (set as a vertical accordion style) to scroll with the page.
I want it to scroll within the confines on my div class="contentright"
CSS for div class:
.contentright {
    padding-top: 410px;
    float: left;
    width: 210px;
HTML of same div class:
<div class="contentright">
                            <div id="SpryAccordion1" class="Accordion" tabindex="0">
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab tabTop">
My webpage has a set width and is set to expand based on what I have in my main content area. I'm just not sure what to code and where to code it (in my HTML or in the CSS), to set my Spry to scroll. I'm assuming it's something with a .float functionality, maybe? I just need it to stay beneath my top padding so that it doesn't get overlapped by my main header logo that I had to set to position: absolute;
Any ideas?

Here is my HTML Coding
<html>
    <head>
        <title>BetsyMarvin.com</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="" />
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        <script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script>
        <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
    <body>
        <div class="container">
            <div class="bannerArea">
                <div class="bannernav"><a href="#" >Privacy Policy</a> | <a href="mailto:[email protected]" >Contact Us</a> | <a href="#" >Site Map</a></div>
                <span class="toplogo"></span>
                <div class="toplogo"><a href="#"><img src="images/3 Words Buildup without BG.png" width="550" height="565" align="right" /></a></div>
            </div>
            <div class="contentArea">
                <ul class="leftnavigation">
                    <li><a href="theme_02_design.html">Home Page</a></li>
                    <li><a href="blog_design.html">Blog</a></li>
                    <li><a href="lessons_design.html">Lessons</a></li>
                </ul>
                <div class="content">
                    <div class="contentleft">
                        <h1>Welcome to my Website</h1>
                        <img class="imageright" src="images/faith reason.jpg" border="0" />
                        <p>text</p>
                    </div>
                    <div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab tabTop">
                                    <div class="accordion_340_tab">CONTACT ME</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                      <p> <a href "mailto:[email protected]"> Email</a></p>
                                      <p> <a href="http://www.cornerstonemi.org">Church Website</a></p>
                                      <p> <a href="http://www.facebook.com/betsy.marvin.32">Facebook</a></p>
                                      <p> <a href "www.twitter.com/betsymarvin"> Twitter</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab middleTab">
                                    <div class="accordion_340_tab">ABOUT ME</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                        <p>text</p>
                                    </div>
                                </div>
                            </div>
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab middleTab">
                                    <div class="accordion_340_tab">PASSIONS</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                        <img class ="imageright" src="images/love.jpg" width="130" height="64" />
                                             <p>text</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="AccordionBottom"></div>
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <div style="clear:both;"></div>
            </div>
            <div class="footerArea">
                <div class="copyright">© 2013 Betsymarvin.com | All rights reserved.</div>
            </div>
        </div>
<script type="text/javascript">

        </script>
    </body>
CSS Style Sheet
body {
    margin: 0px;
    color: #666;
    font-size: 12px;
    font-family: Arial;
    font-family: Arial, Verdana, Univers;
    background-color: #545454;
    background-image: url(images/page_bkgd.jpg);
    background-repeat: repeat-x;
h1 {
    color: #4F6179;
    font-size: 24px;
    font-weight: normal;
    margin: 3px 0px 25px 0px;
h2 { color: #333333; font-size: 14px; font-weight: normal; margin: 0px 0px 15px 0px; }
a          { color: #ba7007; }
a:visited { color: #ba7007; }
a:hover    { color: black; }
.container {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(images/content_bkgd_tile.jpg);
    background-repeat: repeat-y;
/* BANNER AREA */
.bannerArea {
    width: 980px;height: 145px;
    background-color: #4971a2;
    background-image: url(images/banner_bkgd.jpg);
    background-repeat: no-repeat;
.bannernav {
    padding-top: 10px;
    padding-left: 10px;
    float: left;
    color: white;
    font-size: 10px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
.bannernav a {
    color: white;
    text-decoration: none;
.bannernav a:visited {
    color: white;
.bannernav a:hover {
    color: #ECBB7B;
.toplogo {
    position: absolute;
    z-index: 100;
    padding-right: 0px;
    float: right; margin-left: 675px;
    padding-top: 10px;
.content {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 25px;
    padding-right: 10px;
    background-image: url(images/content_bkgd.jpg);
    background-repeat: no-repeat;
    z-index: 100;
/* LEFT NAVIGATION */
.leftnavigation {
    width: 192px;
    margin: 70px 0px 0px 0px;
    padding-left: 8px;
    float: left;
    list-style-type: none;
.leftnavigation a{
    margin-left: 0px;
    width: 156px;
    padding-left: 15px;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    float: left;
    color: #CCA72F;
    font-size: 10px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    background-image: url(images/nav_normal.jpg);
    background-repeat: repeat-x;
    background-position: 0px 0px;
    border-bottom: 1px solid #999;
.leftnavigation a:visited{
    color: #5C4C17;
.leftnavigation a:hover{
    color: #ffffff;
    background-image: url(images/nav_down.jpg);
/* CONTENT AREA */
.contentleft {
    width: 400px;
    padding-left: 30px;
    padding-right: 20px;
    float: left;
.contentright {
    padding-top: 410px;
    float: left;
    width: 210px;
.imageright {
    margin-top: 10px;
    margin-left: 10px;
    float: right;
.imageleft {
    margin-right: 10px;
    float: left;
/* FOOTER AREA */
.footerArea {
    width: 980px;height: 88px;
    background-color: #cfcfcf;
    background-image: url(images/footer_bkgd.jpg);
    background-repeat: no-repeat;
.copyright {
    border-top: solid;
    border-color: #737a90;
    border-width: 2px;
    margin-left: 240px;
    margin-right: 30px;
    padding-top: 12px;
    color: #666666;
    font-size: 10px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
CSS for the SPRY Accordion
.Accordion {
    overflow: hidden;
    width: 255px;
.AccordionPanel {
    margin: 0px;
    padding: 0px;
.AccordionPanelTab {
    color: #CCA72F;
    margin: 0px;
    cursor: pointer;
    padding: 10px 30px 10px 20px;
    font-weight: bold;
    -moz-user-select: none;
    -khtml-user-select: none;
    background-repeat: no-repeat;
    background-image: url(../images/accordion_255_tab_normal.gif);
.AccordionPanelContent {
    overflow: auto;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-image: url(../images/accordion_255_tile.gif);
.AccordionPanelOpen .AccordionPanelTab {
    color: #d88a37;
    background-image: url(../images/accordion_255_tab_down.gif);
.AccordionPanelTabHover {
    background-image: url(../images/accordion_255_tab_over.gif);
.AccordionFocused .AccordionPanelTab {
    background-color: #000000;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    background-color: #000000;
/* Custom AUC classes */
#accordion_255 {
    background-image: url(../images/accordion_255_tile.gif);
    background-repeat: repeat-y;
    background-position: 0px 0px;
.tabTop {
    background-position: 0px 0px;
    padding-top: 15px;
.middleTab {
    background-position: 0px -151px;
.accordion_255_tab {
    margin: 0px;
    font-weight: bold;
.acontent {
    height:200px;
    width:220px;
    overflow: auto;
    padding: 5px 10px 10px 20px;
    useFixedPanelHeights = null;
.AccordionBottom {
    width: 255px;
    height: 33px;
    background-repeat: no-repeat;
    background-position: 0px bottom;
    background-image: url(../images/accordion_255_bottom.gif);

Spry accordion page scrolling

Hi,
Whenever I click on an accordion tab it scrolls the webpage to the first tab in the accordion. Why does it do this and is there any way I can control this scrolling.
See www.thehmc.co.uk/events4.html to see what I mean.
Cheers
Phil

instead of editing your Spry files it might be wiser to use the
options constructor for it. This option object will automatically
replace all "this" variables inside the Spry Widget without having to
edit the files.
So your constructor should become something similar like this:
var acc1 = new Spry.Widget.Accordion("Acc1", {useFixedPanelHeights: true, enableKeyboardNavigation: false })

Removing Scroll Bars on the Spry accordion

When I use the accordion widget it shows the scroll bars when
you click on the panels. Is there a way to remove or hide
them?

I tried your change, but when the panels are moving it still
shows the scroll bar, then after it goes away
Here is an example of my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">
<p>hfghfghfgdhfgdhglk;dfgsklmgfhk;lm'bgm;l'kcxvbm;l'kcvxb';klmcvbx;l</p>
<p>fgdl</p>
<p>hgfhl</p>
<p>gfl</p>
</div>
</div>
</div>
<script type="text/javascript">

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

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 widget not playing nicely with IE7

Good day.
The answer to this issue may be on this forum somewhere already, but I cannot take the time to scour the several hundreds of posts.
I've build and customized my first spry accordion, which can be viewed at http://www.brianfisherart.com/Bio/Contact/
In Firefox and Safari, it works perfectly! IE7 however has some issues. the panels get too large on mouseovers, and jumpy and even larger when opening lower level panels.
Just hoping to find a quick fix.
Thanx in advance.

I'm certainly not going to do your search for you, but you might want to see if using the current version 1.6.1 works better.
http://labs.adobe.com/technologies/spry/
If that doesn't work, you might want to go to the Spry forum.
Of course, now that you've posted, I wonder if any of the links in that "More Like This" box apply?
Mark A. Boyd
Keep-On-Learnin' :-)
If you are reading this via email, be aware that it may not be an accurate representation of my message. Login to read the actual message and/or to reply.

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 Problem in IE7

Hi,
I have created a Spry Accordion containing 7 sections, using CS4. It works perfectly in Firefox, however there is a strange bug in IE7. The top section requires the scrollbar and this is working ok. However, the other 6 sections all have the same problem (btw, none of these other 6 are needing the scrollbar as the text does not fill the content area) - the bottom line of text in each of the 6 other accordion sections is not displayed. All the other text in the 6 sections is ok (other than the fact that the top margin is non-existent - I assume that can be fixed fairly easily)
Has anyone else had this problem, and are there any know fixes?
many thanks for any help offered

Since the answer to your question requires some knowledge of Spry, you might want to post it in the Spry forum. Be prepared to post a URL to the problem page, if asked.
Mark A. Boyd
Keep-On-Learnin' :-)

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.

Accordion scroll bar missing in IE6

As soon as I specify a width for an accordion- .Accordion {
width:275px;} -, the vertical scroll bars disappear. Why is
that and
what can be done about it?

I was able to find the problem, which I believe is an IE6
overflow
issue. By default, SpryAccordion.css sets the Accordion
container to
overflow:hidden; and in IE6 as soon as you specify a width,
scrollbars
are also hidden. So to overcome this problem I needed to
remove
overflow:hidden; from the Accordion container but leave
overflow:auto;
on for AccordionPanelContent.
That solved the problem of not seeing the scrollbars and I
was now able
to control the width of the accordion. However, because IE6
places the
scrollbar outside of the container it is scrolling, the
scrollbar was
hanging out to the right of the accordion and the panel tabs
ended
abruptly at the scrollbar left edge. This meant that the
background
color of the panel tabs stopped before reaching the edge of
the
accordion div. I solved this issue by setting the right
margin of the
AccordionPanelTab to -16px only for IE6 and below using the
underscore
hack. Here's an excerpt of my AccordionPanelTab declarations:
margin: 0; /* for compliant browsers */
_margin: 0 -16px 0 0; /* to fix for ie6 & below */
Of course this is not a perfect solution because the
accordions have
different widths depending on whether or not they have
scrollbars, but
this is the best solution given the shortcomings of IE6. I
hope this
helps others.

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>




<html class="">

<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">


<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 help...

uhm, so here it goes...
well as you can see i have spry accordion issue here...
it seems that some of the contents are having scroll bars and
some dont...
is there a way to eliminate this kind of thing?
here below is the html of my spry accordion that i used:

Anyway in your CSS file select this class
.AccordionPanelContent, erase the height property and change
overflow: auto; to overflow: hidden;
Your constructor function it’s at the bottom of your
HTML file and looks something like this:
<script type="text/javascript">

</script>
Change it to this:
<script type="text/javascript">

</script>
Best Regards :-)

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 with nested accordions

I'm building an FAQ list with topics and sub topics, using a
containing Spry accordion with multiple children, though just the
one extra level deep. The nested accordions won't expand the full
list. Instead, the div height remains fixed, and I get a scroll
bar. Any ideas what part of the javascript to tweak to open up this
functionality?
Here's the page:
http://www.pixmission.net/dev/tex/faqs.htm
thanks

alancymru escribió:
> I'm building an FAQ list with topics and sub topics,
using a containing Spry
> accordion with multiple children, though just the one
extra level deep. The
> nested accordions won't expand the full list. Instead,
the div height remains
> fixed, and I get a scroll bar. Any ideas what part of
the javascript to tweak
> to open up this functionality?
>
> Here's the page:
>
http://www.pixmission.net/dev/tex/faqs.htm
>
> thanks
>
Sure! It has to be done in two parts. First part from your
SpryAccordion.css file and the second it is adding a new
property to the
Accordion object when its initialized.
First part:
Select .AccordionPanelContent class
Delete Height property
Change the value of overflow from auto to hidden;
Second part:
In the constructor function at the bottom of your faqs.htm
file, amend
this code:
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
var Accordion9 = new Spry.Widget.Accordion("Accordion9");
to this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{useFixedPanelHeights:false});
var Accordion9 = new Spry.Widget.Accordion("Accordion9",
{useFixedPanelHeights:false});
Hope this helps.

Spry Accordion with custom scrollbar

I'm trying to find a Spry Accordion with a custom scrollbar.
There are other accordion scripts out there but I am most
comfortable working with the Spry script. I cant seem to find any
of these with a custom scrollbar. Can someone here help?

Mr. Andersson wrote:
> I'm trying to find a Spry Accordion with a custom
scrollbar. There are other
> accordion scripts out there but I am most comfortable
working with the Spry
> script. I cant seem to find any of these with a custom
scrollbar. Can someone
> here help?
Spry has no custom scroll bars. Currently Spry (as of 1.6.1)
doesn't have drag and drop which would be required for a custom
scroll bar. Best you might be able to do would be to try to style
the browser provided scroll bars, but that's not valid CSS, and I
know that Firefox doesn't show the styled scrollbars (IE does).
Take a look at this page in IE:
http://www.iconico.com/CSSScrollbar/
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry Accordion gains scroll bars in IE7

Similar Messages

Maybe you are looking for