Spry Accordion Content not expanding fully

Hi,
I am trying to add some nice user friendly stuff to my site. I've created a Spry Accordion in which the content is images that I have created in photoshop. Some of the content is longer than 200px and will not show up in IE. When viewed in IE it only shows the 200px even though I have set a script that says fixed panel heights = false. I've updated everything to the updated spry...I'm going to attach all of the files that go with the dreamweaver file.
Please help me!
You can view the page at http://www.hofchurch.com/updated_site2/about_hof.php
Cayle

You are using Spry 1.4, the latest version is 1.6.1, consider upgrading to the latest version.

Similar Messages

Spry accordion content not hiding in IE

Hi all,
I threw together a page using accordion menus (
http://www.riverviewbiblecamp.com/menu.php),
it works fine in Firefox, Safari, and Opera, but in Internet
Explorer the conent doesn't hide in the 'closed' panels. The panels
move when you click, making me think it's a CSS issue?
Thanks a lot,
Rory

Hi:
Have you tried updating Spry library files to the latest
version (1.6)?
From your source, I can see that you are using 1.4
Regards,
Andres Cayon
Spain Adobe Dreamweaver User Group
http://www.dwug.es
"country.hacker" <[email protected]>
escribió en el mensaje de
noticias news:fte4jc$qgg$[email protected]..
> Hi all,
>
> I threw together a page using accordion menus
> (
http://www.riverviewbiblecamp.com/menu.php),
it works fine in Firefox,
> Safari,
> and Opera, but in Internet Explorer the conent doesn't
hide in the
> 'closed'
> panels. The panels move when you click, making me think
it's a CSS issue?
>
> Thanks a lot,
> Rory
>

Spry accordion panel not lining up with top of viewport in FF3.5

I have created a new web page using spry accordion for the first time on my site. In IE8 all works perfectly - opening and closing and moving between tabs is smoothly done. My first tab opens a very long panel (way over the web browser's height), and scrolling down through the text brings us to the second tab. I disabled fixed panel heights - these expand fully when the relevent header is clicked. Clicking the second tab in IE8 closes the first panel smoothly, opens the second panel smoothly and leaves the browser sitting so the 2nd tab is in line with the top of the browser window. Perfect!
In FF3.5, following the same routine, with the first panel open, and scrolling down to the 2nd tab - click this and it closes/opens the panels, but is very jerky doing this and you are left with the browser window looking at the very bottom of the web page, instead of at the top of the panel.
I'd appreciate any advice on this before I give up and move to JQuery. Is this a bug?
**UPDATE** I tried Jquery and the results are worse! It doesnt even line up in IE8.
Please feel free to check out the code here:
http://www.pjamedia.com/?page=modeladvice
Any help would be very much appreciated.
Thanks, Paul A

so take an anchor at the begining of the Accordian panle, link the <a> tag to the anchor point.
<script type="text/javascript">
function goToAnchor() {
location.href = "#unilist";
</script>
paste this script in <head> tag.
<a name="unilist" id="unilist"></a> // add an anchor tag before the accordion panel.
                  <div id="Accordion1" class="Accordion">
                    <div class="AccordionPanel">
                      <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, Ohio*</a></div>
                      <div class="AccordionPanelContent">content</div></div>
<div class="AccordionPanel">
                      <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, oiowa*</a></div>
                      <div class="AccordionPanelContent">content</div></div>
</div>

Spry: Accordion does not close properly

Hi Everyone,
I am very new to web design, so bear with me please.
I created a new website using Dreamweaver and added a spry accordion to use as a menu. it seemed to be working fine, but as I was adding links into the boxes it quit working on me. I have thoughts of restarting, but I thought that you may be able to help me here as well. The link to the website is http://www.blakesprairiefair.com/2009.html
I used images for the tab titles and they should all be uploaded, I shoud haver 5 tabs in the accordion but it only shows one   I am attaching how it looked a few keystrokes ago. I can't figure out why it is acting so oddly
If you need more from me let me know,
Thank you so much for any help
Chuck

Hey, Thanks for the tip. I looked through the code like 5 times and I can't seem to find any unclosed or extra Divs I attached the code below in case that helps.
I got the code for the defaultPanel: -1 from http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0E55F588-24EC-4dd3-9508-82132 4E7F133.html
- Still haven't found the error
Thanks
Chuck
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="_css/NewWebpage.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<div id="UpperLeftSpacing"></div>
<div id="UpperRightTitle"></div>
<div id="LowerLeft4NavBar">
    <div id="NavBar">
      <div id="SmallerNavBar">
        <div id="Accordion1" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Home.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><em><a href="http://www.blakesprairiefair.com">Home</a></em></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-09Events.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
            <p><em><strong><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm">Events Schedule</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm"></a></p>
              <p><em><strong>Friday Night :</br>
              <br>     <a href="http://www.blakesprairiefair.com/index_files/DemoDerby.htm">Demo Derby</a></strong></em><em><strong></em></p>
              <p><em><strong>Saturday:</br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/JudgingSchedule.htm">Judging</a></strong></em></br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/CombineDemoDerby2009.htm">Combine Derby</a></em></p>
              <p><em><strong>Sunday:</br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/TractorPull.htm">Tractor Pull</a></em></p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-09Docs.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
              <p><em><strong><a href="http://www.blakesprairiefair.com/2009FairBook.pdf">09 Fair Book (pdf)</a></strong></em></p>
              <p><em><strong><a href="http://www.blakesprairiefair.com/index_files/Page396.htm">09 Documents</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/Page396.htm"></a></p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Contact.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><strong>Content 5</strong></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Links.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><strong>Content 6</strong></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Past.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
              <p>2007</p>
              <p>2008</p>
            </div>
          </div>
</div>
        <div id="Cover">
          <p align="center"><img src="2009Cover.jpg" width="185" height="302" /></br>
          <br>Cover Designed By:</br>
          <br>Andrea Pagenkopf</br>
          <br>Rolling Rockets 4-H</p>
        </div>
      </div>
    </div>
</div>
<div id="MainContentBox">
    <div id="BoxForText">
      <p align="center">Welcome to the new</p>
      <p align="center"><strong>Blake's Prairie Jr. Fair </strong></p>
      <p align="center">Webpage</p>
      <p align="center"> </p>
      <p align="center"><strong><em><u>News:</u></em></strong></p>
      <p align="center"><em>Buttons for 2009 are on sale now! </em></p>
      <p align="center"><em>Visit local businesses or contact your local 4-H Club or FFA </em>Chapter to purchase one today.</p>
      <p align="center"> </p>
      <p align="center"><strong><em><u>Updates:</u></em></strong></p>
      <p align="left"><em>7/10/2009</em> - New Homepage</p>
      <p align="left"><em>5/20/2009</em> - <a href="http://www.blakesprairiefair.com/2009FairBook.pdf">2009 Fair Book</a> Added to Site</p>
    </div>
</div>
<div id="BottomBox"></div>

</div>
</div>
<script type="text/javascript">

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

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.

Vertical spry menu bar not expanding

Hi,
So here is the website I am working on. The menu bar is not expanding. It only needs to expand for the "Basic Concepts" tab.
http://mypage.iu.edu/~mgmodell/r547/reuse/
I know why I am having the problem because I tried a lot of the sprys out and when I deleted them not everything was cleared. But any help would be nice!

It looks like it is fixed
Gramps

My Spry Accordion will not work In IE but will in Opera

Hi Everyone,
I'm having a problem with my accordion spry widget in a website that I'm working on. Bear in mind theres's a lot of things to fix but it's in the initial stages. What happens is, if you go under the heading, business and then training you will see an FAQ section. You'll notice that the tabs are all open and it's just not functioning correctly in IE, Chrome and Firefos but it is working in Chrome. (I Haven't tried in Safari as my computer freezes ??) I've included the link and code below.
Thanks
Steve
www.adelxt.net
code:
<meta name="keywords" content="computer,consulting, consulatant, windows, 2003, 2000, 2008, XP, Vista, Sonicwall, Novell, Netware, Virus, New Hampshire, Massachusetts, northern, wireless, wiring, southern, firewall " />
<meta name="description" content="A local consulting firm specializing in Windows Server and Novell Netware as well as firewalls. This company troubleshoots and installs networks, wiredd and wireless and will maintain your network." />
<!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">
<style type="text/css">

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

</style>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Adel-Xt Computer Company</title>
<link href="css files/main.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18563317-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body class="twoColElsLtHdr">
<div id="container">
<div id="header">
    <table width="100%" border="0" align="center">
      <tr>
        <th bgcolor="#FF6633" scope="col"><div align="left">
          <p align="center" class="style2 style4">Adel-Xt Computer Company</p>
          <p align="center" class="style2 style4">Derry, NH 03038</p>
          <p align="center" class="style2 style4">1-603-434-5311</p>
        </div></th>
        <th scope="col"><h1>
          <div align="center">Home Training for the Individual</div>
        </h1></th>
      </tr>
    </table>
</div>

<div id="horizontalmenu">

</div>


<div id="sidebarright">
<h2 align="center">Training FAQ</h2>
<div id="Accordion1" class="Accordion" tabindex="0">
   <div class="AccordionPanel">
     <div class="AccordionPanelTab">Has Steve ever taught in school?</div>
     <div class="AccordionPanelContent">Yes. Steve has taught many computer, math and Engineering vlasses in local colleges.</div>
   </div>
   <div class="AccordionPanel">
     <div class="AccordionPanelTab">What is Steve's background?</div>
     <div class="AccordionPanelContent">
       <p>Steve has a BSME in Mechanical Engineering, Masters in Business Administration (MBA), advanced concentration in decision support systems (DSS)and certification in Microsoft.</p>
       <p>Steve also has 18 years working in industry in the field of Information Technology (IT), Engineering (Software & Mechanical) , Manufacturing Engineering, Management , Quality, Manufacturing and much more...</p>
     </div>
   </div>
   <div class="AccordionPanel">
     <div class="AccordionPanelTab">What is the maximum that I can have in a clasroom.</div>
     <div class="AccordionPanelContent">This is up to you. Steve will discuss this with you and point out the pros and cons of having too many students in one session.</div>
   </div>
   <div class="AccordionPanel">
     <div class="AccordionPanelTab">Will Steve do evening training?</div>
     <div class="AccordionPanelContent">On special occasions he will. Normally evening training is done with some notice for Steve.</div>
   </div>
   <div class="AccordionPanel">
     <div class="AccordionPanelTab">Does Steve have a set program</div>
     <div class="AccordionPanelContent">No. This is exactly what he doesn't want. Steve wants to customize the training toward your business. An important part of training is the planning which is what he will be discussing with you.</div>
   </div>
</div>
<p> </p>
<p> </p>
</div>
<div id="mainContent">
      <h2>Training</h2>
      <div>Adel-Xt Computer will help create a training program for you and your employees. We will gear
        the training program to your business so employees taking this class will become more efficient in their everyday work skills. Once
        a program is approved we will send our instructor (Steve) to your facilty to teach the class. </div>
      <div> </div>
      <div>    Please call 434-5311
        or <a href="mailto:[email protected]" target="_self">contact us</a> for further discussion on how Adel-Xt Computer can help your business become more efficient thus leading to larger profits.</div>
      <p><br />
      </p>
    <p>
      
    </p>
</div>
<p>

</p>
<div id = "subcontent2" align="center">
<h2> Her are few Examples of Training</h2>
<p class="style4">Beginner training for people new to computers.</p>
<p class="style4"> Excel 2003, 2007, 2010</p>
<p class="style4"> Word 2003, 2007, 2010</p>
<p class="style4">Email usage and cautions</p>
<p class="style4">More....</p>
<p> </p>
</div>
</div>
<p><br class="clearfloat" />
</p>
<div id="footer">
      <table width="100%" border=" 0">
      <tr>
        <th scope="col"><p class="style5">Presently we are redesigning our Website. If a link isn't working please contact us via <a href="mailto:[email protected]">email</a> or call us at 603.434.5311.</p>
        <p>Adel-Xt Computer Company Derry, NH 03038 1-603-434-5311 Contact Us</p>
        <p>Last Updated:
          Friday, November 5, 2010 5:29 PM
        </p></th>
      </tr>
    </table>
    <a href="http://www.tinycounter.com" target="_blank" title="web counter"><img border="0" alt="web counter" src="http://mycounter.tinycounter.com/index.php?user=adelxt"></a>
</div>
</div>
<script type="text/javascript">

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

You not 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.
If you replace
<script src="http://www.adelxt.net/SpryAssets/SpryAccordion.js" type="text/javascript">
with
<script src="http://labs.adobe.com/technologies/spry/widgets/accordion/SpryAccordion.js" type="text/javascript"></script>
you will notice that it works as it should.

How to make Spry Accordion Content Panel with a variable content fit

I have a problem. The content panel has a fixed length so I changed it to auto so I can view all the content of each panel. The problem is that the content panel takes the dimensions of the longest content and applies that to ALL the panels. So as you click from one to the other, some are practically empty with all the space, while others seem full.
The question is, is there a way to vary the size of the content panel so on one that has not a lot of content stays to that size. This is the way I have the CSS for that. How can I achieve the variable heights?
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 5px 4px 6px 15px;
height: auto;
background: url(../images/backgrcolor0033.png);
color: #FFF;
Thank you.

<!DOCTYPE HTML>
<html>
<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">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });</script>
</body>
</html>
Gramps

Not able to work in internet explorer due to the contents not expanding

Hi.
When am clicking + symbol gets changed - but not showing any links content , under the + symbol there is some links are there but as our system system is windows xp internet explorer 7

under the + symbol there is some links
See if you can view them without CSS, e.g. using View, Style, No Style (Alt-V y N)
Robert Aldwinckle

Spry accordion - content must close on click

Hi,
I was looking for my answer on the forum but still had answers. I gave a reply but I don't know if someone wil read this (sorry if I'm incorrect).
http://forums.adobe.com/message/2154232#2154232
The question is:
In my test site http://www.home-maastricht.nl/parkeren.html I have almost only accordion tabs.
They all need to close when I click on the picture from de accordionPanelContent.
Where/which/How do I have to put the command to close these. Is it possible that I only do this on one place in de accordion css?
If you click on the last accordeon Tab you see more pictures (a small dataset). This is only visible in IE but not in FF.
Also does the page jump to the top. Any idee what I can do? I work with CS4.
Al lot of questions but they are the finishing touch of the site!!
Thanks a lot for your help!
Carla

Hi Arnout,
First thank you for your reply. I use Mozilla Firefox 3.6.3
But I'm happy it works in your version so I only have to wait that everybody uses the newer version?
Do I have tot give onclick="Accordion1.closePanel()" to every single image?
Like:
!images/12-keukeninterieur/websiteformaat/12-01-maesen-keuken.JPG|height=933|alt=Maesen Munstergeleen|width=700|onclick=Accordion1.closePanel()|src=images/12-keukeninterieur/web siteformaat/12-01-maesen-keuken.JPG!
Ofcourse I’m going to reed the link below, but just for this moment.
Do you have also a solution for the jumping when I’m on the last tab (the window jumps up).
Thanks a lot for helping me !!
Carla Leliveld

Spry Accordion and jQuery UI Accordion for Widget Browser

I have Dreamweaver CS5 and used the spry accordion for a left menu. I then used the widget browser and added jQuery UI accordion. But there appears to be a conflict in that the spry accordion is not displaying the white font on hover, instead using the gray font from the jQuery UI accordion.
This may be a duplicate post, I asked this question on another section of this site, if so, I do apologize. Any help is greatly appreciated.
The page sample is
http://www.sbcvote.us/registrar/2006_form460.htm
Thanks to all,

In SpryAccordion.css you are telling the Spry Accordion to do exactly that.
Have a look at lines 97 and 100 where the colour is set to #555555
Gramps

Spry Accordion jerky and not content filling correctly after refresh

Hello.
I have a page I'm trying to make a Spry Accordion work smoothly.
I've tried options such as, fixedHeight fps from 30 - 500, timer from 100ms to 1000ms, disabling Keyboard navigation, all working somewhat, BUT....
When opening and closing the panels sometimes they open to "fill content" and others no.
For example in the LEgal panel there is only one line. I would like that panel open to a height equal to the line height. Some other pabnels open partially then fully, and back again.
The animation can be pretty jerky.
I've duplicated the page and while playing with a JQUERY UI accordion it is pretty smooth.
IS there anything I can do to get the Adobe Spry to work?
http://corporate.fr/ce/clientsSpry.html
Ooops never mind. I will post this anyway as maybe other noobs will resolve the problem if they do as I did.
I stuck this
In the container after the div not realising the default <script> is put at the very end of the mark up just before the </body>
Two things learned, one when the Adobe document says the script has to go in after the mark up, that means not just after the div with the Spry but all the way at the end,
and two: if you modify the Spry options, note the var acc1 and the string "Acc1" have to be replaced with your Spry ID, in both places.

Hello to all,
I have spent HOURS trying to figure this out....
I know the above code is messy, but it does correctly do the accordions via innerHTML. I have a dropdown on my page and when the user changes the input there, I call "doSpryData" and it is supposed to 1) reload XMLDataSet and 2) redraw the Accordion (I would like to have different data displayed on the same page depending on what user selects). For some reason, it will not redraw the accordion and show the data after it has been done once.
I am really desperate so any ideas would be much appreciated!
Cheers,

Spry Accordion not collapsing properly in IE & Firefox

My design portfolio is on my testing server. The accordion
works perfect in Safari but it will not collapse in Firefox and
Internet Explorer. Here is the link:
http://deptart2.memphis.edu/~jwilcoxen/web_portfolio/home.php
. Please help. I attached my spry accordion css.
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* 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 {
border-left: none gray;
border-right: none black;
border-bottom: none gray;
overflow: auto;
background-color: #FFFFFF;
font-family: "Gill Sans", "Helvetica Neue", "Arial Narrow",
sans-serif, Helvetica;
padding: 10px;
background-image: url(../images/glowbg_home.jpg);
background-repeat: no-repeat;
text-align: left;
text-indent: 8px;
/* 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;
background-color: ##54275F;
/* 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.
.AccordionPanelTab {
background-color: #000000;
border-top: 1px none black;
border-bottom: 1px none gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
color: #CCCCCC;
font-family: "Gill Sans", "Helvetica Neue", "Arial Narrow",
sans-serif, Helvetica;
font-size: 12px;
font-weight: normal;
/* 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: hidden;
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
text-align: left;
vertical-align: 50%;
height: 326px;
/* 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: #4F285B;
/* 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: #51275D;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #FFFFFF;
background-color: ##54275F;
/* 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: #000000;
/* 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: ##54275F;
height: 310px;

Thanks Gramps, that information was really helpful.
I just removed all instances of 'rgba' in the .css rules that specify color, changing it to 'rgb' and also removing the 4th parameter indicating the transparency value.
Now that I understand what the problem was it actually makes complete sense, since IE does not support transparency.
Thanks again.

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 1.6.1 gains vert & hztl scrollbars in content area.

I've scratched my scalp raw. This page works fine in both Firefox and Chrome, but picks up vertical and horizontal scrollbars in the content area once open. Is this a known bug, or does it have something to do with the fact that I'm also using a Spry tabs inside the accordion content area? I'm using Spry 1.6.1 and Googling the issue turned up a few other people with the same problem. I've fiddled with the CSS overflow and height properties of the .AccordionPanelContent class, but to no avail. Please help!

I'm sorry, I did not complete the sentence correctly. The scrollbars appear in IE7. They're fine in Firefox, Chrome and IE8. Should I post html file and dependencies?

Spry Accordion Content not expanding fully

Similar Messages

Maybe you are looking for