Spry Accordion (Dreamweaver CS4) has blue outline

[monta17]

I am new to Dreamweaver (previously used GoLive) and am trying to make a Spry Accordion widget for my navigation menu. When I look at it in Safari there is a fuzzy blue outline around the entire accordion whenever I click into it. The outline is there in Firefox as well, but it is a thin dark outline. These do not show up in Opera or Chrome. (all viewed on a mac)
How do I get rid of it?

(I just looked at it in Internet Explorer on a PC and the outline is not there.)

I did find this note somewhere:

"... fuzzy outline appears around entire accordion. To remove this outline, create an advanced style called .Accordion:focus, then set that style's outline property to none"

This sounds like it may be the answer. But I can't figure out how to do what it says (I'm fairly new to css). I tried to create a class style but it wouldn't let me name it ".Accordion:focus"

I am attaching jpgs of what it looks like in both Safari and Firefox.

Thanks for any help.
Barbara

 

[UTclassof89]

add these into your CSS:

.Accordion {
overflow: hidden;
outline:none;
}
.AccordionFocused {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

 

[monta17]

Perfect!!
Thank you so much!

I have spent most of the day trying to figure this out.


Since you've been so helpful, can I ask another question?
After clicking within that navigation, is there any way to make it so that when you click out of the navigation (anywhere else on the page) the accordion closes back up? Right now, when you click elsewhere the last panel that opened up remains open.

Thanks again for your help,
Barbara

 

[UTclassof89]

I haven't tried that, but the info on this page could be adapted to execute on a change in focus.

 

[monta17]

I am now having another problem:

I have an AP DIV which has a background image. I have put text into the DIV and set the overflow to AUTO in the css.

When I view it in Safari and Firefox and Chrome and Opera, it works fine. However, when viewed in IE, BOTH the text AND the image scroll.

(Also, the navigation I have made with the thumbnail images across the bottom seems to work in all but Chrome... it does something totally weird. I probably have made the whole thing wrong. This is my first Dreamweaver site)

Thanks for any and all help!

http://www.das20studio.com/test3/sutton_street1.html