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.

Similar Messages

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>

M-Audio 61ES not playing nicely with Logic Pro X!

The 61ES has been doing some really wacky things: I opened it up out of the box for the first time last night and right off the bat the middle octave of notes on the controller were very quiet compared to the high and low notes on the board. It was like the velocity wasn't working properly on those keys or something. The sounds worked fine in Logic when I pencilled them in. But I was too tired to mess around with it more, so went to bed and figured I'd deal with it in the morning. So this morning, the middle octave of keys seems fine, but the middle G just won't play at all. And many of the notes aren't tracking, or playing- especially during fast passages.
I pulled up Pro Tools 10 and the 61ES worked fine. So something is going on between the controller and Logic. Anyone have any ideas?
I'm running it on a MacBook Pro with 10.8.5. And the latest version of Logic Pro X- 10.0.6. Thanks for any advice!

Try this....
http://www.noterepeat.com/products/m-audio/usb-midi-controllers/axiom-air-series /269-m-audio-axiom-air-series-setup-with-logic-pro-x
Also make sure you have installed the latest drivers for the Air and Logic...
Axiom AIR Mini 32 Hyper Control Logic v1.0.2 (Mac)
Other that that.. Id contact M-Audio support for further help and advice
http://www.m-audio.com/support

Flash not playing nicely with IE favorites bar

I administer a website (
http://womenscenter.uconn.edu/new_site/
) which on its main page has a Flash movie looping. It also has a
left menu bar for navigation, and everything is blissful until one
turns on the favorites bar in Internet Explorer. Then if the screen
is not big enough, the navigation bar is actually cut off in favor
of the Flash movie. What this means is that if there isn't enough
space with the favorites bar for both the navigation bar and the
movie, the navigation bar loses out rather than the other way
around (which is what one expects and wants to happen). I know it's
the Flash movie causing this because it doesn't happen on any of
the other pages in the site, which are basically identical in
layout except they don't have the Flash. Any help in preserving the
navigation bar would be greatly appreciated!

You can try to disable the hardware acceleration in the Flash Player.
See [[Cannot view full screen Flash videos]]
* http://www.youtube.com/swf_test.html (right-click the player: Settings)
Flash "Display settings" window:
* http://www.macromedia.com/support/documentation/en/flashplayer/help/help01.html
Your above posted system details show outdated plugin(s) with known security and stability risks that you should update.
*Shockwave Flash 10.2 r153
* http://www.mozilla.com/plugincheck/
Update the [[Managing the Flash plugin|Flash]] plugin to the latest version.
*http://kb.mozillazine.org/Flash
*http://www.adobe.com/software/flash/about/

Time Capsule does not play nicely with Cisco Router

Three days ago, I had an older Linksys router attached to our ISP's cable modem by ethernet; the network included a wireless time capsule and apple express base station set up by our son last year (who understands this stuff, but lives 2,000 miles distant). The router died and I purchased a new Linksys router (E2500). It is occupying the same spot as the old router, but running with no security settings as yet. My wife's iMac and two Windows XP laptops work just fine on the network, as well as our NetFlix connection on our TV. My MacPro, however, can not access the main network - it can see it but won't grab an IP address. It will, however, see and connect to the router's guest account, although with reduced signal strength. The Time Capsule is now connected to the MacPro by ethernet (if I make it wireless, it will back up fine, but I can't access Internet or send email on the guest account). The AirPort Express is unplugged and not a factor.
Yesterday, I spent most of the day on the phone with Cisco (who claimed AirPort Express will not work with their routers, which I know to be, um, less than accurate), and with Apple Support - who did not help (other than to set up a Genius Bar appointment this morning at the local Apple Store). The Genius Bar turned out to be a disappointment as well - the MacPro with Time Capsule attached worked perfectly on the main network in the store, but at home, even with a test user account with Admin authority, as they suggested), no go.
If I unpower Time Capsule, I loose Internet. With Time Capsule plugged in, I can access my router's guest account -
Aside from returning this router and starting fresh with a different brand router, any suggestions?
Thanks for any guidance, suggestions, etc.

My first reaction is to suggest you ring your son.. !!
And I guess my second one, would be to remove the E2500, and connect the time capsule directly to the cable modem.. they are equivalent devices. The TC is an excellent wireless router and will work better as the primary router in your network. Turn off the cable modem so it can pick up the new device.. plug the TC directly to the cable modem then turn on both.
Make sure the TC is working as router.. and you should be able to setup the wireless to connect all your computers etc.
The E2500 can also be used as a WAP if you need more range. But be aware you have to make sure it uses a separate channel to the TC. Plug it in via ethernet to LAN port not WAN.. and turn off dhcp and set the IP to same IP range as the TC but make it outside the dhcp scope. So for example the TC is running 10.0.1.1 and then make the E2500 10.0.1.254
The express cannot do WDS to the Linksys.. so what you were told is correct. It may be able to connect via ethernet but not as repeater. But you can do that with the TC now that it is the main router.

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 Widget Init Closed, Without Snap?

(This is a topic discussed in
another
thread, but I didn't want to hijack the thread with my own
question, so I started a new one...)
I want to start my Accordion widget in a closed state. I
figured out the trick of setting the default panel to '-1' and
turning fixed heights by altering the code in the footer of the
page to:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{defaultPanel: -1,
useFixedPanelHeights: false});
When you do this, however, the page loads with the first
accordion panel open and visible for a split second until the page
is loaded, at which point the widget snaps the panel shut. This is
very ugly and undesirable, especially given that this accordion is
on a page element common to every page on the site.
I've tried setting an initial class that is hidden, however
the Spry Accordion widget is written in such a way that it
preserves whatever classes you have rather than replacing them.
Does anyone know a way to load the page with the accordion
panels shut without this initial flash of the first panel snapping
shut?
Thanks,
Steve

Hey Al,
Nice plug for your own application! Here is another one,
since I am one of your happy customers.
I used the Spry widgets in the new DW CS3 and spent a couple
of days trying to tweak things to get them to work the way I
wanted. After getting input from my brother (his site that I am
working on) he really wanted some more style than what I was coming
up with using the basic DW widget. I smacked my dollar on the
barrel head and tried out PVII Accordion instead.
I can't tell you how fast and easy it was to insert and
customize this plugin. Not to mention they had some nice little
themed styles, one of which (the cobalt blue) was a real close
match to the color scheme I originally was using! (PS - any chance
of getting more theme styles down the road for this plugin or
matching styles for the other ones???)
Changing the open or closed state of the panels - it was so
simple!!! I simply went into the modify option and chose the number
that corresponded to my different panels in the menu list. My buddy
used an expression about DW CS3 that fits nicely with using tools
like PVII Accordion Magic. You can use a screwdriver with some
precision and a lot of hand strength to build what you want but it
will take you alot of time...or you can plugin a power drill and be
done with it!
To see it in action on my current work in progress go to:
http://www.dvdflashbacks.com/williamsburghealth/index.php
As for sstringer's original question - how to do this in DW's
Spry widget...
I think you are onto the right track with the -1 setting. If
I am not mistaken though, Spry uses 0 for the first panel, so I
think you would need to use an option like {defaultTab: 1} to open
the 2nd panel and so on.
PS - Just so everyone knows - I am not a sales person for
PVII - just a very satisfied customer!

Spry Validation Text Box - Playing Nicely w/ Javascript

Greetings-
I'm using the Spry Validation Text Fields in a registration
form I'm designing. I really like the validation they provide.
However, I'm trying to get them to play nicely with a password
validation Javascript code that gets called when the form is
submitted:
Form Example
The password validation JS compares the two email fields to
make sure they are both the same. The JS is called when the form is
submitted.
<SCRIPT LANGUAGE="JavaScript">

</script>
However, this disables the Spry text field validations. I'm
most certain my "OnSubmit" code causes the Spry validation to not
execute.
Any gurus have some ideas around this?
Thank you.

Your are going to love this...
I confirmed I have the constructor same as yours. Only difference in your code and mine is I did not have the validateOn blur in the Javascript, but rather was using the default validation on submission. However, I dutifully added that, just to replicate your test exactly and to look at apples to apples. The code is still throwing up the validation messages.
Stumped, I took a break, played a video game, cleared the mind and started the process of carefully and logically working the code for about the umpteenth time in the last 24 hours.
Given this validation is working just fine on the page where new items are created, I laid out that pages code next to the edit page code and started going through line by line... and Eureka! No reference in my edit page head to the SpryValidationTestField.js... (**red faced, banging head on desk**)
That's 2 for 2 with you helping me realize its not the Spry code, so it must be something else and that something else, once again, was me. The human error element. If I hit strike three down the road I deserve a sound verbal thrashing...
Once again I am in your debt and you have my gratitude!
Thank you Gramps!

Reliability of Spry Accordion Widget

I posed a question in this forum last week and was unable to
get a helpful answer to my problem. I am trying to use the Spry
Accordion Widget on a site:
http://www.jalc.org/JazzED/s_eac_B.html
I have researched here to learn how to get the panels to
start closed with one panel to be open by default. This works
exactly like expected in Firefox and Chrome but NOT in IE.
Am I wrong in my assumptions that:
1) Folks from Adobe monitor this board and chime in with
answers/solutions or acknowledgement of bugs; and
2) Spry widgets are a reliable cross-platform technology that
have had the bugs worked out
or, is the real case
1) Adobe folks only look into these forums on an occassional
basis, if at all; and
2) Spry widgets should be left alone if you are expecting
them to perform properly relative to cross-platform capabilities.
I appreciate anyone's feedback or suggestions on these
questions.
Thanks,
Andy

I just re-read my post above and am mortified at the tone of
my message. It was in no way intended to come off as pissy, which I
fear it might have. Anyone with any thoughts on my issue, I would
appreciate your feedback.
Regards,
Andy

DW Tutorial Question (Spry Accordion Widget) Beginner... :-(

Hi, I've just finished this tutorial (http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html) but have a problem with my Spry Accordion Widget, when I preview the site my footer moves when I select a different panels in the widget, I've read back and checked code/css but I still can't sus it out (Don't laugh if it's something obvious!) Please can anyone help me? I've copied code/CSS below.
A BIG THANKS IN ADVANCE!!
INDEX...
<!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>The Yacht Club</title>
<link href="main.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><img src="images/logo.jpg" width="290" height="144" />
    
</div>
<div id="sidebar1">
    <h3>Welcome</h3>
    <ul id="nav"><li><a href="javascript:;">Home</a></li><li><a href="javascript:;">About Us</a></li><li><a href="javascript:;">Membership</a></li><li><a href="javascript:;">Our Boats</a></li><li><a href="javascript:;">Current Races</a></li><li><a href="javascript:;">Contact Us</a></li>
    </ul>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Atlantic Ocean</div>
        <div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
      </div>
<div class="AccordionPanel">
        <div class="AccordionPanelTab">Pacific Ocean</div>
        <div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Indian Ocean</div>
        <div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
      </div>
    </div>
    <p> </p>
</div>
<div id="mainContent">
    <h1> Luxury Yachts</h1>
    <p><img src="images/sailboat.jpg" alt="Sailboat" width="136" height="310" class="fltrt" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    <h2>Sail to the Bahamas </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
<br class="clearfloat" />
<div id="footer">
    <p>© 2009 Luxury Yachts – bring a cup for the bailout</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
MAIN CSS...
@charset "UTF-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FDFDFD;
background-image: url(images/body_BG.jpg);
background-repeat: repeat-x;
h1, h2, h3 {
font-weight: normal;
color: #00583F;
h1 {
font-size: 140%;
h2 {
font-size: 130%;
h3 {
font-size: 120%;
#container {
width: 780px;
margin: 0 auto;
text-align: left;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(images/container_bg.gif);
background-repeat: repeat-y;
#header {
background-color: #DDDDDD;
background-image: url(images/headerBG.jpg);
background-repeat: no-repeat;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0px;
#sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px;
ul#nav {
background-image: url(images/buoy.jpg);
background-repeat: no-repeat;
background-position: left bottom;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 153px;
padding-left: 0px;
list-style-type: none;
#nav li a {
font-size: 90%;
color: #FFF;
text-decoration: none;
background-color: #09553F;
display: block;
padding: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #3574A7;
#nav li a:hover, #nav li a:active, #nav li a:focus {
color: #123464;
background-color: #B7DAD8;
#mainContent {
margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
#mainContent p, #sidebar1 p, #footer p {
font-size: 85%;
line-height: 1.4;
#footer {
background-color: #00593D;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 270px;
#footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
color: #FFF;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
SPRY CSS...
@charset "UTF-8";
/* SpryAccordion.css - version 0.4 - 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;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #7C9297;
border-bottom-color: #7C9297;
border-left-color: #7C9297;
/* 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 {
background-color: #00583F;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
color: #FFF;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #7C9297;
border-bottom-color: #7C9297;
/* 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;
height: 200px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
/* 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: #FFF;
color: #005b3E;
/* 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: #AAC7CE;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
/* 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: #00583F;
color: #FFF;
/* 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: #FFF;
color: #00583F;
Apologies in advance if I'm asking a daft question!!

Hi,
using your source code, I couldn't find a really inserted "Spry Accordion". If I do that (translated from german DW) > Insert > Spry > Spry Accordion, I'll find in my DW source code something like that:
<div id="Accordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
      <div class="AccordionPanelTab">Bezeichnung 1</div>
      <div class="AccordionPanelContent">Inhalt 1</div>
    </div>
    <div class="AccordionPanel">
      <div class="AccordionPanelTab">Bezeichnung 2</div>
      <div class="AccordionPanelContent">Inhalt 2</div>
    </div>
</div>
and in design view:
Please control your DW-entries.
Hans-G.

Spry Accordion Widget hiccups and more

Hi, I am using the Spry Accordion Widget on my website and have the following problems:
1. Is there a way for the accordion movement not to affect the images that are placed below it. For example, I have the accordion placed on top of 3 different logos. Whenever, the accordion panels move up and down (in use) all the contents (below the accordion) moves with it. I don't want the logos to move up and down whenever someone clicks on the panels. How do I make the logos stationary so its placements won't change?
I don't want to use an ap div tag because that would force my website to be in a fix position on a page. All I have been using to position my graphics are div tags and floats; no ap div tags. If you resize the browser window you will see that my website is somewhat elastic. Meaning, the graphics are always in the center of the page regardless of the size of the browser window—this is something I want to keep.
Please go here for better understanding: http://meinaco.net/tblLists.html
2. When one of the accordion tab is clicked there seems to be some kind of hiccup/jump/jerky (up and down movement) before it settles/stops. Is there a way to fix that? I noticed the accordion moves up and down smoothly prior to my inserting the images into the tab panels. To be clear, the images I am referring to are the brown horizontal lines with white words on a green background. Do these images have anything to do with this problem?
3. When the 1st tab (the restaurant panel) is open and another tab is selected, the restaurant panel displays large incorrectly styled text for a brief second as it closes to allow the other panel to open. I know it has something to do with my style sheet but I can't figure out what is causing it. I checked my css files and it seems they all have the correct size. To see this problem reoccur please do the following:
Make sure the restaurant panel is open then click on another panel (one of the 3 panels). As you click on the second panel pay attention to the text that sits inside the restaurant panel. You will see that large minus leading text will appear for a split second.
4. When I run my webpage (url mentioned above) on Safari 4.0.3 there seems to be a blue line outlining the whole accordion widget. This outline doesn't exist on Firefox nor on Opera. Please see attached image for clarity.
Any suggestions or help on any of these problems is greatly appreciated! Thank you in advance.
Meina
I hope someone can help me resolve or give me suggestions for the 1st and 2nd problems at the very least.

<div class="AccordionPanelContent">Castaway the: Restaurant<br />
              1250 Harvard Rd.<br />
              Burbank, CA 91501<br />
              - www.castawayrestaurant.com - (818) 848-6691</p>
Oops!
Missing the opening <p>
I didn't find it, the validator did.
Martin

Spry Accordion Widget appears incorrectly

Hello all,
I used the Spry accordion widget in my online portfolio (http://www.halyna.htsolutionsonline.com). I tested it in IE6, IE7, Mozilla and Safari browsers before uploading. It appeared and worked correctly. I also had friends test the site with their own PCs and Macs. Everything was reported to work correctly.
At work, I found that when I open the first panel of the accordion, the names of the rest of the panels move to the right and only the first open panel appears on the screen with the names of the bottom three panels to the right of the panel which makes all of it look very unprofessional. This doesn't happen when I open the following three panels. Everything appears as it should.
Can anybody shed light on what is causing this? As I mentioned, the site appears and works correctly everywhere else.
All help appreciated!!

<div class="AccordionPanelContent">Castaway the: Restaurant<br />
              1250 Harvard Rd.<br />
              Burbank, CA 91501<br />
              - www.castawayrestaurant.com - (818) 848-6691</p>
Oops!
Missing the opening <p>
I didn't find it, the validator did.
Martin

Spry Accordion widget Question

Have a Dreamweaver question about the Spry Accordion widget.
I am designing a website for a real estate company. I will have different pages set up as a state page with a sub-level of cities within the page. I am using the accordion widget for the cities. As you know, you click on the panel tab and the next panel drops up or down closing/opening the previous panel.
What I would like to do is add an action anchor (view all properties) outside the spry widget to open all the panels at once if a client wanted to see the entire list. However, I would still want the functionality of the panels to be collapsible. Is this possible? Is there a bit of code I would have to add to the JavaScript?
Is there a genius out there that can hook me up with some knowledge?

I actually did away with the accordian widget and went a different route. It was too glitchy. Thanks for your input though. I will take note of the suggestions you provided and maybe try it out one day.

Spry Accordion widget

Have a Dreamweaver question about the Spry Accordion widget.
I am designing a website for a real estate company. I will have different pages set up as a state page with a sub-level of cities within the page. I am using the accordion widget for the cities. As you know, you click on the panel tab and the next panel drops up or down closing/opening the previous panel.
What I would like to do is add an action anchor (view all properties) outside the spry widget to open all the panels at once if a client wanted to see the entire list. However, I would still want the functionality of the panels to be collapsible. Is this possible? Is there a bit of code restructuring I would have to do to the JavaScript?

Try
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
<style>
.openit .AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
</style>
</head>
<body>
<a href="#" class="openAll">open all</a> - <a href="#" class="closeAll">close all</a>
<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 src="SpryAssets/SpryAccordion.js"></script>
<script src="SpryAssets/SpryDomUtils.js"></script>
<script>
function MyOpenAllEventHandler() {
    Spry.$$("#Accordion1").addClassName("openit");
function MyCloseAllEventHandler() {
    Spry.$$("#Accordion1").removeClassName("openit");
Spry.$$(".openAll").addEventListener("click" , MyOpenAllEventHandler, false);
Spry.$$(".closeAll").addEventListener("click" , MyCloseAllEventHandler, false);
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
The "!important" on these rules is necessary because the Accordion widget places inline styles on the actual AccordionPanelContent elements when opening and closing them. Since inline styles have a higher CSS specificity then CSS class rules, "!important" is necessary to "trump" the inline styles.
Gramps

Firefox Spry Accordion widget

Firefox Spry Accordion widget
Hello, I am trying to use Spry Accordion widget. When I click one of the other panels they all turn a strange neon blue color. Anyone know of any fixes?
The below is the index page and below that is SpryAccordion.css
index
<!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>Conferences</title>
<script src="SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<link href="css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outside">
<div id="outsideone">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">
<p>Content ssss</p>
<p>lkajsdfl</p>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>

<div id="photo"></div>
<div id="contentholder">
<div id="contentsone"> <div id="moreone">
<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>
</div> <div id="insidecontentsone"></div></div>
<div id="lineone"> </div>
<div id="contentstwo"> <div id="moretwo">
<div id="Accordion2" 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>
</div>
<div id="insidecontentstwo"></div></div>
<div id="linetwo"> </div>
<div id="contentsthree"> <div id="morethree">
<div id="Accordion3" 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>
</div><div id="insidecontentsthree"></div></div>
</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: 1 });
var Accordion2 = new Spry.Widget.Accordion("Accordion2", { defaultPanel: 1 });
var Accordion3 = new Spry.Widget.Accordion("Accordion3", { defaultPanel: 1 });
</script>
</body>
</html>
SpryAccordion.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;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-right-color: none;
border-bottom-color: none;
border-left-color: none;
background-image: url(white.png);
background-color: none;
border-top-style: none;
/* 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-image: url(white.png);
/* 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 {
background-color: #CCCCCC;
border-top: solid 1px black;
border-bottom: solid 0px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(white.png);
/* 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-image: url(white.png);
/* 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: #none;
background-image: url(white.png);
/* 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: #555555;
background-image: url(white.png);
.AccordionPanelOpen .AccordionPanelTabHover {
color: none;
background-image: url(white.png);
/* 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: none;
background-image: url(white.png);
/* 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: none;
height: 15px;
background-image: url(white.png);
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
background-image: url(white.png);
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
background-image: url(white.png);

Welcome to the Forum!
If you can upload your page to a server and give us a link, we will be able to look at your page in action. Just seeing the code is not enough.
Is this the first time you have used an Accordion? It is probable that the bright neon blue you are seeing is the default style, which you can change in the CSS file. I believe it was designed that color to highlight the feature you want to change .
Take a look in the Accordion's CSS file (it will show as an associated file at the top of your document window) for color rules, and adjust them to suit your palette (and your palate!). Check out the CSS Styles Panel (use Current mode) for a handy way to know what you are looking at. Click on the Accordion in Design View and the rules will be highlighted in the CSS Styles Panel. (Click the right-hand stair-step icon to see the style cascade.)
Beth

Spry accordion widget not playing nicely with IE7

Similar Messages

Maybe you are looking for