View Full Version : Accordion Spry Menu

06-13-2010, 07:34 PM
Hey folks I am working on a site for a business associate of mine, and while once upon a time I was pretty fluent in html, this has been a process of bringing myself up to speed in the years since I was working on web design regularly. To that end, I have been working on this site a bit at a time, resolving issues as they come up- but I seem to have hit a brick wall as far as what I can diagnose currently. I am hoping someone on these forums can offer me suggestions on how to resolve these issues. I am working in Dreamweaver CS3.

firstly, the working URL for this site is:

I just put the site, so what you see is the current version I am working with.

The main issues I am currently struggling with are the following:

I am trying to remove the "focus" stroke around the accordion menu when it is clicked on. This appears as a fat blue-grey outline in safari, and a thin black line in firefox
I want the default state of the menu when the page is open to start with the panels collapsed. I know you can set which tab starts as "open" and to this end I tried creating a blank tab at the bottom to give a closed appearance, but I kind of felt like this was a workaround, and not the proper way to code the widget.
I am trying to find a way to have different heights for the panel contents. It occurred to me that this may not be possible for the widget to function properly, but as you can see, some tabs have more content than others, and as it currently stands, it looks a bit odd to open a panel with space for six options and only containing one.
As the spry menu animates, I have been noticing a "jitter" in the images on the page. Is there any way to eliminate this issue?
Aside from these spry issues, I am also noticing the bottom buttons (catalog, custom, contact) are displaying borders in some browsers (firefox) and not in others. I set the border value to none, which removed the issue on safari, but it's still there in firefox.

Thanks for your attention to my woes here folks, I apologize for the "technical terms" like I said, I'm out of practice and learning as I go! Thanks in advance for any help or suggestions!

06-13-2010, 08:51 PM
One of the issues could maybe be solved with adding outline: none; to the SpryAccordion.css like this

.Accordion {
overflow: hidden;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-color: #13100E;
width: 125px;
And also you might want to add this to your css:

img {
a:link {
border:none; outline:none;
:focus {
outline: 0;
These steps could solve some of the problems ( I hope). I don't have ideas for the other stuff right now.

06-13-2010, 11:10 PM
Those fixes both worked like a charm! thanks azoomer